How to override a Resource within a Style ? - wpf

Question

How do I override a Resource within a Style. In the Example below (borrowed from another Stackoverflow-Answer) I define 2 Styles - textButtonDark and textButtonLight which is based on textButtonDark. I want to change the foreground color for textButtonDark to Red and for textButtonDark to blue without using a completely new Style for textButtonDark. How can I do this? The DynamicResource approach below does not work at all.
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Page.Resources>
<!--Control colors.-->
<Color x:Key="ControlNormalColor">Transparent</Color>
<Color x:Key="ControlMouseOverColor">#FFd2d2d2</Color>
<Color x:Key="DisabledControlColor">#FFF2F2F2</Color>
<Color x:Key="DisabledForegroundColor">#FFBFBFBF</Color>
<Color x:Key="ControlPressedColor">#FFd2d2d2</Color>
<!-- FocusVisual -->
<Style x:Key="ButtonFocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Border>
<Rectangle Margin="2" StrokeThickness="1" Stroke="#60000000" StrokeDashArray="1 2" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Button -->
<Style TargetType="Button" x:Key="textButtonDark">
<Style.Resources>
<Color x:Key="ControlMouseOverForegroundColor">Red</Color>
</Style.Resources>
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}" />
<Setter Property="Foreground" Value="#FF000000" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border TextBlock.Foreground="{TemplateBinding Foreground}" x:Name="Border" CornerRadius="5">
<Border.Background>
<SolidColorBrush Color="{DynamicResource ControlNormalColor}" />
</Border.Background>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.1" />
<VisualTransition GeneratedDuration="0" To="Pressed" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlMouseOverColor}" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="{DynamicResource ControlMouseOverForegroundColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"
Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlPressedColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"
Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource DisabledControlColor}" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource DisabledForegroundColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter Margin="8,2" HorizontalAlignment="Center" VerticalAlignment="Center" RecognizesAccessKey="True" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="Button" x:Key="textButtonLight" BasedOn=" {StaticResource textButtonDark}">
<Style.Resources>
<Color x:Key="ControlMouseOverForegroundColor">Blue</Color>
</Style.Resources>
<Setter Property="Foreground" Value="#404040" />
</Style>
</Page.Resources>
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<StackPanel Orientation="Horizontal">
<Button Style="{StaticResource textButtonDark}">DarkButton</Button>
<Button Style="{StaticResource textButtonLight}">LightButton</Button>
</StackPanel>
</Grid>
</Page>

Answer 1

You can set the foreground (or any other property, for that matter) on individual controls and it will override the values defined in a style.