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

使用Xaml和WPF,如何在单击时设置属性动画,然后在连续单击时反转,wpf,animation,properties,double,Wpf,Animation,Properties,Double,我想知道是否有一种方法可以仅使用XAML对属性执行动画,然后在下一次单击“执行反向动画” 下面是我在一个Border对象上使用的触发器的一个示例,它给出了滑出的外观: <!-- Animates the Width to Slide It Out. --> <EventTrigger RoutedEvent="Border.MouseLeftButtonUp"> <BeginStoryboard> <Storyboard>

我想知道是否有一种方法可以仅使用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>

您可以为ToggleButton创建一个控件模板,并在其中添加边框。按钮控件模板可以为动画提供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>

Jobi的切换按钮主意不错,谢谢!您还可以通过在ControlTemplate外部和UserControl(或Page)触发器区域内部为ToggleButton定义触发器来绕过范围问题,例如

  <UserControl.Triggers>
    <EventTrigger RoutedEvent="ToggleButton.Checked"
                  SourceName="ExpandCollapseToggleButton">
        <EventTrigger.Actions>
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation 
                        Storyboard.TargetName="SidebarCanvas"
                        Storyboard.TargetProperty="Width"
                        To="0"
                        Duration="0:0:0.15" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger.Actions>
    </EventTrigger>
    <EventTrigger RoutedEvent="ToggleButton.Unchecked"
                  SourceName="ExpandCollapseToggleButton">
        <EventTrigger.Actions>
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation 
                        Storyboard.TargetName="SidebarCanvas"
                        Storyboard.TargetProperty="Width"
                        To="250"
                        Duration="0:0:0.15" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger.Actions>
    </EventTrigger>
</UserControl.Triggers>


ControlTemplate的作用域似乎与UserControl/Page完全不同,因此您不能在这些作用域之间引用目标。

这听起来似乎可行,但我在这里的知识有限。您能否提供一个Xaml片段来演示如何使用此触发器在元素上激活上述情节提要?谢谢。刚刚用切换按钮和控制模板更新了帖子。谢谢。我最初遇到了一个可怕的问题,在“yyy”错误的名称范围内找不到“xxx”名称。但后来我重新安排了xaml,将所有内容都放入模板中。非常感谢你!