Style Windows Store App Controls Using System Resources

Windows provides a rich set of built-in system resources that can be used to style your app controls. In this article, we will see how to apply System resources to a Windows Store app control.

I have a simple Windows Store blank app with a few controls including a Button, a TextBox and a TextBlock. The TextBlock is named HelloTextBlock.

Procedure

Select HelloTextBlock and open the Properties window (hit F4).

Now, expand the Miscellaneous group and find the Style property.

Click the property marker (little rectangle) next to the Style property to open the menu. You will see System Resources and when you select that, you will see a list of System Resources that can be used to style a TextBlock.

 

Select BaseTextBlockStyle from the option.

You will see the style is set to BaseTextBlockStyle. If you open the XAML, you will see the Style value is a StaticResource.

<TextBlock x:Name="HelloTextBlock" HorizontalAlignment="Left" Height="208" Margin="60,313,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Width="952" FontSize="48" Style="{StaticResource BaseTextBlockStyle}"/>

That's all. Using the same approach, you can select any control and apply one of the system styles available to that control.

Note: The styles for the various control types vary so for example if you select a Button and go to System Resources, you will see different styles.

Up Next
    Ebook Download
    View all
    Learn
    View all