wpf - 使用 Xaml 和 WPF，如何在单击时为属性设置动画，然后在连续单击时反转

Question

我想知道是否有一种方法可以仅使用 XAML 对属性执行动画，然后在下次单击时执行反向动画？

这是我在 Border 对象上使用的触发器示例，用于呈现滑出的外观:

<!-- Animates the Width to Slide It Out. -->
<EventTrigger RoutedEvent="Border.MouseLeftButtonUp">
  <BeginStoryboard>
     <Storyboard>
        <DoubleAnimation Storyboard.TargetName="theFilterControl"
             Storyboard.TargetProperty="Width"
             From="16"
             To="170"
             Duration="0:0:.7" />
      </Storyboard>
    </BeginStoryboard>
 </EventTrigger>

Answer 1

您可以为 ToggleButton 创建一个 ControlTemplate 并在其中添加边框。 Button ControlTemplate 可以为您提供动画的 IsPressed 属性。

<ToggleButton>
    <ToggleButton.Template>
        <ControlTemplate  TargetType="{x:Type ToggleButton}">
            <Border x:Name="theFilterControl" Background="#FF686868" 
                BorderBrush="Black" Width="16" />
            <ControlTemplate.Triggers>
                <EventTrigger RoutedEvent="ToggleButton.Checked">
                    <BeginStoryboard> 
                    <Storyboard>
                          <DoubleAnimation Storyboard.TargetName="theFilterControl"
                                 Storyboard.TargetProperty="Width"
                                 From="16"
                                 To="170"
                                 Duration="0:0:.7" />
                    </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger RoutedEvent="ToggleButton.Unchecked">
                    <BeginStoryboard>
                        <Storyboard>
                          <DoubleAnimation Storyboard.TargetName="theFilterControl"
                                 Storyboard.TargetProperty="Width"
                                 From="170"
                                 To="16"
                                 Duration="0:0:.7" />
                          </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </ToggleButton.Template>
</ToggleButton>