路径动画成一个按钮

Question

我有一个按钮与路径，我想的是，当我做一个点击过的路径移动到分辩侧的按钮;我已将样式和触发器添加到按钮，但它不起作用。我试图添加触发器的控件模板，但它不会让我

如果您有任何建议，我将不胜感激。

这是我的代码：

<Button x:Name="btnEnviarCorreo" Height="50" Width="100" Padding="5" Content="Enviar Correo" Margin="2,2" > 
<Button.Style> 
<Style TargetType="Button"> 
<Setter Property="Background" Value="SteelBlue"/> 
<Setter Property="Foreground" Value="White" /> 
<Setter Property="FontSize" Value="15" /> 
<Setter Property="FontFamily" Value="./#Segoe UI" /> 
<Setter Property="SnapsToDevicePixels" Value="True" /> 
<Setter Property="FontWeight" Value="Bold"/> 
<Setter Property="Template"> 
<Setter.Value> 
<ControlTemplate TargetType="{x:Type Button}"> 
<Border CornerRadius="4" Background="{TemplateBinding Background}"> 
<Grid> 
<Path x:Name="PathIcon" Width="15" Height="25" Stretch="Fill" Fill="#E59400" HorizontalAlignment="Left" Margin="17,0,0,0" Data="F1M30.0833,22.1667L50.6665,37.6043 50.6665,38.7918 30.0833,53.8333 30.0833,22.1667z"/>               <ContentPresenter x:Name="MyContentPresenter" Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,0,0" /> 
</Grid>         
</Border> 
<ControlTemplate.Triggers> 
<Trigger Property="IsMouseOver" Value="True"> 
<Setter Property="Background" Value="#E59400" /> 
<Setter Property="Foreground" Value="White" /> 
<Setter TargetName="PathIcon" Property="Fill" Value="Black" /> 
</Trigger> 
<Trigger Property="IsPressed" Value="True"> 
<Setter Property="Background" Value="OrangeRed" /> 
<Setter Property="Foreground" Value="White" /> 
</Trigger>         
</ControlTemplate.Triggers>        
</ControlTemplate> 
</Setter.Value> 
</Setter> 
<Style.Triggers> 
<EventTrigger RoutedEvent="Click"> 
<EventTrigger.Actions> 
<BeginStoryboard> 
<Storyboard> 
<DoubleAnimation Storyboard.TargetName="PathIcon" Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)" From="0" To="200" /> 
</Storyboard> 
</BeginStoryboard> 
</EventTrigger.Actions> 
</EventTrigger> 
</Style.Triggers> 
</Style>     
</Button.Style> 
</Button> 

感谢您的时间。

Answer 1

某处添加以下代码里面ControlTemplate.Triggers块：

<EventTrigger RoutedEvent="MouseEnter"> 
            <BeginStoryboard> 
             <Storyboard> 
              <ThicknessAnimation From="17,0,0,0" To="100, 0, 0, 0" Duration="0:0:1" Storyboard.TargetProperty="Margin" 
                   Storyboard.TargetName="PathIcon"/> 
             </Storyboard> 
            </BeginStoryboard> 
           </EventTrigger> 

它并不完美，你应该制定出设置一些自己的细节。我在EventTrigger内使用Margin的动画。你可以尝试做一些其他的实验：d