重用故事板

时间:2013-04-22 20:12:11

标签: wpf silverlight storyboard expression-blend

我正在教自己如何使用Blend some MS lessons。我正在经历的一个项目是计算器,其中计算器键是使用下面的xaml定义的,每个都有自己的故事板来动画按键和释放键。

每个键的图像都是在Photoshop或类似的东西中创建的,最终结果是下面的漂亮计算器。

问题:

  1. 是否可以定义一次StoryBoard并将其重用于每个'key'?怎么样?
  2. 是否可以将每个键变成按钮?怎么样?
  3. 干杯,
    Berryl

    示例计算器密钥

                <Canvas x:Name="plus" Height="75" HorizontalAlignment="Right" Margin="0,362,485,0" VerticalAlignment="Top" Width="111" Clip="M60.612606,3.8724005 C57.263493,4.7858224 6.0270014,29.143972 5.1136127,30.361849 C4.2002244,31.579754 4.895596,32.797173 5.8089843,34.31953 C6.722373,35.841862 43.258041,68.419128 45.389259,69.94146 C47.520477,71.463791 47.520477,71.159058 50.260643,70.245667 C53.000813,69.332275 104.15021,40.713028 104.45465,39.495182 C104.75909,38.277306 104.75952,37.059433 103.54169,35.841587 C102.32386,34.623711 64.291183,3.7548122 62.439445,3.7270708 C60.571468,3.6990852 60.612606,3.8724005 60.612606,3.8724005 z">
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="MouseLeftButtonDown">
                        <im:ControlStoryboardAction Storyboard="{StaticResource PlusPress}"/>
                    </i:EventTrigger>
                    <i:EventTrigger EventName="MouseLeftButtonUp">
                        <im:ControlStoryboardAction Storyboard="{StaticResource PlusRelease}"/>
                    </i:EventTrigger>
                </i:Interaction.Triggers>
                <Image x:Name="image14" Height="75" Width="111" Source="images/plus.png" Stretch="Fill" RenderTransformOrigin="0.5,0.5">
                    <Image.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform/>
                            <SkewTransform/>
                            <RotateTransform/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </Image.RenderTransform>
                </Image>
            </Canvas>
    

    示例故事板

            <Storyboard x:Name="PlusPress">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image14" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
                <EasingDoubleKeyFrame KeyTime="00:00:00.2000000" Value="7">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <CircleEase EasingMode="EaseInOut"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Name="PlusRelease">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image14" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
                <EasingDoubleKeyFrame KeyTime="00:00:00.2000000" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    

    enter image description here

1 个答案:

答案 0 :(得分:2)

下一步是学习如何template a button。之后,您可以在“按下”和“正常”状态之间使用过渡效果。

编辑1

示例:

您必须根据使用情况调整这些样式(图像而不是文本等)。 在过去此代码段后的Blend中,右键单击一个按钮,编辑模板&gt;编辑当前...

