Search code examples
maui

.Net MAUI, ToolbarItem not visible on iOS


When I add a ToolbarItem to my ContentPage, it works fine on Android. But on iOS, the menu text is invisible though clickable on iOS. What's going on? Image icon still works fine on Android. But the icon is still not visible on iOS. Tested on iPhone SE 2nd gen. The following ContentPage was generated by VS 2022. I just added ToolbarItems part.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="MauiApp7.MainPage">
<ContentPage.ToolbarItems>
    <ToolbarItem Text="Test" Clicked="OnTestClicked" />
</ContentPage.ToolbarItems>
<ScrollView>
    <VerticalStackLayout
        Padding="30,0"
        Spacing="25">
        <Image
            Source="dotnet_bot.png"
            HeightRequest="185"
            Aspect="AspectFit"
            SemanticProperties.Description="dot net bot in a race car number eight" />

        <Label
            Text="Hello, World!"
            Style="{StaticResource Headline}"
            SemanticProperties.HeadingLevel="Level1" />

        <Label
            Text="Welcome to &#10;.NET Multi-platform App UI"
            Style="{StaticResource SubHeadline}"
            SemanticProperties.HeadingLevel="Level2"
            SemanticProperties.Description="Welcome to dot net Multi platform App U I" />

        <Button
            x:Name="CounterBtn"
            Text="Click me" 
            SemanticProperties.Hint="Counts the number of times you click"
            Clicked="OnCounterClicked"
            HorizontalOptions="Fill" />
    </VerticalStackLayout>
</ScrollView>

Solution

  • This is a known issue on GitHub, Shell Text-only toolbar items are invisible/not shown #7328. From mattleibow comment, it may because iOS and macOS require icons. You may follow up this issue and get the latest updates.

    You may use IconImageSource for ToolbarItems. See the Display toolbar items and some related SO questions:

    ToolbarItem in ToolbarItems for iOS not in the right place.

    Toolbar colored icons are appearing in Shell.ForegroundColor property on iOS - (MAUI)

    Or you may customize the Shell TitleView.