WPF动画-旋转按钮点击元素

Question

我想将两个元素从0旋转到角度:元件(ClampL) 45角和2。元件(夹子)-45角，但它们应该一起移动。元素是两个夹子，它们是打开的，当它们抓住东西时，它们会关闭，这个过程应该在按钮点击时发生。

这是我的XAML:

<UserControl x:Class="WPF_AnimatedLift.View.Prozess"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
xmlns:local="clr-namespace:WPF_AnimatedLift.View" xmlns:viewmodel="clr-namespace:WPF_AnimatedLift.ViewModel"
mc:Ignorable="d" 
d:DesignHeight="600" d:DesignWidth="1000">


<Canvas x:Name="canvas" Margin="0,0,-163,-83">

<Path x:Name="ClampR" Fill="#FF000000" StrokeThickness="2.12787" Data="M 524.2207 473.57227 L 524.2207 563.57227 L 137.14258 563.57227 L 137.14258 652.14258 L 571.42773 652.14258 L 571.42773 563.57227 L 571.36328 563.57227 L 571.36328 473.57227 L 524.2207 473.57227 z " Height="68.668" Stretch="Fill" Width="80.734" Canvas.Left="411.375" Canvas.Top="339.125" >
<Path.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="ClampR"
Storyboard.TargetProperty="LayoutTransform.(RotateTransform.Angle)"
From="0"
To="360"
Duration="0:0:5"
RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Path.Triggers>
<Path.LayoutTransform>
<TransformGroup>
<ScaleTransform ScaleY="0.265" ScaleX="0.265"/>
<SkewTransform/>
<RotateTransform CenterX="0.5" CenterY="0.5" Angle="-45"/>
<TranslateTransform/>
</TransformGroup>
</Path.LayoutTransform>
</Path>
<Path x:Name="ClampL" Fill="#FF000000" StrokeThickness="2.12787" Data="M 110 344.28516 L 110 434.28516 L 110 485.71484 L 110 522.85742 L 544.28516 522.85742 L 544.28516 434.28516 L 157.14258 434.28516 L 157.14258 344.28516 L 110 344.28516 z " Height="68.668" Stretch="Fill" Width="80.734" Canvas.Left="384.508" Canvas.Top="339.166">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleY="0.265" ScaleX="0.265"/>
<SkewTransform/>
<RotateTransform Angle="45"/>
<TranslateTransform/>
</TransformGroup>
</Path.RenderTransform>
</Path>

<Button Content="START" Canvas.Left="84" Canvas.Top="403" Width="106" Height="48" FontSize="30" FontWeight="Bold" Name="BtnStart" Command="{Binding ClickCommand, UpdateSourceTrigger=PropertyChanged}" >
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click"> //???
<BeginStoryboard Storyboard="{StaticResource Storyboard}" />
</EventTrigger>
</Button.Triggers>
</Button>
</Canvas>
<UserControl.DataContext>
<viewmodel:ProzessViewModel/>
</UserControl.DataContext>
</UserControl>

正如您在代码中看到的，我尝试了Path。触发器，双重动画，但它不起作用，有人能帮我吗?

谢谢。

Answer 1

基本上，在EventTrigger中，您只能引用存在于该FrameworkElement中的元素。解决方案将根据您想要设置EventTrigger的位置而有所不同。

1。按钮

您可以在按钮中使用EventTrigger，这是Button.Click事件的源，如下所示。为了简洁，元素被简化到最小，Storyboard.TargetProperty被修改以绕过TransformGroup。

<Canvas x:Name="canvas">
<Path x:Name="ClampR"
Canvas.Left="411" Canvas.Top="339"
Width="80" Height="68"
Fill="Black"
Data="M 0,0 1,0 0,1 z" Stretch="Fill">
<Path.LayoutTransform>
<TransformGroup>
<ScaleTransform ScaleY="0.265" ScaleX="0.265"/>
<SkewTransform/>
<RotateTransform CenterX="0.5" CenterY="0.5" Angle="-45"/>
<TranslateTransform/>
</TransformGroup>
</Path.LayoutTransform>
</Path>
<Button x:Name="BtnStart"
Canvas.Left="84" Canvas.Top="403"
Width="106" Height="48"
Content="START">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="ClampR"
Storyboard.TargetProperty="LayoutTransform.Children[2].Angle"
From="0" To="360"
Duration="0:0:5"
RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</Canvas>

2。帆布

由于Button.Click是RoutedEvent并传播到根，您可以在父级使用EventTrigger。在本例中，在Canvas.Triggers.

<Canvas x:Name="canvas">
<Canvas.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="ClampR"
Storyboard.TargetProperty="LayoutTransform.Children[2].Angle"
From="0" To="360"
Duration="0:0:5"
RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Canvas.Triggers>
<Path x:Name="ClampR"
Canvas.Left="411" Canvas.Top="339"
Width="80" Height="68"
Fill="Black"
Data="M 0,0 1,0 0,1 z" Stretch="Fill">
<Path.LayoutTransform>
<TransformGroup>
<ScaleTransform ScaleY="0.265" ScaleX="0.265"/>
<SkewTransform/>
<RotateTransform CenterX="0.5" CenterY="0.5" Angle="-45"/>
<TranslateTransform/>
</TransformGroup>
</Path.LayoutTransform>
</Path>
<Button x:Name="BtnStart"
Canvas.Left="84" Canvas.Top="403"
Width="106" Height="48"
Content="START"/>
</Canvas>

3。路径

与标准的EventTrigger不同，microsoft . xhtml . actions . wpf的EventTrigger更健壮，可以引用其他控件。因此，它可以在路径中工作。

Add xmlns:i="http://schemas.microsoft.com/xaml/behaviors" in header.
<Canvas x:Name="canvas">
<Path x:Name="ClampR"
Canvas.Left="411" Canvas.Top="339"
Width="80" Height="68"
Fill="Black"
Data="M 0,0 1,0 0,1 z" Stretch="Fill">
<i:Interaction.Triggers>
<i:EventTrigger SourceName="BtnStart" EventName="Click">
<i:ControlStoryboardAction>
<i:ControlStoryboardAction.Storyboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="Rotation"
Storyboard.TargetProperty="(RotateTransform.Angle)"
From="0" To="360"
Duration="0:0:5"
RepeatBehavior="Forever"/>
</Storyboard>
</i:ControlStoryboardAction.Storyboard>
</i:ControlStoryboardAction>
</i:EventTrigger>
</i:Interaction.Triggers>
<Path.LayoutTransform>
<TransformGroup>
<ScaleTransform ScaleY="0.265" ScaleX="0.265"/>
<SkewTransform/>
<RotateTransform x:Name="Rotation" CenterX="0.5" CenterY="0.5" Angle="-45"/>
<TranslateTransform/>
</TransformGroup>
</Path.LayoutTransform>
</Path>
<Button x:Name="BtnStart"
Canvas.Left="84" Canvas.Top="403"
Width="106" Height="48"
Content="START"/>
</Canvas>