或者在参考资料中:右键单击CalcButtonStyle 编辑您可以在此模式下更改默认属性(背景颜色,边距等)。您想要更改模板:在对象和时间轴面板上,右键单击“&lt;&gt;样式”编辑模板&gt;编辑当前... 您可以在状态面板中看到不同的状态(正常,按下等)。

           <StackPanel Orientation="Horizontal" VerticalAlignment="Top">
                <StackPanel.Resources>
                    <!-- The main calc button style -->
                    <Style TargetType="Button"  x:Key="CalcButtonStyle">
                        <Setter Property="FontFamily" Value="Arial Black" />
                        <Setter Property="Background" Value="Black" />
                            <Setter Property="BorderBrush">
                                <Setter.Value>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#FF838383" Offset="0"/>
                                        <GradientStop Color="#FF393939" Offset="0.375"/>
                                        <GradientStop Color="#FF293037" Offset="0.375"/>
                                        <GradientStop Color="Black" Offset="1"/>
                                    </LinearGradientBrush>
                                </Setter.Value>
                            </Setter>
                        <Setter Property="Foreground" Value="#FFFFFFFF"/>
                        <Setter Property="Padding" Value="3"/>
                        <Setter Property="BorderThickness" Value="1"/>
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="Button">
                                    <Grid>
                                        <VisualStateManager.VisualStateGroups>
                                            <VisualStateGroup x:Name="CommonStates">
                                                <VisualStateGroup.Transitions>
                                                    <VisualTransition GeneratedDuration="0:0:0.255"/>
                                                </VisualStateGroup.Transitions>
                                                <VisualState x:Name="Normal" />
                                                <VisualState x:Name="MouseOver"/>
                                                <VisualState x:Name="Pressed">
                                                    <Storyboard>
                                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="BackgroundPressed" d:IsOptimized="True"/>
                                                        <DoubleAnimation Duration="0" To="0.8" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="contentPresenter" d:IsOptimized="True"/>
                                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="contentPresenter" d:IsOptimized="True">
                                                            <DoubleAnimation.EasingFunction>
                                                                <BackEase EasingMode="EaseInOut"/>
                                                            </DoubleAnimation.EasingFunction>
                                                        </DoubleAnimation>
                                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="contentPresenter" d:IsOptimized="True">
                                                            <DoubleAnimation.EasingFunction>
                                                                <BackEase EasingMode="EaseInOut"/>
                                                            </DoubleAnimation.EasingFunction>
                                                        </DoubleAnimation>
                                                    </Storyboard>
                                                </VisualState>
                                                <VisualState x:Name="Disabled">
                                                <Storyboard>
                                                    <DoubleAnimation Duration="0" Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity" To=".55"/>
                                                </Storyboard>
                                            </VisualState>
                                        </VisualStateGroup>
                                        <VisualStateGroup x:Name="FocusStates">
                                            <VisualState x:Name="Focused"/>
                                            <VisualState x:Name="Unfocused" />
                                        </VisualStateGroup>
                                    </VisualStateManager.VisualStateGroups>
                                    <Border x:Name="Background" IsHitTestVisible="False" BorderThickness="1" CornerRadius="3" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}"/>
                                    <Border x:Name="BackgroundPressed" IsHitTestVisible="False" BorderThickness="1" CornerRadius="3" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" Opacity="0" RenderTransformOrigin="0.5,0.5" >
                                        <Border.RenderTransform>
                                            <CompositeTransform ScaleY="-1"/>
                                        </Border.RenderTransform>
                                    </Border>
                                    <ContentPresenter
                                          x:Name="contentPresenter"
                                          Content="{TemplateBinding Content}"
                                          ContentTemplate="{TemplateBinding ContentTemplate}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          Margin="{TemplateBinding Padding}" RenderTransformOrigin="0.5,0.5">
                                        <ContentPresenter.RenderTransform>
                                            <CompositeTransform/>
                                        </ContentPresenter.RenderTransform>
                                    </ContentPresenter>
                                    <Rectangle x:Name="DisabledVisualElement" RadiusX="3" RadiusY="3" Fill="#FFFFFFFF" Opacity="0" IsHitTestVisible="false" />
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
                <!-- Define CalcButtonStyle as default style for all buttons -->
                <Style TargetType="Button" BasedOn="{StaticResource CalcButtonStyle}" />
                <!-- Override style for Gray buttons -->
                <Style x:Key="CalcGrayButtonStyle" TargetType="Button" BasedOn="{StaticResource CalcButtonStyle}">
                    <Setter Property="Background" Value="Gray" />
                    <Setter Property="BorderBrush">
                        <Setter.Value>
                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                <GradientStop Color="#FF999999" Offset="0"/>
                                <GradientStop Color="#FF4B4B4B" Offset="0.375"/>
                                <GradientStop Color="#FF41464B" Offset="0.375"/>
                                <GradientStop Color="#FF373737" Offset="1"/>
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                </Style>
            </StackPanel.Resources>
            <Button Content="7" Width="22" Height="22"  Margin="2"/>
            <Button Content="8" Width="22" Height="22" Margin="2" />
            <Button Content="9" Width="22" Height="22" Margin="2" />
            <Button Content="-" Width="22" Height="22" Margin="2" Style="{StaticResource CalcGrayButtonStyle}" />
        </StackPanel>

编辑2

在您的情况下,模板可能如下所示:

警告:我删除了视觉状态“MouseOver,Disabled,Focused等”我只是处于压力状态。

<UserControl.Resources>
        <Style TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition GeneratedDuration="0:0:0.255"/>
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver"/>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="7" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="contentPresenter" d:IsOptimized="True">
                                                <DoubleAnimation.EasingFunction>
                                                    <BackEase EasingMode="EaseInOut"/>
                                                </DoubleAnimation.EasingFunction>
                                            </DoubleAnimation>
                                            <DoubleAnimation Duration="0" To="7" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="contentPresenter" d:IsOptimized="True">
                                                <DoubleAnimation.EasingFunction>
                                                    <BackEase EasingMode="EaseInOut"/>
                                                </DoubleAnimation.EasingFunction>
                                            </DoubleAnimation>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled"/>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Focused"/>
                                    <VisualState x:Name="Unfocused"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RenderTransformOrigin="0.5,0.5">
                                <ContentPresenter.RenderTransform>
                                    <CompositeTransform/>
                                </ContentPresenter.RenderTransform>
                            </ContentPresenter>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
        <Canvas x:Name="plus" Height="75" HorizontalAlignment="Right" Margin="0,362,485,0" VerticalAlignment="Top" Width="111" Clip="M60.612606,3.8724005 C57.263493,4.7858224 6.0270014,29.143972 5.1136127,30.361849 C4.2002244,31.579754 4.895596,32.797173 5.8089843,34.31953 C6.722373,35.841862 43.258041,68.419128 45.389259,69.94146 C47.520477,71.463791 47.520477,71.159058 50.260643,70.245667 C53.000813,69.332275 104.15021,40.713028 104.45465,39.495182 C104.75909,38.277306 104.75952,37.059433 103.54169,35.841587 C102.32386,34.623711 64.291183,3.7548122 62.439445,3.7270708 C60.571468,3.6990852 60.612606,3.8724005 60.612606,3.8724005 z">
            <Button>
                <Image x:Name="image14" Height="75" Width="111" Source="icon-twitter-footer.png" Stretch="Fill" RenderTransformOrigin="0.5,0.5">
                    <Image.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform/>
                            <SkewTransform/>
                            <RotateTransform/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </Image.RenderTransform>
                </Image>
            </Button>
        </Canvas>
    </Grid>