A little help, please … I have this ResourceDictionary to style buttons. There is a “Base button style” and now I am working on a button which will have a drop down content menu where the user can make a selection. As you will notice in the code below, I had to copy and paste the visual states from the base button style to the dropdown button style if I wanted both button to look the same when focused, mouse over, etc. But what if I have to make a change in the future? Then I will have to remember to apply the change in both styles – perhaps there might be more than 2 styles if this library keeps growing.
t<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Base button style -->
<Style x:Key="winFormButton" TargetType="Button">
<!-- Set Default Background and Border -->
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}"/>
<Setter Property="BorderBrush" Value="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Padding" Value="4,2"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Width" Value="73"/>
<Setter Property="Height" Value="21"/>
<!-- Control Template -->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter x:Name="contentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<!-- Visual States -->
<ControlTemplate.Triggers>
<!-- Mouse Over -->
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="BorderThickness" Value="1"/>
<Setter TargetName="border" Property="Background" Value="{DynamicResource {x:Static SystemColors.InactiveBorderBrushKey}}"/>
<Setter TargetName="border" Property="BorderBrush" Value="{DynamicResource {x:Static SystemColors.HotTrackBrushKey}}"/>
</Trigger>
<!-- Pressed -->
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="border" Property="Background" Value="{DynamicResource {x:Static SystemColors.GradientInactiveCaptionBrushKey}}"/>
<Setter TargetName="border" Property="BorderBrush" Value="{DynamicResource {x:Static SystemColors.HotTrackBrushKey}}"/>
</Trigger>
<!-- Disabled -->
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="border" Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}"/>
<Setter TargetName="border" Property="BorderBrush" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
<Setter TargetName="contentPresenter" Property="Effect">
<Setter.Value>
<DropShadowEffect Color="{DynamicResource {x:Static SystemColors.HighlightTextColorKey}}" Direction="660" ShadowDepth="1.2" BlurRadius="0" Opacity="1"/>
</Setter.Value>
</Setter>
</Trigger>
<!-- Focused -->
<Trigger Property="IsKeyboardFocused" Value="True">
<Setter TargetName="border" Property="BorderThickness" Value="2"/>
<Setter TargetName="border" Property="BorderBrush" Value="{DynamicResource {x:Static SystemColors.HotTrackBrushKey}}"/>
</Trigger>
<!-- Focused and Mouse Over -->
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsKeyboardFocused" Value="True"/>
<Condition Property="IsMouseOver" Value="True"/>
</MultiTrigger.Conditions>
<Setter TargetName="border" Property="BorderThickness" Value="1"/>
<Setter TargetName="border" Property="BorderBrush" Value="{DynamicResource {x:Static SystemColors.HotTrackBrushKey}}"/>
</MultiTrigger>
<!-- Default and Not Focused -->
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsDefaulted" Value="True"/>
<Condition Property="IsFocused" Value="False"/>
</MultiTrigger.Conditions>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="BorderBrush" Value="{DynamicResource {x:Static SystemColors.HotTrackBrushKey}}"/>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Dropdown button style -->
<Style x:Key="dropdownWinFormButton" TargetType="Button" BasedOn="{StaticResource winFormButton}">
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Border x:Name="border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
<ContentPresenter x:Name="contentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="6,-2,0,0"/>
<Path HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,5,0" Data="M 2 2 L 6 6 L 10 2" Stroke="{TemplateBinding Foreground}" StrokeThickness="1" Fill="Transparent"/>
</Grid>
</Border>
</Grid>
<!-- Visual States -->
<ControlTemplate.Triggers>
<!-- Mouse Over -->
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="BorderThickness" Value="1"/>
<Setter TargetName="border" Property="Background" Value="{DynamicResource {x:Static SystemColors.InactiveBorderBrushKey}}"/>
<Setter TargetName="border" Property="BorderBrush" Value="{DynamicResource {x:Static SystemColors.HotTrackBrushKey}}"/>
</Trigger>
<!-- Pressed -->
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="border" Property="Background" Value="{DynamicResource {x:Static SystemColors.GradientInactiveCaptionBrushKey}}"/>
<Setter TargetName="border" Property="BorderBrush" Value="{DynamicResource {x:Static SystemColors.HotTrackBrushKey}}"/>
</Trigger>
<!-- Disabled -->
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="border" Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}"/>
<Setter TargetName="border" Property="BorderBrush" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
<Setter TargetName="contentPresenter" Property="Effect">
<Setter.Value>
<DropShadowEffect Color="{DynamicResource {x:Static SystemColors.HighlightTextColorKey}}" Direction="660" ShadowDepth="1.2" BlurRadius="0" Opacity="1"/>
</Setter.Value>
</Setter>
</Trigger>
<!-- Focused -->
<Trigger Property="IsKeyboardFocused" Value="True">
<Setter TargetName="border" Property="BorderThickness" Value="2"/>
<Setter TargetName="border" Property="BorderBrush" Value="{DynamicResource {x:Static SystemColors.HotTrackBrushKey}}"/>
</Trigger>
<!-- Focused and Mouse Over -->
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsKeyboardFocused" Value="True"/>
<Condition Property="IsMouseOver" Value="True"/>
</MultiTrigger.Conditions>
<Setter TargetName="border" Property="BorderThickness" Value="1"/>
<Setter TargetName="border" Property="BorderBrush" Value="{DynamicResource {x:Static SystemColors.HotTrackBrushKey}}"/>
</MultiTrigger>
<!-- Default and Not Focused -->
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsDefaulted" Value="True"/>
<Condition Property="IsFocused" Value="False"/>
</MultiTrigger.Conditions>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="BorderBrush" Value="{DynamicResource {x:Static SystemColors.HotTrackBrushKey}}"/>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
Is there a way to apply the Visual States (i.e. the ControlTemplate.Triggers) to both styles without having to copy the entire code so that when a change/a correction is needed this will be done in a single place?