WPF 动画按钮可以在没有代码隐藏的情况下在第二次单击时反转吗？

Question

我正在使用带 WPF 的 powershell。我有以下示例代码，它生成一个按钮，该按钮在单击时通过向右移动来进行动画处理，我正在尝试找出第二次单击它以反向动画回到原始位置的最佳方法。

按钮测试.ps1：

Add-Type -AssemblyName PresentationFramework, System.Drawing, System.Windows.Forms, WindowsFormsIntegration, presentationCore
[xml]$xaml='
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" WindowStartupLocation="CenterScreen" WindowStyle="None" Background="Transparent" AllowsTransparency="True" Width="500" Height="300">
    <Window.Resources>
        <ControlTemplate x:Key="NoMouseOverButtonTemplate" TargetType="Button">
            <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter Property="Background" Value="{x:Static SystemColors.ControlLightBrush}"/>
                    <Setter Property="Foreground" Value="{x:Static SystemColors.GrayTextBrush}"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Window.Resources>
    <Canvas>
        <Button Name="MovableButton" Canvas.Left="70" Canvas.Top="0" FontSize="12" FontFamily="Calibri" FontWeight="Light" BorderBrush="#111111" Foreground="#EEEEEE" Background="#111111" Height="18" Width="70" Template="{StaticResource NoMouseOverButtonTemplate}">ClickMe<Button.Triggers>
            <EventTrigger RoutedEvent="PreviewMouseUp">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Name="ButtonAnimation" From="70" To="207" Duration="0:0:0.25" Storyboard.TargetProperty="(Canvas.Left)" AutoReverse="False"/>
                    </Storyboard>
                </BeginStoryboard></EventTrigger>
            </Button.Triggers>
        </Button>
    </Canvas>
</Window>'
$reader=(New-Object System.Xml.XmlNodeReader $xaml)
$window=[Windows.Markup.XamlReader]::Load($reader)
$Button1=$Window.FindName("MovableButton")
$Button1.Add_Click({
    write-host ButtonClicked
})
$window.Show()
$appContext=New-Object System.Windows.Forms.ApplicationContext
[void][System.Windows.Forms.Application]::Run($appContext)

Answer 1

我最终使用了第二个按钮，并在每个动画完成事件时在隐藏/显示备用按钮之间切换。我必须设置 FillBehavior="Stop" 以便让动画在每次完成后重置。它给人的感觉是同一个按钮在点击时来回移动，而我需要的知识和代码要少得多。

（换句话说，我需要使用代码隐藏）

Add-Type -AssemblyName PresentationFramework, System.Drawing, System.Windows.Forms, WindowsFormsIntegration, presentationCore
[xml]$xaml='
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" WindowStartupLocation="CenterScreen" WindowStyle="None" Background="Transparent" AllowsTransparency="True" Width="500" Height="300">
    <Window.Resources>
        <ControlTemplate x:Key="NoMouseOverButtonTemplate" TargetType="Button">
            <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter Property="Background" Value="{x:Static SystemColors.ControlLightBrush}"/>
                    <Setter Property="Foreground" Value="{x:Static SystemColors.GrayTextBrush}"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Window.Resources>
    <Canvas>
        <Button Name="MovableButton1" Canvas.Left="70" Canvas.Top="0" FontSize="12" FontFamily="Calibri" FontWeight="Light" BorderBrush="#111111" Foreground="#EEEEEE" Background="#111111" Height="18" Width="70" Template="{StaticResource NoMouseOverButtonTemplate}">Button1<Button.Triggers>
            <EventTrigger RoutedEvent="PreviewMouseUp">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Name="ButtonAnimation1" From="70" To="207" Duration="0:0:0.25" Storyboard.TargetProperty="(Canvas.Left)" AutoReverse="False" FillBehavior="Stop"/>
                    </Storyboard>
                </BeginStoryboard></EventTrigger>
            </Button.Triggers>
        </Button>
        <Button Name="MovableButton2" Canvas.Left="207" Canvas.Top="0" Visibility="Hidden" FontSize="12" FontFamily="Calibri" FontWeight="Light" BorderBrush="#111111" Foreground="#EEEEEE" Background="#111111" Height="18" Width="70" Template="{StaticResource NoMouseOverButtonTemplate}">Button2<Button.Triggers>
            <EventTrigger RoutedEvent="PreviewMouseUp">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Name="ButtonAnimation2" From="207" To="70" Duration="0:0:0.25" Storyboard.TargetProperty="(Canvas.Left)" AutoReverse="False" FillBehavior="Stop"/>
                    </Storyboard>
                </BeginStoryboard></EventTrigger>
            </Button.Triggers>
        </Button>
    </Canvas>
</Window>'
$reader=(New-Object System.Xml.XmlNodeReader $xaml)
$window=[Windows.Markup.XamlReader]::Load($reader)
$Button1=$Window.FindName("MovableButton1")
$Button2=$Window.FindName("MovableButton2")
$ButtonAnimation1=$Window.FindName("ButtonAnimation1")
$ButtonAnimation2=$Window.FindName("ButtonAnimation2")
$Button1.Add_Click({
    write-host FirstButtonClicked
})
$Button2.Add_Click({
    write-host SecondButtonClicked
})
$ButtonAnimation1.Add_Completed({
    write-host AnimationCompleted
    $Button1.Visibility="Hidden"
    $Button2.Visibility="Visible"
})
$ButtonAnimation2.Add_Completed({
    write-host AnimationCompleted
    $Button1.Visibility="Visible"
    $Button2.Visibility="Hidden"
})
$window.Show()
$appContext=New-Object System.Windows.Forms.ApplicationContext
[void][System.Windows.Forms.Application]::Run($appContext)