WPF storyboard not running animations in parallel

I am trying to animate the main window, changing the width and the height. I use a DataTrigger in the main window style to change it but when I run it first triggers the width change and then the height change, I want both of them changing at the same time.

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

The data trigger is very simple:

    <Window.Style>
    <Style>
        <Style.Triggers>
            <DataTrigger Binding="{Binding IsWideScreen}" Value="true" >
                <DataTrigger.EnterActions>
                    <BeginStoryboard Storyboard="{Stati开发者_运维问答cResource TransitToExecution}"/>
                </DataTrigger.EnterActions>
            </DataTrigger>
        </Style.Triggers>
    </Style>
</Window.Style>

Any ideas why these two animations do not run simultaneuosly?

Thanks

It doesn't seem possible to animate both the Width and Height of a Window at the same time without some effort; a solution was posted here. Alternatively, you could queue the animations:

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

I believe that you need to have two BeginStoryboards in your trigger - one for the width, one for the height.

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

And then in your Trigger:

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