Question

我有一个图像，如果属性切换回true，当布尔属性更改为false时，其宽度应设置为0到30像素，如果属性更改为30到0像素。通常，这适用于此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>

问题是，在Property IsDeletingEnabled第一次切换为true之前，图像witdh是30px并且可见。当我取消注释第一个设置器并默认将Witdh设置为0px（或Visibility设置为Hidden）时，图像在启动时不会显示，但在切换后会立即消失{{1从IsDeletingEnabled到true。在这种情况下，没有动画可见。

我是否有任何解决方案如何在启动时将fals设置为Visibility或将Hidden设置为0px而不隐藏Witdh？

Answer 1

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

您的退出操作未被“隐藏”，除了运行退出操作之外，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>

WPF：使用起始值交替设置控件的宽度

1 个答案: