如何无需后台代码实现WPF动画按钮二次点击反向复位?
PowerShell + WPF 实现按钮往返动画
我正在用PowerShell搭配WPF做开发,现有示例代码能生成点击后向右移动的动画按钮,现在要找最优方案,实现二次点击时按钮通过反向动画回到初始位置。
初始测试代码(ButtonTest.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 按钮被点击 }) $window.Show() $appContext=New-Object System.Windows.Forms.ApplicationContext [void][System.Windows.Forms.Application]::Run($appContext)
可行实现方案(WorkingButton.ps1)
严格来说这不算纯WPF的最优解,但我通过PowerShell后台代码实现了需求:用一个隐藏的第二个按钮,在动画结束时切换两者的可见性,同时给动画添加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 第一个按钮被点击 }) $Button2.Add_Click({ write-host 第二个按钮被点击 }) $ButtonAnimation1.Add_Completed({ write-host 动画完成 $Button1.Visibility="Hidden" $Button2.Visibility="Visible" }) $ButtonAnimation2.Add_Completed({ write-host 动画完成 $Button1.Visibility="Visible" $Button2.Visibility="Hidden" }) $window.Show() $appContext=New-Object System.Windows.Forms.ApplicationContext [void][System.Windows.Forms.Application]::Run($appContext)
内容的提问来源于stack exchange,提问作者PlayLORD-SysOp
相关产品推荐
相关产品推荐

