How to edit a StoryBoard to put it in a Button Style ?

Question

Hello,

I've created a storyboard for a button in blend that I want it to apply everytime the button is pressed, So I tried to create a style,I've been stucked for a long time now.

here is the code of my Storyboard:

<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="button">
    <EasingDoubleKeyFrame KeyTime="0" Value="1">
        <EasingDoubleKeyFrame.EasingFunction>
            <CubicEase EasingMode="EaseOut"/>
        </EasingDoubleKeyFrame.EasingFunction>
    </EasingDoubleKeyFrame>
    <EasingDoubleKeyFrame KeyTime="0:0:0.25" Value="0.85">
        <EasingDoubleKeyFrame.EasingFunction>
            <QuinticEase EasingMode="EaseInOut"/>
        </EasingDoubleKeyFrame.EasingFunction>
    </EasingDoubleKeyFrame>
    <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1">
        <EasingDoubleKeyFrame.EasingFunction>
            <QuarticEase EasingMode="EaseIn"/>
        </EasingDoubleKeyFrame.EasingFunction>
    </EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="button">
    <EasingDoubleKeyFrame KeyTime="0" Value="1">
        <EasingDoubleKeyFrame.EasingFunction>
            <CubicEase EasingMode="EaseOut"/>
        </EasingDoubleKeyFrame.EasingFunction>
    </EasingDoubleKeyFrame>
    <EasingDoubleKeyFrame KeyTime="0:0:0.25" Value="0.85">
        <EasingDoubleKeyFrame.EasingFunction>
            <QuinticEase EasingMode="EaseInOut"/>
        </EasingDoubleKeyFrame.EasingFunction>
    </EasingDoubleKeyFrame>
    <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1">
        <EasingDoubleKeyFrame.EasingFunction>
            <QuarticEase EasingMode="EaseIn"/>
        </EasingDoubleKeyFrame.EasingFunction>
    </EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>

And Here is the code of my button style:

<Style x:Key="ParametersButton" TargetType="ButtonBase" >
<Setter Property="Background" Value="{StaticResource TransparentBrush}"/>
<Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="MinHeight" Value="72" />

<Setter Property="BorderThickness" Value="{StaticResource PhoneDefaultBorderThickness}"/>
<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}"/>
<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
<Setter Property="Padding" Value="0,15,15,0"/>
<Setter Property="Height" Value="72"/>
<Setter Property="Width" Value="72"/>
<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="ButtonBase">
            <Grid Background="Transparent"  >
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal"/>
                        <VisualState x:Name="MouseOver"/>
                        <VisualState x:Name="UnPressed"/>
                        <VisualState x:Name="Pressed">

                            <Storyboard>
                                <!--Here is where I want to insert my StoryBoard-->
                            </Storyboard>
                          </VisualState>
                        <VisualState x:Name="Disabled"/>                                
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="FocusStates">
                        <VisualState x:Name="Focused"/>
                        <VisualState x:Name="Unfocused"/>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0" CornerRadius="0" Background="#FF1BA1E2" Margin="{StaticResource PhoneTouchTargetOverhang}" RenderTransformOrigin="0.5,0.5">
                    <ContentControl x:Name="foregroundContainer" FontFamily="{TemplateBinding FontFamily}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" FontSize="{TemplateBinding FontSize}" Padding="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
                </Border>
            </Grid>
        </ControlTemplate>
    </Setter.Value>
</Setter>

How can I proceed ?

Thanks,

Renaud

Answer 1

It is easiest in Expression Blend, when editing your style, select the visual stater you want, open the storyboard panel and create your animation. This will trigger when you go to that state.

<VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Background" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">
                                                <EasingColorKeyFrame KeyTime="00:00:00" Value="White"/>
                                                <EasingColorKeyFrame KeyTime="00:00:01" Value="Red"/>
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                    <VisualState x:Name="Pressed" />
                                    <VisualState x:Name="Disabled" />
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>