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>
Advertisement

Posted

in

by

Tags:

Comments

2 responses to “Xamarin Forms: Add UI controls to Navigation Bar using Title View”

  1. stevechadbourne Avatar
    stevechadbourne

    You cannot add more than one control to a title view, but that control can be a container, like a grid, which can contain a lot of controls.

    Liked by 1 person

    1. Divikiran Avatar

      Thanks, Steve. I made updated the post accordingly. I was not thinking about Gird when writing blog 🙂

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: