xamarin navigation bar not showing TitleView

Question

New to Xamarin and I'm trying to create a custom navigation bar in my Cross-Platform App. After some reading I found that I might be able to use the the title-view component in my xaml page file like below.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="amici.MyGroups">
    <NavigationPage.TitleView>
        <StackLayout Orientation="Horizontal" VerticalOptions="Center" Spacing="10">
            <Label HorizontalOptions="StartAndExpand" Text="Left"/>
            <Label HorizontalOptions="CenterAndExpand" Text="Center"/>
            <Label HorizontalOptions="EndAndExpand" Text="Right"/>
        </StackLayout>
    </NavigationPage.TitleView>

    <ContentPage.Content>
        <ScrollView>
            <Grid x:Name="grid1">
                <StackLayout>
                        <Label Text="Welcome"
                        VerticalOptions="CenterAndExpand" 
                        HorizontalOptions="CenterAndExpand" />
                    </StackLayout>
                   <ActivityIndicator x:Name="WaitIcon"  IsRunning="{Binding IsBusy}" VerticalOptions="Center" HorizontalOptions="Center" />
            </Grid>
        </ScrollView>
    </ContentPage.Content>
</ContentPage>

I navigate to my page "MyGroups" like this : Navigation.PushAsync(new MyGroups());.

However, the only thing that shows is the default navigation page with the back icon arrow?

obliviously I missing something, or I don't understand something. Does this need to be done at the application level?

Answer 1

If you are using Shell in your Xamarin.Forms app than you will have to use <Shell.TitleView> instead of <NavigationPage.TitleView>. Below code worked for me...

<Shell.TitleView>
    <Label Text="QR Code" HorizontalTextAlignment="End" Margin="0,0,10,0" Padding="0" VerticalTextAlignment="Center" TextColor="White" FontSize="20"/>
</Shell.TitleView>