1

我有一个图像，当布尔属性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 并且它是可见的。当我取消注释第一个设置器并将Witdh默认设置为 0px （或Visibilityto Hidden）时，图像在启动时不显示，但在IsDeletingEnabled从trueto切换后立即消失fals。在这种情况下，看不到任何动画。

有没有人解决我如何在启动时将VisibilitytoHidden或Witdhto 设置为 0px 而不隐藏DataTrigger.ExitAction？

4

1 回答 1

0

如果您将 设置为 0，您是否明确需要设置Visibility为？零宽度元素和隐藏元素在屏幕上看起来相同。HiddenWidth

您的退出操作没有被“隐藏”，除了运行退出操作之外，正在发生的事情是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>
于 2013-08-23T19:12:23.890 回答