maui.net-maui.shellmaui-shell

MAUI How to set the TopBar background color?


How can I change / set the color of the top bar?

(for all pages at my app)

enter image description here


Solution

  • Shell

    Since you're using Shell, this should be done using Shell.BackgroundColor:

    <ContentPage
        x:Class="MauiSamples.Views.MainPage"
        xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        Shell.BackgroundColor="DarkGreen">
    
        <!-- content goes here -->
    
    </ContentPage>
    

    You can also see how that works in my samples repository: https://github.com/ewerspej/maui-samples.

    If you want to have the same style per page, then you can also change this in the Styles.xaml or define your own style somewhere in a similar fashion:

    <Style TargetType="Shell" ApplyToDerivedTypes="True">
        <Setter Property="Shell.BackgroundColor" Value="DarkGreen" />
        
        <!-- skipping other styles -->
    
    </Style>
    

    Another way would be to set the TitleView to a Layout that fills the available space and give that a BackgroundColor:

    <ContentPage
        x:Class="MauiSamples.Views.MainPage"
        xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    
        <Shell.TitleView>
            <Grid
                VerticalOptions="Fill"
                HorizontalOptions="Fill"
                BackgroundColor="DarkGreen">
                
            </Grid>
        </Shell.TitleView>
    
        <!-- content goes here -->
    
    </ContentPage>
    

    NavigationPage

    When a NavigationPage is used instead of Shell, then it should be BarBackgroundColor, e.g.:

    MainPage = new NavigationPage(new MyContentPage())
    {
        BarBackgroundColor = Colors.DarkGreen
    };
    

    This should be similar for TabbedPage.