Swapping brushes in VisualStateManager

Question

I'm trying to create a custom style for a brush with a glass-type look. I have it looking the way I want it, but I can't get the Pressed behavior to work.

The pressed look is simply the normal look with one of the brushes reversed. I have set both brushes as resources and tried ObjectAnimationUsingKeyFrames, but it doesn't seem to take. The idea is something along the lines of this:

<VisualState x:Name="Pressed">
    <Storyboard>
        <!-- swap the brush from {StaticResource ButtonGlassBrushNormal} to 
             {StaticResource ButtonGlassBrushPressed -->
    </Storyboard>
</VisualState>

Here are my resources and style:

<LinearGradientBrush x:Key="ButtonGlassBrushNormal" EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#00000000" Offset="0.31"/>
    <GradientStop Color="White"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ButtonGlassBrushPressed" EndPoint="0.5,0" StartPoint="0.5,1">
    <GradientStop Color="White"/>
    <GradientStop Color="#00000000" Offset="0.31"/>
</LinearGradientBrush>
<ControlTemplate x:Key="ButtonControlTemplate1" TargetType="{x:Type Button}">
    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal" />
                <VisualState x:Name="Pressed">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames
                            Storyboard.TargetName="_glassBorder"
                            Storyboard.TargetProperty="Background"
                            Duration="0:0:1"
                            RepeatBehavior="Forever">
                            <ObjectAnimationUsingKeyFrames.KeyFrames>
                                <DiscreteObjectKeyFrame KeyTime="0:0:1" Value="{StaticResource ButtonGlassBrushPressed}" />
                            </ObjectAnimationUsingKeyFrames.KeyFrames>  
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Border BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Left" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" VerticalAlignment="Top" Margin="0,0,0,-21.167" CornerRadius="5">
            <Border.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="Black" Offset="0"/>
                    <GradientStop Color="#FF803A3A" Offset="1"/>
                </LinearGradientBrush>
            </Border.Background>
            <Border BorderThickness="1" CornerRadius="5" x:Name="_glassBorder" Background="{StaticResource ButtonGlassBrushNormal}">
                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Border>
        </Border>
    </Grid>
</ControlTemplate>

I'm guessing this will be head-slappingly simple, but what am I doing wrong here?

Answer 1

Do not set a Duration on the Storyboard, and perhaps a zero KeyTime. Moreover, you'll also have to declare the MouseOver state, otherwise the Pressed state will persist until the mouse leaves the Button:

<VisualStateGroup x:Name="CommonStates">
    <VisualState x:Name="Normal"/>
    <VisualState x:Name="MouseOver"/>
    <VisualState x:Name="Disabled"/>
    <VisualState x:Name="Pressed">
        <Storyboard>
            <ObjectAnimationUsingKeyFrames
                Storyboard.TargetName="_glassBorder"
                Storyboard.TargetProperty="Background">
                <ObjectAnimationUsingKeyFrames.KeyFrames>
                    <DiscreteObjectKeyFrame KeyTime="0:0:0"
                        Value="{StaticResource ButtonGlassBrushPressed}"/>
                </ObjectAnimationUsingKeyFrames.KeyFrames>
            </ObjectAnimationUsingKeyFrames>
        </Storyboard>
    </VisualState>
</VisualStateGroup>