Typed styles in WPF

January 11, 2011

tags: , , ,
one comment

Based on my previous post, WPF Quiz #2, I would like to shed some light on a very important mechanism in WPF related to styles.

WPF has a very handy feature called typed-style, which is a style located in a resource dictionary, has no explicit key (or the key explicitly set as the type of the target) and is type specific. For an instance:

<Style TargetType="{x:Type Button}">
    <Setter Property="Background" Value
="Red" />
</
Style>

Having such a style in the Application’s resource dictionary, every element of type Button will be automatically applied with this style unless explicitly set with a different style.

This is a very important mechanism in WPF which provides an intuitive and automatic option to create themes for the whole application just by creating a style for each relevant element and place them in the Application’s resource dictionary (Silverlight programmers, you should wait for the next version… ;-)).

Using this neat feature, you should be aware of some facts.

1. Type specific style is not automatically applied on derived typed. For example, having a typed style for Window, Button or ListBox types, it won’t be automatically applied on MyWindow, MyButton and MyListBox, but it could be explicitly set on them.

<Application x:Class="Quiz2.App"

            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

            xmlns:local="clr-namespace:Quiz2"

            StartupUri="MainWindow.xaml">

   

    <Application.Resources>

        <Style TargetType="{x:Type Button}">

            <Setter Property="Background" Value="Red" />

        </Style>

       

        <Style TargetType="{x:Type local:MainWindow}">

            <Setter Property="Background" Value="Red" />

        </Style>       

    </Application.Resources>

   

</Application>

<Window x:Class="Quiz2.MainWindow"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:local="clr-namespace:Quiz2"
       Title="MainWindow" Height="171" Width="303">
    <Grid>
        <local:MyButton Margin="85,43,89,51"
                       Content="Custom Button"/>
    </Grid
>
</
Window>

image

As you can see, the style is not automatically applied on the custom button. To fix that you should define the specific type as with the MainWindow style.

2. Having a typed style, its key implicitly becomes typeof(element-type). You can define the same key explicitly or search for that key to find this style.

<Style TargetType="{x:Type Button}">
    <Setter Property="Background" Value
="Blue" />
</
Style>
<Window x:Class="Quiz2.MainWindow"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:local="clr-namespace:Quiz2"
       Title="MainWindow" Height="171" Width="303">
   
   
<Window.Resources>
        <Style x:Key="{x:Type local:MyButton}"
              TargetType="{x:Type local:MyButton}"
              BasedOn="{StaticResource {x:Type Button}}">

       
</Style>
    </Window.Resources>
   
   
<Grid>
        <local:MyButton Margin="85,43,89,51"
                       Content="Custom Button" />
    </Grid
>
</
Window>

image

3. Typed style, as regular style automatically based-on the theme style (the default one comes with the control, and located in the themes folder). You can explicitly set a different base style or cancel this option by setting the "OverridesDefaultStyle" property to "True" within the style.

<Style x:Key="{x:Type Button}" TargetType="{x:Type Button}">
    <Setter Property="OverridesDefaultStyle" Value="True" />
    <Setter Property="Background" Value
="Blue" />
</
Style>

The style above overrides the default style, hence not derived from it implicitly. This also ignores the default control template which is set with the default style.

 

WPF typed style is a very powerful mechanism. Use it wisely.

Add comment
facebook linkedin twitter email

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

one comment

  1. Adam RoperNovember 11, 2014 ב 14:51

    What a brilliant article! Saved me so much effort. Why do other sites try to make this so much more complicated than it needs to be?

    Reply