Inheriting from Default Styles in WPF

I’ve started doing some work with the Windows Presentation Foundation (WPF) and I found myself wanting to inherit from a default style (or a style with only a ‘TargetType’ and no ‘x:Key’). It’s actually really basic to do and below is a screenshot of the application created and the example XAML code to do it.

Default Style Example

Default Style Example

<Window x:Class="SimpleInvoicingApplication.DefaultStyleExample"
    Title="DefaultStyleExample" Height="300" Width="300">
            <Style TargetType="{x:Type Button}">
                <Setter Property="Width" Value="150" />
                <Setter Property="Height" Value="23" />
            <Style x:Key="TestStyle" BasedOn="{StaticResource {x:Type Button}}" TargetType="{x:Type Button}">
                <Setter Property="Height" Value="30" />
                <Setter Property="FontSize" Value="13" />
        <Button Canvas.Left="60" Canvas.Top="80" Name="ExampleButton_1">Example Button 1</Button>
        <Button Canvas.Left="60" Canvas.Top="120" Name="ExampleButton_2" Style="{StaticResource TestStyle}">Example Button 2</Button>

Put simply, you define your default style (that has only the ‘TargetType’ attribute and no ‘x:Key’ attribute) and then you define your child/derived/inherited (whatever you want to call it) style. Then to inherit you use the ‘BasedOn’ attribute as you would use any other time but for the value you specify a StaticResource and then declare ‘{x:Type putTypeHere}’ for it. This will then pull the default style you have declared. You also have to declare a ‘TargetType’ style, I’ll explain the consequences a little later if you don’t do this.

My Designer Is All Screwy!!!!

So your designer has gone all screwy and is complaining that it has a problem loading and is asking you to reload the designer. Well the first thing I advise you to check is to make sure you have declared a ‘TargetType’ because failing to declare this will cause the XAML WYSIWYG designer to not load your page.

Another problem I encountered was that the XAML WYSIWYG designer doesn’t always refresh correctly after modifying the default style. I’ve found that if I modify the default style the styles inheriting from that style won’t cause the controls to render with the new changes. For instance, using the above XAML example, if you specify the ‘width’ property of the default button style to be ‘100’, the Button using the ‘TestStyle’ style won’t change it’s width to 100. This doesn’t actually represent anything though as if you close the designer window and re-open it, the changes will now be reflected. Obviously this is just a minor problem with Visual Studio 2008.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s