ボタンへのパスアニメーション

Question

私はパスを持つボタンを持っています。私が望むのは、ボタン上をクリックすると、パスがリジッドサイドに移動します。スタイルとトリガーをボタンに追加しましたが、機能しません。私はControlTemplateにトリガーを追加しようとしましたが、それは私に許されません

ご意見がありましたら、感謝します。

これは私のコードです：お時間を

<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のマージンのアニメーションを使用します。あなたは他のいくつかの実験を試みることができます：D