Referencing a dynamic color in a DataTrigger does not work.

[DanTravison]

Description

When I define a Data Templateo change a color based and use either a DynamicResource to a color or a StaticResource to a Brush that itself uses a DynamicResource to a color, the color is not changed when I change the application's theme.

The Syles.Triggers is defined as follows:

<Style.Triggers>
    <DataTrigger TargetType="Ellipse"
                Binding="{Binding IsChecked}"
                Value="True"
                >
        <Setter Property="StrokeThickness"
            Value="5"/>
        <Setter Property="Stroke"
            Value="{StaticResource RadioButtonCheckedBrush}"/>
    </DataTrigger>

    <DataTrigger TargetType="Ellipse"
                Binding="{Binding IsChecked}"
                Value="False"
                >
        <Setter Property="StrokeThickness"
            Value="2"/>
        <Setter Property="Stroke"
            Value="{StaticResource RadioButtonUncheckedBrush}"/>
    </DataTrigger>
</Style.Triggers>

The application's theme is changed as follows:

if (theme != _activeTheme)
{
    App.Trace(this, nameof(SetTheme), "ActiveTheme:{0}", theme);
    _activeTheme = theme;
    Application.Current.Resources.MergedDictionaries.Clear();
    Application.Current.Resources.MergedDictionaries.Add
    (   
        theme == AppTheme.Light ? LightTheme : DarkTheme
    );
}

Steps to Reproduce

1: Create a Maui App, delete colors.xaml and styles.xaml 2: Implemented support for theme changing. 3: Define Colors for 'Checked' and 'Unchecked' in the Dark and Light theme xaml files. 4; Define associated Brushes in app.xaml. 5: Define a view model, MainPageViewModel and add a bool IsChecked property. Raised a PropertyChanged event when the value changes. 6: Add a checkbox to the main page and bind it to an IsChecked property on the view model. 7: Add radio buttons or a Picker to allow changing the theme between Unspecified, Dark, Light. 8: Add an Ellipse to the main page and define a style that sets Stroke based on the IsChecked property. Also define StrokeThickness to the DataTrigger to provide a secondary visual cue.

In the repro, I have defined the Ellipse examples followed by multiple Radio button groups: RadioButton with control template RadioButton with just a style Custom RadioGroup with a style Custom RadioGroup with a control template.

The 2 Ellipses should have the following colors based on Theme: Fill: Dynamic Color Dark:- Checked=Crimson, Unchecked=AntiqueWhite, Fill=PrimaryBackgroundBrush Light: Checked=Blue, Unchecked=Green, Fill=PrimaryBackgroundBrush Fill: Transparent Dark:- Checked=Crimson, Unchecked=AntiqueWhite, Fill=Transparent Light: Checked=Blue, Unchecked=Green, Fill=Transparent

Use any of these to change the app's theme. System - uses the system them - change the system them in the platform's Settings to see the issue Dark - uses DarkTheme.xaml Light - uses LightTheme.xaml

As you toggle through the various theme options, you will see the Ellipse control stop changing the stroke color when the theme changes. I've confirmed via tracing propertyChanging and/or propertyChanged handlers, that the does not update via the DataTrigger.

Also note that the Ellipse defined with a dynamic color, doesn't reliably update the fill color when the theme changes but does update when the checked state changes. I can't tell if this is an issue with my binding or the Ellipse shape itself.

The custom RadioGroup/RadioItem controls works both the DataTrigger problem and the Ellipse Fill problems as follows:

DataTrigger: remove the color from the DataTrigger and updating it explicitly in its propertyChanged handlers. See RadioItem.CheckColorProperty, UncheckedColorProperty, IsCheckedProperty, and UpdateCheckColor in RadioItem.cs. Ellipse Fill: Creates a custom drawable that only draws background and stroke; ignoring Fill.

Note that RequestedThemeChanged is not working on iOS with my implementation. Toggling between Light/Dark on the sample app does illustrate the both the DataTrigger and Fill issues.

Link to public reproduction project repository

https://github.com/DanTravison/ThemeSelector

Version with bug

7.0.59/7.0.100

Last version that worked well

Unknown

Affected platforms

Android, Windows

Affected platform versions

Android 30.0, Windows 10.0.17763.0, Pixel 5 Emulator 13.0/API 33, IPad Pro iOS 16.3, Galaxy Note 10+ Android 12,/API 31

Did you find any workaround?

The only workaround I've found is to encapsulate the Ellipse in a parent control (RadioItem.cs), define the desired BindableProperty elements on the parent control and update the Ellipse's colors in code in the propertyChanged handlers of the related parent control properties.

Relevant log output

No response

[rmarinho]

Maybe related with https://github.com/dotnet/maui/issues/13585 @StephaneDelcroix ?

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[homeyf]

Verified this issue with Visual Studio Enterprise 17.8.0 Preview 1.0. Can repro on windows platform with sample project. https://github.com/DanTravison/ThemeSelector

[StephaneDelcroix]

related to #20637 and require a similar fix