Share via

Issue with icons in NavigationPage TitleView

Sreenivasan, Sreejith 885 Reputation points
2026-06-26T10:35:10.4433333+00:00

Below is my title view:

    <NavigationPage.TitleView>
        <Label 
            Text="{ex:Localized AlertsText}"
            HorizontalOptions="CenterAndExpand"
            VerticalOptions="Center"
            TextColor="{StaticResource DarkGrey}"
            FontSize="Title"/>
    </NavigationPage.TitleView>

Screenshot:
Simulator Screenshot - iPhone 16 Pro Max - 2026-06-26 at 15.25.34 (1)

I have 2 issues on this:

  1. The menu icon size is very big.
  2. The menu should be on the right side and archive icon on the left side of the title label.

But in xaml only label is showing, so how can I control the size and position of the icons? This issue is only on the iOS platform and no issue in android platform.

Developer technologies | .NET | .NET Multi-platform App UI

2 answers

Sort by: Most helpful
Most helpful Newest Oldest
  1. Nancy Vo (WICLOUD CORPORATION) 6,510 Reputation points Microsoft External Staff Moderator
    2026-06-29T08:58:48.57+00:00

    Hello @Sreenivasan, Sreejith ,

    Thanks for your question.

    I recommend wrapping your elements inside a 3-column Grid within the Shell.TitleView.

    Using Auto sizing for the icons and an expanding middle column will anchor your elements to the left, center, and right. Additionally, explicitly defining the HeightRequest and WidthRequest on your image buttons will safely clamp the touch targets, overriding iOS's oversized default rendering.

    You can refer to these following code example:

    <?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TitleViewFix.MainPage">

    <Shell.TitleView>
        <Grid ColumnDefinitions="Auto, *, Auto" VerticalOptions="Center" Padding="10.0">
            <ImageButton Grid.Column="0" VerticalOptions="Center">
                <ImageButton.Source>
                    <FontImageSource FontFamily="OpenSansRegular" Glyph="A" Size="24" Color="Black" />
                </ImageButton.Source>
            </ImageButton>

            <Label
                Grid.Column="1"
                Text="Alerts"
                HorizontalOptions="Center"
                VerticalOptions="Center"
                TextColor="Black"
                FontAttributes="Bold"
                FontSize="Title"
                />

            <ImageButton Grid.Column="2" VerticalOptions="Center">
                <ImageButton.Source>
                    <FontImageSource FontFamily="OpenSansRegular" Glyph="M" Size="24" Color="Black" />
                </ImageButton.Source>
            </ImageButton>

        </Grid>
    </Shell.TitleView>

</ContentPage>

    User's image

    I hope this addresses your question. If this response was helpful, please consider following the guidance to provide feedback.

    Was this answer helpful?

    0 comments

  2. AI answer

    2026-06-26T10:35:51.7433333+00:00

    On iOS, the NavigationPage.TitleView can host any layout, not just a single view. That layout is what controls the size and position of the content in the navigation bar.

    To control icon size and place them left/right of the title, wrap the label and icons in a layout (for example, a Grid or HorizontalStackLayout) and explicitly set size requests for the icon views.

    Example using a Grid with left and right icons:

    <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="AlertsPage">
    <NavigationPage.TitleView>
        <Grid ColumnDefinitions="Auto,*,Auto"
              HeightRequest="44"  >
            <!-- Left menu icon -->
            <Image Grid.Column="0"
                   Source="menu_icon.png"
                   WidthRequest="24"
                   HeightRequest="24"
                   VerticalOptions="Center" />

            <!-- Center title -->
            <Label Grid.Column="1"
                   Text="{ex:Localized AlertsText}"
                   HorizontalOptions="Center"
                   VerticalOptions="Center"
                   TextColor="{StaticResource DarkGrey}"
                   FontSize="Title" />

            <!-- Right archive icon -->
            <Image Grid.Column="2"
                   Source="archive_icon.png"
                   WidthRequest="24"
                   HeightRequest="24"
                   VerticalOptions="Center" />
        </Grid>
    </NavigationPage.TitleView>
</ContentPage>

    Key points based on NavigationPage behavior:

    • NavigationPage.TitleView can be any View, including a layout containing multiple views.
    • Many views will not appear correctly in the navigation bar unless WidthRequest and HeightRequest are set, so explicitly set these on the icon views (and the container if needed) to control size.
    • Layouts such as Grid or HorizontalStackLayout let the icons be positioned left and right of the title label.

    If the icons still look oversized, reduce their WidthRequest/HeightRequest values until they match the desired visual size on iOS.

    References:

    AI-generated content may be incorrect. Read our transparency notes for more information.

    Was this answer helpful?

Your answer

Answers can be marked as 'Accepted' by the question author and 'Recommended' by moderators, which helps users know the answer solved the author's problem.