Question 330159 in Visual Studio Code Question posted in
View the official documentation.

Visual Studio Code – 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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    @Liqun Shen-MSFT

    I have tried the test solution suggested in your post and it works as expected. Then i made some changes in it as follows to show icon and handle event,

    <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="Hello" VerticalOptions="Start" FontSize="Medium" FontAttributes="Bold" TextColor="Black"/>

        <Image Grid.Row="0" Grid.Column="1" VerticalOptions="Start" HorizontalOptions="End" Source="cart.png" WidthRequest="40" HeightRequest="40">
            <Image.GestureRecognizers>
                <TapGestureRecognizer Tapped="OnCartTapped"/>
            </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="OnCartTapped"/>
            </Frame.GestureRecognizers>
            <Label  x:Name="BadgeLabel" Text="8" TextColor="White" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" HeightRequest="20"/>
        </Frame>
    </Grid>
</Shell.TitleView>

    But it results in error while deployment of application on iphone simulator, error is as follows,

    enter image description here

    after we close the error message application runs and title view works with icon and event is working.

    enter image description here

    What i am doing wrong here?


  2. 0

    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!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search