如何为100个按钮使用相同的故事板？ [英] How to use the same storyboard for 100 buttons?

问题描述

嗨论坛！

我正在面对另一个问题，我正在开发我的界面。

I´m facing another problem developing my interface.

想象一下我内心的100个按钮stackpannel。我想放大鼠标悬停的按钮。因为我和很多按钮很紧急，所以不可能为每个按钮创建一个故事板！所以我想做的是使用
blend创建一个故事板并使用代码将其应用到所有100个按钮！

Imagine that I´ve 100 buttons inside a stackpannel. I want to zoom in the button that has the mouse over. As I´ve a lot of buttons it´s impossible to create a storyboard for each one! So what i want to do is create one storyboard using blend and apply it using code to all 100 buttons!

我将举例说明我的疑问_

I will give you an example to explain better my doubt_

想象一下我为button1创建的故事板：

Imagine this storyboard that I created for button1:

<Storyboard x:Key="Storyboard1">
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="btn1">
				<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
				<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1.5"/>
			</DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="btn1">
				<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
				<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1.5"/>
			</DoubleAnimationUsingKeyFrames>
		</Storyboard>

基本上它会在0.3秒内将比例x和y从1增加到1.5。正如我们从xaml中看到的那样，故事板的目标设置为btn1。现在，想象一下我想将这个故事板应用到其他99个按钮！我怎样才能做到这一点？

Basically it increases the scale x and y from 1 to 1.5 in 0.3 seconds. As we can see from the xaml the target of the storyboard is set to btn1. Now ,imagine that I want to apply this storyboard to the other 99 buttons! How can I do this?

你能帮助我吗？

提前感谢！

推荐答案

将故事板，触发器等放在样式中。现在在StackPanel上，将每个按钮设置为使用该样式：

Place the storyboard, triggers, etc inside a style. Now on the StackPanel, set every button to use that style like so:

<StackPanel>
  <StackPanel.Resources>
   <Style TargetType="{x:Type Button}" BasedOn="{StaticResource ZoomBtnStyle}">
   </Style>
  </StackPanel.Resources>
  <Button Content="Button1"/>
  <Button Content="Button2"/>
  <Button Content="Button3"/>
</StackPanel>

这篇关于如何为100个按钮使用相同的故事板？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！