重用故事板
我正在教自己如何使用Blend some MS lessons。我正在经历的一个项目是计算器，其中计算器键是使用下面的xaml定义的，每个都有自己的故事板来动画按键和释放键。
每个键的图像都是在Photoshop或类似的东西中创建的，最终结果是下面的漂亮计算器。
问题：
- 是否可以定义一次StoryBoard并将其重用于每个'key'？怎么样？
- 是否可以将每个键变成按钮？怎么样？
干杯，
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>
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>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？