I'm trying to add a gradient to the navigation bar in a .NET MAUI Shell based app.

I've tried several different approaches, but seems none of them work. I tried:

• Using a custom handler.
• Using a custom renderer.
• Setting the style directly in the app delegate when app finishes launching.

If anyone had any success in this (especially on iOS, because on Android I didn't verify yet what approach will work), please add answer.

I'm trying to add a gradient to the navigation bar in a .NET MAUI Shell based app.

I've tried several different approaches, but seems none of them work. I tried:

• Using a custom handler.
• Using a custom renderer.
• Setting the style directly in the app delegate when app finishes launching.

If anyone had any success in this (especially on iOS, because on Android I didn't verify yet what approach will work), please add answer.

• android
• ios
• .net
• maui

• Possible duplicate of stackoverflow.com/questions/75257860/… – Stephen Quan Commented 10 hours ago

1 Answer 1

You can set Shell.TitleView to border with a gradient background and reintroduce a Label with the page's title, e.g.

<ContentPage
    x:Class="ExampleApp.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Name="mainPage"
    Title="MainPage">
    <Shell.TitleView>
        <Border>
            <Border.Background>
                <LinearGradientBrush EndPoint="1,0">
                    <GradientStop Offset="0.1" Color="Yellow" />
                    <GradientStop Offset="1.0" Color="Green" />
                </LinearGradientBrush>
            </Border.Background>
            <Grid Padding="15,0,15,0">
                <Label Text="{Binding Title, Source={Reference mainPage}, x:DataType=ContentPage}" VerticalOptions="Center" />
            </Grid>
        </Border>
    </Shell.TitleView>
</ContentPage>

It's possible to come up with a generalized solution by moving the above to AppShell with by watching for AppShell.CurrentState property changes and reading AppShell.CurrentPage.Title.

<!-- AppShell.xaml -->
<Shell
    x:Class="MauiCultureTest.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:ExampleApp"
    x:Name="appShell"
    Title="ExampleApp"
    Shell.FlyoutBehavior="Flyout">
    <Shell.TitleView>
        <Border>
            <Border.Background>
                <LinearGradientBrush EndPoint="1,0">
                    <GradientStop Offset="0.2" Color="Yellow" />
                    <GradientStop Offset="0.8" Color="Green" />
                </LinearGradientBrush>
            </Border.Background>
            <Grid Padding="15,0,15,0">
                <Label
                    x:DataType="local:AppShell"
                    BindingContext="{Reference appShell}"
                    Text="{Binding CurrentPage.Title}"
                    VerticalOptions="Center" />
            </Grid>
        </Border>
    </Shell.TitleView>
    <ShellContent
        Title="Home"
        ContentTemplate="{DataTemplate local:MainPage}"
        Route="MainPage" />
</Shell>

// AppShell.xaml.cs
public partial class AppShell : Shell
{
    public AppShell()
    {
        InitializeComponent();
        this.PropertyChanged += (s, e) =>
        {
            switch (e.PropertyName)
            {
                case nameof(Shell.CurrentState):
                    OnPropertyChanged(nameof(CurrentPage));
                    break;
            }
        };
    }
}