Xamarin Forms: Add UI controls to Navigation Bar using Title View

Ever wonder, whether you can add UI controls in navigation bar. I had exact requirement with one of my client. My immediate response was “I will see what I can do about it”, as I never had such requirement ever.

After bit of investigation, from Xamarin 3.2 onwards, this feature was introduced. You can actually add pretty much any UI control to navigation bar.

Title View

Title View is the tag that you can use to customise the navigation bar with any UI control. This feature can be add in the content page as shown 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="Test.Pages.FormsCreatePage" Title="{Binding Title}">

    <NavigationPage.TitleView>
        <Picker x:Name="projectSelector" />
    </NavigationPage.TitleView>

    <ContentPage.Content>

    </ContentPage.Content>
</ContentPage>

In the above example, I am add picker controls that will show list of names.

Below are the screenshots for this feature

Limitation is, we cannot add more then one control, if you try you will get below error

But we can add multi UI controls with the help of controls like Stack Layout’s and Grid’s as shown below, but obviously there is a limitation of how many controls you can fit horizontally into navigation bar.

<NavigationPage.TitleView>
    <Grid>
        <Picker x:Name="projectSelector" Grid.Row="0" Grid.Column="0" />
        <Entry Placeholder="Enter name" Grid.Row="0" Grid.Column="1" />
    </Grid>
</NavigationPage.TitleView>