通过前面的学习,我们会发现,只要是在XAML代码中定义和执行动画,都需要用到Trigger中的事件触发器去启动一个动画。除了控件(FrameworkElement基类)拥有Triggers属性,Style样式也拥有Triggers属性,这也就意味着,我们可以在定义某个控件的Style样式时,再定义一些动画交互。
下面,我们为Rectangle矩形控件定义一个样式,在样式中再利用事件触发器去定义和执行一些动画。
<Window.Resources>
<Style x:Key="RectangleStyle" TargetType="Rectangle">
<Setter Property="Width" Value="50"/>
<Setter Property="Height" Value="50"/>
<Setter Property="Margin" Value="10,5"/>
<Setter Property="StrokeThickness" Value="1"/>
<Setter Property="Stroke" Value="DarkCyan"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Style.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.5"
To="450"
Storyboard.TargetProperty="Width"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.5"
To="350"
Storyboard.TargetProperty="Width"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.5"
To="50"
Storyboard.TargetProperty="Width"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
我们在Style样式的Triggers属性中定义了3个事件触发器,而每个事件触发器都拥有各自在的故事板,在故事板中定义了一个DoubleAnimation 动画,并将动画的输出值作用到Rectangle矩形的宽度。
于是,我们就可以在前端XAML中去实例化一些矩形并引用该样式。
<StackPanel>
<Rectangle Fill="LightCoral" Style="{StaticResource RectangleStyle}"/>
<Rectangle Fill="LightGreen" Style="{StaticResource RectangleStyle}"/>
<Rectangle Fill="LightGoldenrodYellow" Style="{StaticResource RectangleStyle}"/>
<Rectangle Fill="LightGray" Style="{StaticResource RectangleStyle}"/>
<Rectangle Fill="LightPink" Style="{StaticResource RectangleStyle}"/>
</StackPanel>
矩形的默认长度为50像素,当启动之后,会执行Loaded事件触发器,以动画的方式将矩形的宽度改为450。
一旦鼠标移到某个矩形上,将执行MouseEnter事件触发器动画,将矩形的宽度以动画的方式改为350像素。当鼠标离开这个矩形时,将执行MouseLeave事件触发器动画,将矩形的宽度改为50像素。
当前课程源码下载:(注明:本站所有源代码请按标题搜索)
文件名:105-《在Style样式中使用动画》-源代码
链接:https://pan.baidu.com/s/1yu-q4tUtl0poLVgmcMfgBA
提取码:wpff
——重庆教主 2023年11月17日