使用Xaml和WPF，如何在点击时动画化属性，然后在连续点击时反转

我想知道是否有方法仅使用XAML在属性上执行动画，然后在下一个点击执行反向动画？使用Xaml和WPF，如何在点击时动画化属性，然后在连续点击时反转

这里是一个边界对象上触发我有一个样品给滑出的外观：

<!-- 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>

来源

2009-07-14 Jason Stevenson

您可以创建一个切换按钮一个控件模板，并把边界在里面。按钮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>

来源

2009-07-14 17:24:59

这听起来像它会工作，但我知道这里虽然有限。你能否提供一个Xaml片段来展示如何使用这个触发器在元素上激活上面的故事板？谢谢。 – 2009-07-14 18:48:36

从Jobi的ToggleButton好主意，谢谢！您还可以通过在ControlTemplate外部和UserControl（或Page）触发器区域内定义TriggerButton的触发器来解决范围问题，例如，

<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完全不同，因此您无法引用这些范围之间的目标。

来源

2010-01-08 18:43:36 Derek

使用Xaml和WPF，如何在点击时动画化属性，然后在连续点击时反转

回答

相关问题