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

Posted by pi-corellis on Stack Overflow See other posts from Stack Overflow or by pi-corellis
Published on 2010-06-16T14:03:44Z Indexed on 2010/06/16 14:12 UTC
Read the original article Hit count: 235

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

© Stack Overflow or respective owner

Related posts about c#

Related posts about visual-studio