WPF 控件模板中的属性触发动画

先看效果

代码

 1 <Window
 2     x:Class="WpfApp2.MainWindow"
 3     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 4     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 5     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 6     xmlns:local="clr-namespace:WpfApp2"
 7     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 8     Title="MainWindow"
 9     Width="800"
10     Height="450"
11     mc:Ignorable="d">
12     <Window.Resources>
13         <Style x:Key="Test" TargetType="GroupBox">
14             <Setter Property="Template">
15                 <Setter.Value>
16                     <ControlTemplate TargetType="GroupBox">
17                         <DockPanel>
18                             <StackPanel DockPanel.Dock="Top" Orientation="Horizontal">
19                                 <ToggleButton x:Name="ExpanderToggleButton" Width="50">
20 
21                                     <!--  哪个控件触发动画就在哪个控件下写触发事件  -->
22                                     <ToggleButton.Triggers>
23                                         <EventTrigger RoutedEvent="ToggleButton.Checked" SourceName="ExpanderToggleButton">
24                                             <BeginStoryboard>
25                                                 <Storyboard Storyboard.TargetName="Rotate" Storyboard.TargetProperty="Angle">
26                                                     <!--  可以从任意位置开始动画  -->
27                                                     <DoubleAnimation
28                                                         From="{Binding ElementName=Rotate, Path=Angle}"
29                                                         To="90"
30                                                         Duration="00:00:02" />
31                                                 </Storyboard>
32                                             </BeginStoryboard>
33                                         </EventTrigger>
34                                         <EventTrigger RoutedEvent="ToggleButton.Unchecked" SourceName="ExpanderToggleButton">
35                                             <BeginStoryboard>
36                                                 <Storyboard Storyboard.TargetName="Rotate" Storyboard.TargetProperty="Angle">
37                                                     <DoubleAnimation
38                                                         From="{Binding ElementName=Rotate, Path=Angle}"
39                                                         To="0"
40                                                         Duration="00:00:02" />
41                                                 </Storyboard>
42                                             </BeginStoryboard>
43                                         </EventTrigger>
44                                     </ToggleButton.Triggers>
45                                 </ToggleButton>
46                                 <ContentControl Content="{TemplateBinding Header}" />
47                             </StackPanel>
48 
49                             <ContentPresenter Content="{TemplateBinding Content}">
50                                 <ContentPresenter.RenderTransform>
51                                     <!--  要触发哪个属性，就给哪个属性命名  -->
52                                     <RotateTransform x:Name="Rotate" />
53                                 </ContentPresenter.RenderTransform>
54                             </ContentPresenter>
55                         </DockPanel>
56                     </ControlTemplate>
57                 </Setter.Value>
58             </Setter>
59         </Style>
60     </Window.Resources>
61 
62     <Grid>
63         <GroupBox
64             Width="200"
65             Height="300"
66             Header="AAA"
67             Style="{StaticResource Test}">
68             <StackPanel Orientation="Vertical">
69                 <Button Content="123" />
70                 <Button Content="123" />
71                 <Button Content="123" />
72                 <Button Content="123" />
73             </StackPanel>
74         </GroupBox>
75     </Grid>
76 </Window>

 

posted @ 2022-03-25 17:47  只吃肉不喝酒  阅读(253)  评论(0)  编辑  收藏  举报