xaml - Style hierarchy not working as expected, defining any property on page-level removes all app-level styles - Stack Overflo

admin管理员组

文章数量:1291199

From what I have read, MAUI uses a hierarchy for Styling, from the MAUI documentation (.0#introduction-to-styles):

Styles lower in the view hierarchy take precedence over those defined higher up. For example, setting a Style that sets Label.TextColor to Red at the app-level will be overridden by a page-level style that sets Label.TextColor to Green. Similarly, a page-level style will be overridden by a control-level style. In addition, if Label.TextColor is set directly on a control property, this takes precedence over any styles.

With the note above, I feel that Styles is not being inherited like I understand.

App.xaml contains (also, Note relocating the ResourceDictionary lines above the MergedDictionaries does not change the result:

<Application.Resources>
    <ResourceDictionary>
        <!-- relocating MergedDictionaries items here makes no difference -->
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
            <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
    ...

I have a Styles.xaml file that defines what I would call the "base" of my TargetType Button.

<Style TargetType="Button">
    <Setter Property="Margin" Value="3" />
    <Setter Property="TextColor" Value="DeepPink" />
...
</Style>

Then, on a ContentPage, I have a ResourceDictionary that has Margin set to override the initial setting:

<ContentPage.Resources>
    <ResourceDictionary>
        <Style TargetType="Button">
            <Setter Property="Margin" Value="10" />
        </Style>
    </ResourceDictionary>
</ContentPage.Resources>

This is the button on the ContentPage:

<Button Command="{Binding MyCommand}" Text="Click me" />

When I run the app, the Button's TextColor is no longer DeepPink, and now is White, but would expect it to be DeepPink. I thought there was a hierarchy that overrides as you go from App to Page to Element. Am I doing something incorrect?

I also have a sample project here (link to sepcific commit with issue):

From what I have read, MAUI uses a hierarchy for Styling, from the MAUI documentation (https://learn.microsoft/en-us/dotnet/maui/user-interface/styles/xaml?view=net-maui-8.0#introduction-to-styles):

Styles lower in the view hierarchy take precedence over those defined higher up. For example, setting a Style that sets Label.TextColor to Red at the app-level will be overridden by a page-level style that sets Label.TextColor to Green. Similarly, a page-level style will be overridden by a control-level style. In addition, if Label.TextColor is set directly on a control property, this takes precedence over any styles.

With the note above, I feel that Styles is not being inherited like I understand.

App.xaml contains (also, Note relocating the ResourceDictionary lines above the MergedDictionaries does not change the result:

<Application.Resources>
    <ResourceDictionary>
        <!-- relocating MergedDictionaries items here makes no difference -->
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
            <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
    ...

I have a Styles.xaml file that defines what I would call the "base" of my TargetType Button.

<Style TargetType="Button">
    <Setter Property="Margin" Value="3" />
    <Setter Property="TextColor" Value="DeepPink" />
...
</Style>

Then, on a ContentPage, I have a ResourceDictionary that has Margin set to override the initial setting:

<ContentPage.Resources>
    <ResourceDictionary>
        <Style TargetType="Button">
            <Setter Property="Margin" Value="10" />
        </Style>
    </ResourceDictionary>
</ContentPage.Resources>

This is the button on the ContentPage:

<Button Command="{Binding MyCommand}" Text="Click me" />

When I run the app, the Button's TextColor is no longer DeepPink, and now is White, but would expect it to be DeepPink. I thought there was a hierarchy that overrides as you go from App to Page to Element. Am I doing something incorrect?

I also have a sample project here (link to sepcific commit with issue): https://github/d-harding/maui-style-hierarchy-issue/tree/14afbab6eae468255e9d97664752ba7c8e7ddc3d

• xaml
• maui

Share Improve this question Follow edited Feb 14 at 18:50 Derek asked Feb 13 at 22:53 DerekDerek 69211 gold badge77 silver badges2121 bronze badges 2

• You redefined the button in the page, so the global effect will be overridden and become the default white color. – Guangyu Bai - MSFT Commented Feb 17 at 9:53
• @GuangyuBai-MSFT, there was an answer a few days ago that addressed this, it outlined how to have a global, then also a page level style that inherited, I didn't get the time to look at the edited answer in detail but now it is gone. – Derek Commented Feb 18 at 22:58

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

======================Upated==========================

I would somehow be able to automatically inherit from the App-level without needing to use x:key in App or ContentPage. Similar to HTML's CSS

No, you can use style class, if you do not want to use BaseOn, but you have to set Class for your Button Styles. When you use them, you need to set StyleClass="RoundedClass, RotatedClass".

When I run the app, the Button's TextColor is no longer DeepPink, and now is White, but would expect it to be DeepPink. I thought there was a hierarchy that overrides as you go from App to Page to Element. Am I doing something incorrect?

Firstly, you need to set the x:Key for your DeepPink style like following code. For example, I set x:Key="myButtonStyle".

<Style x:Key="myButtonStyle" TargetType="Button">
<Setter Property="Margin" Value="3" />
<Setter Property="TextColor" Value="DeepPink" />
<Setter Property="BackgroundColor" Value="Green" />
</Style>

If we want to style in the ContentPage to extend the DeepPink style, we need to use BasedOn="{StaticResource myButtonStyle}" like following code. After that, you will get the Style hierarchy.

<ContentPage.Resources>
<ResourceDictionary>
<Style TargetType="Button" BasedOn="{StaticResource myButtonStyle}">
    <Setter Property="Margin" Value="10" />
</Style>
</ResourceDictionary>
</ContentPage.Resources>

By the way, if you set the two <Style TargetType="Button"> in the styles.xaml and <ContentPage.Resources>, they are same style for Button, only the style in the <ContentPage.Resources> will work. Style is effective according to the principle of proximity.

本文标签：