[WinAppSdk] Brush Opacity Animation not working

[kucint]

Current behavior

On WinAppSdk framework: DoubleAnimation of brush opacity is not working On Desktop framework: works fine

<Page.Resources>
    <ResourceDictionary>
        <ResourceDictionary.ThemeDictionaries>
            <ResourceDictionary x:Key="Light">
                <Color x:Key="SpotlightColor">LightYellow</Color>
            </ResourceDictionary>
            <ResourceDictionary x:Key="Dark">
                <Color x:Key="SpotlightColor">LightGreen</Color>
            </ResourceDictionary>
        </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>
</Page.Resources>

<Grid x:Name ="Topmost">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="SpotlightStates">
            <VisualState x:Name="SpotlightOn">
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="TopmostBackgroundBrush" Storyboard.TargetProperty="(Brush.Opacity)" To="1.0" Duration="0:0:0.2" />
                </Storyboard>
            </VisualState>
            <VisualState x:Name="SpotlightOff">
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="TopmostBackgroundBrush" Storyboard.TargetProperty="(Brush.Opacity)" To="0.0" Duration="0:0:0.2" />
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <Grid.Background>
        <SolidColorBrush x:Name="TopmostBackgroundBrush" Color="{ThemeResource SpotlightColor}" Opacity="1"/>
    </Grid.Background>

    <CheckBox Content="Spotlight"
              IsChecked="True"
              HorizontalAlignment="Center"
              VerticalAlignment="Center"
              Checked="SpotlightCheckBox_Checked"
              Unchecked="SpotlightCheckBox_Unchecked" />
</Grid>

private void SpotlightCheckBox_Checked(object sender, RoutedEventArgs e)
    => VisualStateManager.GoToState(this, "SpotlightOn", true);

private void SpotlightCheckBox_Unchecked(object sender, RoutedEventArgs e)
    => VisualStateManager.GoToState(this, "SpotlightOff", true);

Expected behavior

On WinAppSdk framework: DoubleAnimation of brush opacity shall work as on Desktop

How to reproduce it (as minimally and precisely as possible)

MINIMAL REPRO PROJECT: UnoBrushOpacityAnimationApp.zip

STEPS TO REPRODUCE:

• Run the App
• click on Spotlight checkbox
• nothing happens on WinAppSdk, on Desktop all is fine

Workaround

No response

Works on UWP/WinUI

No

Environment

No response

NuGet package version(s)

"Uno.Sdk": "5.5.43" "version": "9.0.100" // dotnet

Affected platforms

Windows (WinAppSDK)

IDE

Visual Studio 2022

IDE version

No response

Relevant plugins

No response

Anything else we need to know?

No response

[jeromelaban]

Thanks for the report. WinAppSDK issues we won't be able to fix, and those should generally be reported directly to the winui repository.

Still, there may be another way to do this on WinUI to make it work.