WPF animation - can only animate one property if running second animation

Question

I need to animate a window size to display 3 different views. But I already hit a block with just 2 views. So I run 1 animation to increase width and height on a button click, then I want to animate height and width to different values but only width is animated, height stays increased. I tried different approaches to "stop" first animation but it doesnt help.

The desired behaviour is to manipulate window size with animation - small -> medium -> large -> small ... But still let user be able to resize window in large mode both height and width, while small is of fixed size and medium can only resize height.

Hardly a rocket science task yet it doesnt work..

XAML:

    <Window.Resources>
        <Storyboard x:Key="Storyboard1">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="window" Storyboard.TargetProperty="(FrameworkElement.Width)">
                <EasingDoubleKeyFrame KeyTime="00:00:00" Value="450"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="window" Storyboard.TargetProperty="(FrameworkElement.Height)">
                <EasingDoubleKeyFrame KeyTime="00:00:00" Value="800"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="Storyboard2">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="window" Storyboard.TargetProperty="(FrameworkElement.Width)">
                <EasingDoubleKeyFrame KeyTime="00:00:00" Value="80"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="window" Storyboard.TargetProperty="(FrameworkElement.Height)">
                <EasingDoubleKeyFrame KeyTime="00:00:00" Value="400"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>

C#

        Storyboard sb1, sb2;
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            sb1 = FindResource("Storyboard1") as Storyboard;
            sb1.Begin(this, true);
        }

        private void Button1_Click(object sender, RoutedEventArgs e)
        {
            sb1.Stop();

            sb2 = FindResource("Storyboard2") as Storyboard;
            sb2.Begin(this, true);
        }

score 0 · Answer 1 · answered May 03 '23 at 13:16

The issue is that you try to animate both the width and the height simultaneously. Run the second animation after the first one by increasing the KeyTime:

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="window" Storyboard.TargetProperty="(FrameworkElement.Height)">
    <EasingDoubleKeyFrame KeyTime="00:00:01" Value="400"/>
</DoubleAnimationUsingKeyFrames>

Or try to set the SizeToContent property to WidthAndHeight, specify a size for the root panel and then animate this one as suggested here.

WPF animation - can only animate one property if running second animation

1 Answers1

Linked