xamarin navigation bar not showing TitleView

4
votes

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?

3
xamlxamarinxamarin.forms
You can set a custom TitleView for a NavigationPage change the navigation event to Navigation.PushAsync(new NavigationPage(new MyGroups()));, can you see your custom title view now? – EvZ
@Evz sorry but know just the default bar with the default back arrow. – Mike
What is the targeting platform? – EvZ
@Evz Yes now (I change the call in the wrong spot ) But now I have two navigation bars one with arrow and one with my Title View. and if I set the NavigationPage.HasNavigationBar="false" then I just get the default one and the title view don't show. I need to do some more reading on this because I don't seem to understand whats going on LOL. – Mike
I will try to guide you on that by converting my comment to a proper answer. – EvZ

3 Answers

2
votes

As XAML states:
<NavigationPage.TitleView> .. </NavigationPage.TitleView>

You could set a totally custom View as a NavigationBar, however, this is possible only on NavigationPages. Your code is partly correct because you set the NavigationPage.TitleView not on a NavigationPage:
Navigation.PushAsync(new MyGroups())

If you will navigate to a NavigationPage:
Navigation.PushAsync(new NavigationPage(new MyGroups()))

You should see your custom NavigationPage.TitleView. The outcome, however, will depend on your current navigation model and you may end up with multiple navigation bars. That is because you will nest a NavigationPage within another NavigationPage.

I would strongly recommend reading the official documentation on this topic so it would become clear for you.

6
votes

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>
1
votes

You can also set Navigation with MainPage like

MainPage = new NavigationPage(new PageName());