Question

我正在尝试为主窗口设置动画，更改宽度和高度。我在主窗口样式中使用DataTrigger来更改它但是当我运行它时首先触发宽度变化然后高度变化，我希望它们同时发生变化。

<Storyboard x:Key="TransitToExecution">
    <!-- This animation hides the main panel -->
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Duration="0:0:0.5">
        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="{StaticResource ScreenHeight}"/>
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Duration="0:0:0.5">
        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="{StaticResource ScreenWidth}"/>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

数据触发非常简单：

    <Window.Style>
    <Style>
        <Style.Triggers>
            <DataTrigger Binding="{Binding IsWideScreen}" Value="true" >
                <DataTrigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource TransitToExecution}"/>
                </DataTrigger.EnterActions>
            </DataTrigger>
        </Style.Triggers>
    </Style>
</Window.Style>

为什么这两个动画不能同时运行的任何想法？

由于

Answer 1

似乎无法在没有任何努力的情况下同时为窗口的Width和Height制作动画;已发布解决方案here。或者，您可以对动画进行排队：

<BeginStoryboard HandoffBehavior="Compose">
  <Storyboard>
    <DoubleAnimation Storyboard.TargetName="window name"
      Storyboard.TargetProperty="Height"
      From="130" To="600" Duration="0:0:0.5"/>
    <DoubleAnimation Storyboard.TargetName="window name"
      Storyboard.TargetProperty="Width"
      From="300" To="800" Duration="0:0:0.5" BeginTime="0:0:0.5"/>
  </Storyboard>
</BeginStoryboard>

Answer 2

我相信你需要在你的触发器中有两个BeginStoryboard - 一个用于宽度，一个用于高度。

<Storyboard x:Key="TransitToExecutionHeight">
    <!-- This animation hides the main panel -->
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Duration="0:0:0.5">
        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="{StaticResource ScreenHeight}"/>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="TransitToExecutionWidth">
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Duration="0:0:0.5">
        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="{StaticResource ScreenWidth}"/>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

然后在你的触发器中：

    <Window.Style>
    <Style>
        <Style.Triggers>
            <DataTrigger Binding="{Binding IsWideScreen}" Value="true" >
                <DataTrigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource TransitToExecutionWidth}"/>
                    <BeginStoryboard Storyboard="{StaticResource TransitToExecutionHeight}"/>
                </DataTrigger.EnterActions>
            </DataTrigger>
        </Style.Triggers>
    </Style>
</Window.Style>

WPF故事板没有并行运行动画

2 个答案: