This is the first snip it of information that I’ve come across which hasn’t been widely published and its very useful when delving into mutiple styles.
So I was creating a keyboard user control in WPF. Nothing special, just a lot of buttons in a stack panel, with a toggle button for caps and shift. Thats where the styling gets interesting.
So I created a base style for all the buttons on the screen (Button and ToggleButton) which looked like this:
<Style x:Key="ButtonBaseStyle" TargetType="{x:Type ButtonBase}">
<Setter Property="Padding" Value="5" />
<Setter Property="MinWidth" Value="35" />
<Setter Property="MinHeight" Value="35" />
<Setter Property="Margin" Value="2" />
<Setter Property="Background" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ButtonBase}">
<Border Name="border" BorderThickness="2" BorderBrush="DarkGray" CornerRadius="3" Background="White">
<Grid>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Name="content"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
From this then created two styles which inherit from the base, for the Button:
<Style TargetType="Button" BasedOn="{StaticResource ButtonBaseStyle}"/>
Which is simple enough, and one for the the toggle button. With the toggle button though I wanted to change the border the be red when it was checked. Simple enough I though, so I wrote out this code:
<Style TargetType="ToggleButton" BasedOn="{StaticResource ButtonBaseStyle}">
<Style.Triggers>
<Trigger Property="IsChecked" Value="true">
<Setter Property="BorderBrush" Value="Red"/>
</Trigger>
</Style.Triggers>
</Style>
But this didn’t work, no matter how much I wanted it to there was a problem… Any guesses?
It was the fact that the base style for ButtonBase had changed the whole template, so effectively it didn’t understand the BorderBush setter property.
So I had a though and I said to my self, if you can bind a property of one element to a property of another, you should be able to do this between styles, right?
So I tried binding the BorderBush in the BaseButton template to a subsequent BorderBush and I tried this in the BaseButton:
<ControlTemplate TargetType="{x:Type ButtonBase}">
<Border Name="border" BorderThickness="2" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="3" Background="White">
<Grid>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Name="content"/>
</Grid>
</Border>
</ControlTemplate>
.. And this in the two buttons:
<Style TargetType="Button" BasedOn="{StaticResource ButtonBaseStyle}">
<Setter Property="BorderBrush" Value="DarkGray"/>
</Style>
<Style TargetType="ToggleButton" BasedOn="{StaticResource ButtonBaseStyle}">
<Setter Property="BorderBrush" Value="DarkGray"/>
<Style.Triggers>
<Trigger Property="IsChecked" Value="true">
<Setter Property="BorderBrush" Value="Red"/>
</Trigger>
</Style.Triggers>
</Style>
..And lo and behold it worked perfectly with only the border colours being set in inheriting styles without having to repeat the BaseButton control template.
Kudos WPF!
Hope this makes sense, if not leave a comment and I’ll try and elaborate!