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

[kucint]

@jeromelaban
I fully understand.
what would be a workaround, can you please give me a hint?

[MartinZikmund]

@kucint A way would be to create two colors - normal one and one with opacity applied. Then you could do a ColorAnimation between those two and that should hopefully work

[kucint]

Good idea. I'll check it out. Thanks!