WPF storyboard not running animations in parallel

Question

Hi guys,

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="{StaticResource TransitToExecution}"/>
                </DataTrigger.EnterActions>
            </DataTrigger>
        </Style.Triggers>
    </Style>
</Window.Style>

Any ideas why these two animations do not run simultaneuosly?

Thanks

Answer 1

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>