路徑動畫成一個按鈕

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