重用故事板

Question

我教我如何使用混合some MS lessons。一个项目，我穿通是一个计算器，在计算器按键使用下面的XAML中，每个都有它自己的故事板制作动画的关键按下和释放定义。

每个键的图像在Photoshop或类似的东西被创造，而最终的结果是低于好看的计算器。

问题：

1. 是可以一次定义故事板（S）和重用，对每个“钥匙”？怎么样？
2. ，才有可能把每个键成键？怎么样？

干杯，
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> 

Answer 1

对NEX t步骤是学习如何template a button。之后，您可以在“按下”和“正常”状态之间使用转换效果。

编辑1

例子：

你必须适应这些样式与您使用（图像而不是文字等）。 在过去的这个片段混合后，用鼠标右键单击一个按钮，编辑模板>编辑当前...

还是在资源潘内尔：右键点击CalcButtonStyle 编辑可以更改默认属性（背景色，边缘等等）在这种模式下。伊尔你想更改模板：在对象和时间线潘内尔，右键单击“<>样式” 编辑模板>编辑当前... 您可以在美国看到潘内尔在不同状态（正常，按下等）。

​​

编辑2

在你的情况，模板可能是这样的：

警告：我删除可视状态 “鼠标悬停，残疾人，重点突出等。”我只是保持按下状态。

<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>