[Bug] Animations for Width and Height properties not working in WinUI 3

[MinuteReversal]

Describe the bug

Animations for the Width and Height properties of a Rectangle do not work in WinUI 3. The animations are defined using DoubleAnimationUsingKeyFrames, but they do not have any effect on the Rectangle.

Steps to reproduce the bug

Steps to reproduce the bug

1. Create a new WinUI 3 project targeting .NET 8.
2. Add the following XAML to define a Rectangle and a Storyboard to animate its Width and Height properties:
3. Add the following code-behind to start the animation:

WindowKeyframe.xaml

<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="WinUiLearn.WindowKeyFrame"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WinUiLearn"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="WindowKeyFrame">

    <Grid>
        <Grid.Resources>
            <Storyboard x:Name="rectangleStoryboard">
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="animatedRectangle" Storyboard.TargetProperty="(Canvas.Left)">
                    <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0" />
                    <LinearDoubleKeyFrame Value="300" KeyTime="0:0:2" />
                    <LinearDoubleKeyFrame Value="0" KeyTime="0:0:4" />
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="animatedRectangle" Storyboard.TargetProperty="(Canvas.Top)">
                    <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0" />
                    <LinearDoubleKeyFrame Value="200" KeyTime="0:0:2" />
                    <LinearDoubleKeyFrame Value="0" KeyTime="0:0:4" />
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
            <Storyboard x:Name="rectangleStoryboard2">
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="animatedRectangle2" Storyboard.TargetProperty="Width">
                    <LinearDoubleKeyFrame Value="50" KeyTime="0:0:0" />
                    <LinearDoubleKeyFrame Value="300" KeyTime="0:0:2" />
                    <LinearDoubleKeyFrame Value="50" KeyTime="0:0:4" />
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="animatedRectangle2" Storyboard.TargetProperty="Height">
                    <LinearDoubleKeyFrame Value="50" KeyTime="0:0:0" />
                    <LinearDoubleKeyFrame Value="200" KeyTime="0:0:2" />
                    <LinearDoubleKeyFrame Value="50" KeyTime="0:0:4" />
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
        </Grid.Resources>

        <Canvas>
            <Rectangle x:Name="animatedRectangle" Width="50" Height="50" Fill="Blue" />
            <Rectangle x:Name="animatedRectangle2" Width="50" Height="50" Canvas.Left="50" Fill="Red" />
            <Button Content="Start Animation" Click="StartAnimation_Click" Canvas.Left="120" Canvas.Top="10" Background="Purple" />
        </Canvas>
    </Grid>
</Window>

WindowKeyframe.xaml.cs

using Microsoft.UI.Xaml;
using System.Diagnostics;

namespace WinUiLearn
{
    public sealed partial class WindowKeyFrame : Window
    {
        public WindowKeyFrame()
        {
            InitializeComponent();
        }

        private void StartAnimation_Click(object sender, RoutedEventArgs e)
        {
            Debug.WriteLine("StartAnimation_Click called");
            rectangleStoryboard.Begin();
            rectangleStoryboard2.Begin();
        }
    }
}

4. Run the application and click the "Start Animation" button.

Expected behavior

Expected behavior
The Width and Height properties of the Rectangle should animate as defined in the Storyboard.

Actual behavior
The Width and Height properties of the Rectangle do not change.

Version Info

• WinUI 3: [version]
• .NET: 8.0

Additional context
Copy the code from the offical demo not work
How to: Animate the Size of a FrameworkElement

<Button Name="AnimatedWidthButton"
Canvas.Left="220" Canvas.Top="20"      
Width="200" Height="150"
BorderBrush="Red" BorderThickness="5">
          Click Me
          <Button.Triggers>

              <!-- Animate the button's Width property. -->
              <EventTrigger RoutedEvent="Button.Loaded">
                  <BeginStoryboard>
                      <Storyboard>
                          <DoubleAnimation
          Storyboard.TargetName="AnimatedWidthButton"
          Storyboard.TargetProperty="(Button.Width)"
          To="500" Duration="0:0:10" AutoReverse="True" 
          RepeatBehavior="Forever" />
                      </Storyboard>
                  </BeginStoryboard>
              </EventTrigger>
          </Button.Triggers>
      </Button>

Screenshots

NuGet package version

None

Windows version

No response

Additional context

dotnet list pakage

   > FFmpeg.AutoGen                              7.0.0             7.0.0
   > Microsoft.Windows.SDK.BuildTools            10.0.26100.1742   10.0.26100.1742
   > Microsoft.WindowsAppSDK                     1.6.241114003     1.6.241114003  
   > Microsoft.Xaml.Behaviors.WinUI.Managed      2.0.9             2.0.9

OS Name: Microsoft Windows 11 Pro
OS Version: 10.0.26100 N/A Build 26100

[castorix]

It works with
EnableDependentAnimation="True"
but it is not recommended :
https://learn.microsoft.com/en-us/windows/apps/design/motion/storyboarded-animations#dependent-and-independent-animations

Test with MSDN sample :

[MinuteReversal]

The animation is working well after adding EnableDependentAnimation="True" to the DoubleAnimationUsingKeyFrames
elements!

<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="WinUiLearn.WindowKeyFrame"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WinUiLearn"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="WindowKeyFrame">

    <Grid>
        <Grid.Resources>
            <Storyboard x:Name="rectangleStoryboard">
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="animatedRectangle" Storyboard.TargetProperty="(Canvas.Left)">
                    <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0" />
                    <LinearDoubleKeyFrame Value="300" KeyTime="0:0:2" />
                    <LinearDoubleKeyFrame Value="0" KeyTime="0:0:4" />
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="animatedRectangle" Storyboard.TargetProperty="(Canvas.Top)">
                    <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0" />
                    <LinearDoubleKeyFrame Value="200" KeyTime="0:0:2" />
                    <LinearDoubleKeyFrame Value="0" KeyTime="0:0:4" />
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
            <Storyboard x:Name="rectangleStoryboard2">
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="animatedRectangle2" Storyboard.TargetProperty="Width" EnableDependentAnimation="true">
                    <LinearDoubleKeyFrame Value="50" KeyTime="0:0:0" />
                    <LinearDoubleKeyFrame Value="300" KeyTime="0:0:2" />
                    <LinearDoubleKeyFrame Value="50" KeyTime="0:0:4" />
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="animatedRectangle2" Storyboard.TargetProperty="Height" EnableDependentAnimation="true">
                    <LinearDoubleKeyFrame Value="50" KeyTime="0:0:0" />
                    <LinearDoubleKeyFrame Value="200" KeyTime="0:0:2" />
                    <LinearDoubleKeyFrame Value="50" KeyTime="0:0:4" />
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
        </Grid.Resources>

        <Canvas>
            <Rectangle x:Name="animatedRectangle" Width="50" Height="50" Fill="Blue" />
            <Rectangle x:Name="animatedRectangle2" Width="50" Height="50" Canvas.Left="50" Fill="Red" />
            <Button Content="Start Animation" Click="StartAnimation_Click" Canvas.Left="120" Canvas.Top="10" Background="Purple" />
        </Canvas>
    </Grid>
</Window>