XAML 101: Built in Styles and “Cascading”

FacebookTwitterGoogle+Share

Source code for this sample on GitHub: https://github.com/billreiss/xamlnative/tree/master/Xaml101/013_CascadingStyles

In the last post, we looked at how you can create your own styles and use those to provide a consistent look and feel to your application. There are also some styles that are provided for you that can give your app a consistent look with other Universal Windows Platform apps. Consider the following XAML:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <StackPanel>
        <TextBlock Text="Here is some text"/>
        <TextBlock Text="Some more text"/>
        <TextBlock Text="3rd line of text"/>
    </StackPanel>
</Grid>

Select the first TextBlock, and in the Properties pane go to the Style property and click the “peg” next to it, and under System Resources select “TitleTextBlockStyle”. Your XAML should now look like this:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <StackPanel>
        <TextBlock Text="Here is some text" Style="{StaticResource TitleTextBlockStyle}"/>
        <TextBlock Text="Some more text"/>
        <TextBlock Text="3rd line of text"/>
    </StackPanel>
</Grid>

And the app looks like this:

image

Notice that this is a StaticResource and not a ThemeResource. This is because it is not defined in the themed resources section of the built in resources files. We can take a look at the definition for this style by right clicking in the XAML on the TitleTextBlockStyle and then choose Go To Definition.

image

And here is the definition you will see:

<Style x:Key="TitleTextBlockStyle" TargetType="TextBlock" BasedOn="{StaticResource BaseTextBlockStyle}">
    <Setter Property="FontWeight" Value="SemiLight"/>
    <Setter Property="FontSize" Value="24"/>
    <Setter Property="OpticalMarginAlignment" Value="TrimSideBearings"/>
</Style>

It looks a lot like the one we created in the last post. There is however one extra thing here. See the BasedOn property on the Style object? This is how XAML does something similar to “cascading” in HTML and CSS, where one style is based on another. This allows you to create a base style, then create a new style based on that one, and adjusting the values of the properties you need. This is the definition of the BaseTextBlockStyle:

<Style x:Key="BaseTextBlockStyle" TargetType="TextBlock">
    <Setter Property="FontFamily" Value="Segoe UI"/>
    <Setter Property="FontWeight" Value="SemiBold"/>
    <Setter Property="FontSize" Value="15"/>
    <Setter Property="TextTrimming" Value="None"/>
    <Setter Property="TextWrapping" Value="Wrap"/>
    <Setter Property="LineStackingStrategy" Value="MaxHeight"/>
    <Setter Property="TextLineBounds" Value="Full"/>
</Style>

So the FontWeight and FontSize properties are overridden in the child style, but everything else will be inherited.

We can do the same thing, and base a Style on the built in TitleTextBlockStyle.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.Resources>
        <Style x:Key="TitleBlueStyle" TargetType="TextBlock" BasedOn="{StaticResource TitleTextBlockStyle}">
            <Setter Property="Foreground" Value="Blue"/>
        </Style>
    </Grid.Resources>
    <StackPanel>
        <TextBlock Text="Here is some text" Style="{StaticResource TitleBlueStyle}"/>
        <TextBlock Text="Some more text"/>
        <TextBlock Text="3rd line of text"/>
    </StackPanel>
</Grid>

Here we inherit from TitleTextBlockStyle and set the Foreground to Blue, and then use this new style on the TextBlock. This is how the app looks now:

image