Skip to content

Styles based on a style that is based on another style that uses AppThemeBinding do not inherit properties correctly. #31280

@NightMan665

Description

@NightMan665

Description

The title may sound a little tricky, but everything is straightforward. Let me explain:

    <!-- Basic style -->
    <Style
        x:Key="LabelBaseStyle"
        TargetType="Label">

        <!-- This one with simple color works as expected -->
        <!-- <Setter Property="TextColor" Value="Green" />  -->

        <!-- This one with AppThemeBinding provides an issue in inherited styles -->
        <Setter Property="TextColor" Value="{AppThemeBinding Light=Green, 
                                                             Dark=Green}" />
    </Style>

    <!-- This one inherits from basic style and overrides text color -->
    <Style
        x:Key="LabelBaseStyleRed"
        BaseResourceKey="LabelBaseStyle"
        TargetType="Label">
        <Setter Property="TextColor" Value="Red" />
    </Style>

    <!-- This one inherits from the second with overridden color (red) but displays green (from the basic one) -->
    <Style
        x:Key="LabelBaseStyleFromRedWithPadding"
        BaseResourceKey="LabelBaseStyleRed"
        TargetType="Label">
        <Setter Property="Padding" Value="20" />
    </Style>

So that way we have:

  1. Basic (LabelBaseStyle) style with Green text color
  2. Inherited (LabelBaseStyleRed) style
  3. Inherited from the Red style (LabelBaseStyleFromRedWithPadding) style which behaves incorrectly.

Simple sample of usage:

            <Label
                Text="LabelBaseStyle (should be green)"
                Style="{StaticResource LabelBaseStyle}" />

            <Label
                Text="LabelBaseStyleRed (should be red)"
                Style="{StaticResource LabelBaseStyleRed}" />

            <Label
                Text="LabelBaseStyleFromRedWithPadding (should be red, but its green)"
                Style="{StaticResource LabelBaseStyleFromRedWithPadding}" />

The last one should have red text color inherited from the second (red) style, but it repeats the Green color from the basic style.
That does not happen if the basic style uses just Value="Green" instead of Value="{AppThemeBinding Light=Green, Dark=Green}".

I have tried the same code on MAUI 8 and MAUI 9 (any version), and it is reproducible on every version.

Steps to Reproduce

Create a sample MAUI project.
Add styles from the text above to the App.xaml.cs.
Add sample code to the MainPage.

Link to public reproduction project repository

https://github.com/NightMan665/MauiAppThemeBindingIssue

Version with bug

9.0.100 SR10

Is this a regression from previous behavior?

No, this is something new

Last version that worked well

Unknown/Other

Affected platforms

iOS, Android, Windows, macOS

Affected platform versions

Any

Did you find any workaround?

Do not use AppThemeBinding in basic style

Relevant log output

Metadata

Metadata

Assignees

Type

No type
No fields configured for issues without a type.

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions