Search code examples
xamarin.forms

Shell.TitleView does not working on iPhone from Xamarin.Forms application

Following code is working properly on Android Device which is developed using Xamarin.Forms in Visual Studio 2022 Community edition, But the same code does not works on iphone,

<Shell.TitleView>
        <Grid Margin="0,0,10,0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="auto" />
            </Grid.ColumnDefinitions>

            <Label x:Name="PageTitle" Grid.Row="0" Grid.Column="0" Text="" VerticalOptions="CenterAndExpand" FontSize="Medium" FontAttributes="Bold" TextColor="Black"/>

            <Image Grid.Row="0" Grid.Column="1" VerticalOptions="CenterAndExpand" HorizontalOptions="End" Source="cart.png" WidthRequest="40" HeightRequest="40">
                <Image.GestureRecognizers>
                    <TapGestureRecognizer Tapped="Cart_Clicked"/>
                </Image.GestureRecognizers>
            </Image>
            <Frame x:Name="BadgeFrame" Grid.Row="0" Grid.Column="1" Padding="0" WidthRequest="25" HeightRequest="25" CornerRadius="13" HasShadow="false" BackgroundColor="Red" HorizontalOptions="End" VerticalOptions="Start" >
                <Frame.GestureRecognizers>
                    <TapGestureRecognizer Tapped="Cart_Clicked"/>
                </Frame.GestureRecognizers>
                <Label  x:Name="BadgeLabel" Text="" TextColor="White" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" HeightRequest="20"/>
            </Frame>
        </Grid>
    </Shell.TitleView>

Please suggest what we are doing wrong, guide us to make this work on iphone.

Thank You,

We expect to use same code for Android as well as iPhone. Please suggest if any change in given code or required any ios project properties to set.

So that same code will work for iPhone.

Solution

  • You may have ran into a known GitHub issue : Shell TitleView Not Working in iOS 16 [Bug] #15512.

    I can totally reproduce this issue. And the community has given a workaround, which is to use a Xamarin.Forms Shell custom renderers.

    @adam-russell shared us a good workaround using Custom Renderer, which I have tested it on my side.

    To sum up, suppose you have created a XAML file named AppShell that subclasses the Shell class in the shared code project.

    <Shell
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    ...
    >
    <FlyoutItem Title="MainPage">
        <ShellContent Route="mainPage"                   
                      ContentTemplate="{DataTemplate local:MainPage}" />
    </FlyoutItem>
</Shell>

    Then in iOS project, create a new file named CustomShellRenderer which subclass ShellRenderer. You may just use the code from @adam-russell comment. The only difference is for ExportRendererAttribute.

    [assembly: ExportRenderer(typeof(AppShell), typeof(CustomShellRenderer))]

namespace Your.Namespace.Here
{
    public class CustomShellRenderer : ShellRenderer
    {
        protected override IShellPageRendererTracker CreatePageRendererTracker()
        {
            return new CustomShellPageRendererTracker(this);       
        }
    }
    ...

}

    Then you could add TitleView and check it,

    <Shell.TitleView>
    <StackLayout>
        <Label TextColor="Orange"
        FontSize="Large"
        FontAttributes="Bold"
        HorizontalTextAlignment="Center"
        VerticalTextAlignment="Center"
        Text="Hello, this is my test!!!"/>
    </StackLayout>
</Shell.TitleView>

    This is the screenshot,

    enter image description here

    Hope it helps!