xaml - WPF: 与开始值交替设置控件的动画宽度

  显示原文与译文双语对照的内容
0 0

我有一个图像,它的宽度应该是动画从 0到 30像素当一个布尔属性改变到 true 后从 30到 0像素,如果属性切换回 false 。 通常,这里代码适用于这里XAML代码:


 <Image.Style>
 <Style TargetType="{x:Type Image}">

 <!-- <Setter Property="Width" Value="0"/> -->

 <Style.Triggers> 
 <DataTrigger Binding="{Binding ElementName=AIM, Path=IsDeletingEnabled}" Value="True">
 <Setter Property="Visibility" Value="Visible"/>

 <DataTrigger.EnterActions>
 <BeginStoryboard>
 <Storyboard>
 <!-- Animate the Width of the Image from 0 to 30px within 300ms-->
 <DoubleAnimation Storyboard.TargetProperty="Width" From="0" To="30" Duration="0:0:0.3"/>
 </Storyboard>
 </BeginStoryboard>
 </DataTrigger.EnterActions>

 <DataTrigger.ExitActions>
 <BeginStoryboard>
 <Storyboard>
 <!-- Animate the Width of the Image from 30 to 0px within 300ms-->
 <DoubleAnimation Storyboard.TargetProperty="Width" From="30" To="0" Duration="0:0:0.3"/>
 </Storyboard>
 </BeginStoryboard>
 </DataTrigger.ExitActions>

 </DataTrigger> 
 </Style.Triggers>
 </Style>
 </Image.Style>
 </Image>

问题是,在属性 IsDeletingEnabled 切换到 true 之前,图像的witdh是 30px,它是可见的。 当我取消第一setter和设置默认 0px ( 或者 VisibilityHidden ) Witdh, 图片没有显示在启动但消失后立即切换 IsDeletingEnabledtruefals 。 在这种情况下,不显示任何动画。

有anywone解决方案如何在启动时将 Visibility 设置为 Hidden 或者 Witdh 到 0px,而不隐藏 DataTrigger.ExitAction

时间: 原作者:

0 0

如果将 Width 设置为 0,是否明确需要将 Visibility 设置为 Hidden? 一个零宽度元素和一个隐藏元素在屏幕上看起来相同。

退出操作不是'隐藏',发生的是 DataTrigger的'撤消' <Setter Property="Visibility" Value="Visible"/> 除了运行退出操作外。 但是由于可见性立即生效,你不会看到正在运行的退出操作。

你的输入动作需要 Visibility=Visible 并启动展开的动画。 你的退出操作需要执行收缩动画,但等待设置 Visibility=Visible,直到它完成之后。 你可以使用 ObjectAnimationUsingKeyFrames 动画执行这里操作:


<Image.Style>
 <Style TargetType="Image">

 <Setter Property="Visibility" Value="Hidden"/>
 <Setter Property="Width" Value="0"/>

 <Style.Triggers>

 <DataTrigger Binding="{Binding IsShown}" Value="True">
 <DataTrigger.EnterActions>
 <BeginStoryboard>
 <Storyboard>
 <!-- Animate the Width of the Image from 0 to 30px within 300ms-->
 <DoubleAnimation Storyboard.TargetProperty="Width" From="0" To="30" Duration="0:0:0.3"/>
 <!-- Set the Image to Visible immediately -->
 <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Visibility)">
 <DiscreteObjectKeyFrame KeyTime="00:00:00">
 <DiscreteObjectKeyFrame.Value>
 <Visibility>Visible</Visibility>
 </DiscreteObjectKeyFrame.Value>
 </DiscreteObjectKeyFrame>
 </ObjectAnimationUsingKeyFrames>
 </Storyboard>
 </BeginStoryboard>
 </DataTrigger.EnterActions>

 <DataTrigger.ExitActions>
 <BeginStoryboard>
 <Storyboard>
 <!-- Animate the Width of the Image from 30 to 0px within 300ms-->
 <DoubleAnimation Storyboard.TargetProperty="Width" From="30" To="0" Duration="0:0:0.3"/>
 <!-- After 300ms, hide the Image -->
 <ObjectAnimationUsingKeyFrames BeginTime="0:0:0.3" Storyboard.TargetProperty="(UIElement.Visibility)">
 <DiscreteObjectKeyFrame KeyTime="0:0:0">
 <DiscreteObjectKeyFrame.Value>
 <Visibility>Hidden</Visibility>
 </DiscreteObjectKeyFrame.Value>
 </DiscreteObjectKeyFrame>
 </ObjectAnimationUsingKeyFrames>
 </Storyboard>
 </BeginStoryboard>
 </DataTrigger.ExitActions>

 </DataTrigger>

 </Style.Triggers>
 </Style>
</Image.Style>

原作者:
...