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