NavigationBar Title View in Xamarin Forms 3.2.0

We are here to discuss navigation bar title view in xamarin forms. This feature is released in xamarin forms 3.2.0. Before this release we only have a single property of title in pages and this title is shown in navigation bar of a page. But after release of xamarin forms 3.2.0 now we have two property we can set simple title in navigation bar and we can also set a view in navigation bar.

Let’s make a simple view and use it in our navigation bar.

In this example we are going to make a content view which contain a grid and frames inside it and use this content view in our navigation page.

Add a new content view in your application than use this as our Title View to be displayed in our navigation bar.

Xaml of View:

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="XamarinWeb.NavigatoinView">
<ContentView.Content>
<Grid HorizontalOptions="Center">
<Frame Grid.Column="0" BackgroundColor="White" >
<Frame.Content>
<Label Text="Welcome" TextColor="Black"></Label>
</Frame.Content>
</Frame>
<Frame Grid.Column="1" BackgroundColor="BurlyWood" >
<Frame.Content>
<Label Text="To"></Label>
</Frame.Content>
</Frame>
<Frame Grid.Column="2" BackgroundColor="Pink" >
<Frame.Content>
<Label Text="XamarinWeb"></Label>
</Frame.Content>
</Frame>
</Grid>
</ContentView.Content>
</ContentView>

Xaml of our Navigation Page:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:XamarinWeb"
x:Class="XamarinWeb.MainPage"
NavigationPage.TitleView="{local:NavigatoinView}">

</ContentPage>

NavigationPage.TitleView=”{local:NavigatoinView}”

This TitleView is coming from xml namespace named as local which is defined in a line above this line. and this NavigationView is a content view whose xaml is given above.

This page is made as a navigation page from our App.xaml.cs page. You can make a navigation page from code or from xaml.

App.xaml.cs

 MainPage = new NavigationPage(new MainPage()) {BarBackgroundColor=Color.Black};

Let’s view output of our TitleView.

Output:

So this is our final navigation bar which contains a title view inside it. This is something very nice and useful as compare to a simple title which we use previously.

 

XamarinWeb Founder | MVP – C-SharpCorner | Xamarin Forms Developer

Leave a Reply

Your email address will not be published. Required fields are marked *