代码之家 › 专栏 › 技术社区 › Jason Stevenson

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

double properties animation wpf

Jason Stevenson · 技术社区 · 15 年前

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

2 回复 | 直到 15 年前

Jobi Joy 15 年前

您可以为ToggleButton创建一个ControlTemplate并在其中放置边框。按钮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>

Derek 15 年前

在Jobi的切换按钮上有个好主意,谢谢!您还可以通过在ControlTemplate外部和UserControl(或页面)触发器区域(例如)内为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/页面完全不同,因此您不能在这些范围之间引用目标。