How can I perform BorderBrush animation in a button style with a custom ControlTemplate?

Question

I have a button style defined like this:

<LinearGradientBrush x:Key="Brush_NavButtonBorder0" StartPoint="0,0" EndPoint="0,1" >
    <GradientStop Color="#00383f47" Offset="0" />
    <GradientStop Color="#FF383f47" Offset="1" />
</LinearGradientBrush>

<LinearGradientBrush x:Key="Brush_NavButtonBorder4" StartPoint="0,0" EndPoint="0,1" >
    <GradientStop Color="#FF414f5a" Offset="0" />
    <GradientStop Color="#11414f5a" Offset="1" />
</LinearGradientBrush>

<LinearGradientBrush x:Key="Brush_NavButtonBackground" StartPoint="0,0" EndPoint="0,1" >
    <GradientStop Color="#FF3f505a" Offset="0" />
    <GradientStop Color="#FF37454e" Offset="0.75" />
    <GradientStop Color="#FF2f3c44" Offset="1" />
</LinearGradientBrush>

<LinearGradientBrush x:Key="Brush_NavButtonPressedBackground" StartPoint="0,0" EndPoint="0,1" >
    <GradientStop Color="#FF3f505a" Offset="1" />
    <GradientStop Color="#FF37454e" Offset="0.25" />
    <GradientStop Color="#FF2f3c44" Offset="0" />
</LinearGradientBrush>

<Style x:Key="NavigationButton" TargetType="Button">
    <Setter Property="FocusVisualStyle" Value="{x:Null}" />
    <Setter Property="Foreground" Value="Gainsboro" />
    <Setter Property="FontSize" Value="14" />
    <Setter Property="Background" Value="{StaticResource Brush_NavButtonBackground}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}" x:Name="MainControlTemplate">
                <Grid>
                    <Border x:Name="outerBorder" CornerRadius="5" BorderThickness="1" BorderBrush="{StaticResource Brush_NavButtonBorder0}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True" />
                    <Border Margin="1" CornerRadius="4" BorderThickness="1" BorderBrush="{StaticResource Brush_NavButtonBorder4}" Background="Transparent" SnapsToDevicePixels="True">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Name="content"/>
                    </Border>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <!--<Setter TargetName="outerBorder" Property="BorderBrush" Value="Gray" />-->
                        <Trigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="outerBorder"
                                                    Storyboard.TargetProperty="(Border.BorderBrush).(GradientBrush.GradientStops)[0].(GradientStop.Color)"
                                                    To="Gray"
                                                    Duration="0:0:0.2" />
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter Property="Background" Value="{StaticResource Brush_NavButtonPressedBackground}" />
                        <Setter TargetName="content" Property="RenderTransform" >
                            <Setter.Value>
                                <TranslateTransform X="2.0" Y="2.0" />
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Opacity" Value="0.5" />
                    </Trigger>
                    <Trigger Property="IsKeyboardFocused" Value="True">
                        <Setter Property="FocusVisualStyle" Value="{StaticResource MyFocusVisualStyle}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

This style has a couple of problems: 1. When I MouseOver a button, all other buttons using this style react with the animation instead of just the button I'm over. 2. I would like to animate the color of the entire border instead of just the 0th gradient stop, but I can't seem to find a way to do this.

The commented line above the ColorAnimation section does almost exactly what I want except that it displays the gray BorderBrush immediately on MouseOver - I want it to display the gray BorderBrush with animation.

This seems like it should be pretty simple, but I can't figure out how to do this. Does anyone know how to do this the right way?

Answer 1

The reason it is changing the border on all the buttons is that you're actually changing the color in the gradient brush. And since the same gradient brush is shared among all the button instances with that style, the border for all the brushes changes.

There are a number of ways to resolve this, but one of which is to make the brush in question a resource of the style itself, so it won't be shared in the same way. The following code snippet demonstrates all you would need to change (remove Brush_NavButtonBorder0 from the top-level resources, and add it to the resources of the button style) :

EDIT: Including the full style with the updates

<Color x:Key="BorderColor">#00383f47</Color>

<!-- Other Brushes (NOT Brush_NavButtonBorder0) -->

<Style x:Key="NavigationButton" TargetType="Button">
  <Setter Property="FocusVisualStyle" Value="{x:Null}" />
  <Setter Property="Foreground" Value="Gainsboro" />
  <Setter Property="FontSize" Value="14" />
  <Setter Property="Background" Value="{StaticResource Brush_NavButtonBackground}" />
  <Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type Button}" x:Name="MainControlTemplate">
            <ControlTemplate.Resources>
                <LinearGradientBrush x:Key="Brush_NavButtonBorder0" StartPoint="0,0" EndPoint="0,1" >
                            <GradientStop Color="{StaticResource BorderColor}" Offset="0" />
                    <GradientStop Color="#FF383f47" Offset="1" />
                </LinearGradientBrush>
            </ControlTemplate.Resources>
            <Grid>

                <Border x:Name="outerBorder" CornerRadius="5" BorderThickness="1" BorderBrush="{StaticResource Brush_NavButtonBorder0}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True" />


                <Border Margin="1" CornerRadius="4" BorderThickness="1" BorderBrush="{StaticResource Brush_NavButtonBorder4}" Background="Transparent" SnapsToDevicePixels="True">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Name="content"/>
                </Border>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <!--<Setter TargetName="outerBorder" Property="BorderBrush" Value="Gray" />-->
                    <Trigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation Storyboard.TargetName="outerBorder"
                                        Storyboard.TargetProperty="(Border.BorderBrush).(GradientBrush.GradientStops)[0].(GradientStop.Color)"
                                        To="Gray"
                                        Duration="0:0:0.2" />
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.EnterActions>
                    <Trigger.ExitActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation Storyboard.TargetName="outerBorder"
                                        Storyboard.TargetProperty="(Border.BorderBrush).(GradientBrush.GradientStops)[0].(GradientStop.Color)"
                                        To="{StaticResource BorderColor}"
                                        Duration="0:0:0.2" />
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.ExitActions>
                </Trigger>
                <Trigger Property="IsPressed" Value="True">
                    <Setter Property="Background" Value="{StaticResource Brush_NavButtonPressedBackground}" />
                    <Setter TargetName="content" Property="RenderTransform" >
                        <Setter.Value>
                            <TranslateTransform X="2.0" Y="2.0" />
                        </Setter.Value>
                    </Setter>
                </Trigger>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter Property="Opacity" Value="0.5" />
                </Trigger>
                <!--<Trigger Property="IsKeyboardFocused" Value="True">
                    <Setter Property="FocusVisualStyle" Value="{StaticResource MyFocusVisualStyle}" />
                </Trigger>-->
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Setter.Value>
</Setter>

This will mean that each button instance gets its own copy of the LinearGradientBrush, and your mouseover trigger animation is only affecting the one for the button that the mouse is over.

Again, there are a number of different ways to resolve this issue, but the code snippet above is the simplest I can think of given your current code.