Xamarin.Forms - Custom TitleView

Introduction

 
Xamarin.Forms code runs on multiple platforms - each of which has its own filesystem. This means that reading and writing files is most easily done using the native file APIs on each platform. Alternatively, embedded resources are a simpler solution to distribute data files with an app.
 
Xamarin.Forms - Custom TitleView
 
Prerequisites
  • Visual Studio 2017 or later (Windows or Mac)

Setting up a Xamarin.Forms Project

 
Start by creating a new Xamarin.Forms project. You wíll learn more by going through the steps yourself.
 
Create a new or existing Xamarin forms(.Net standard) Project. with Android or iOS Platform.
 
Xamarin.Forms - Custom TitleView
 
Simple Title
  1. <?xml version="1.0" encoding="utf-8"?>    
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"    
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"    
  4.              xmlns:d="http://xamarin.com/schemas/2014/forms/design"    
  5.              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    
  6.              mc:Ignorable="d"    
  7.              x:Class="XamarinApp.MainPage"    
  8.              Title="My Page">    
  9.     
  10.     <StackLayout Margin="0,100,0,0" VerticalOptions="StartAndExpand">    
  11.         <Image VerticalOptions="Center" Source="xamarinmonkeysbanner.png"/>    
  12.     </StackLayout>    
  13. </ContentPage>     
Xamarin.Forms - Custom TitleView
 

Simple TitleView with NavigationView

 
App.Xaml.cs
 
Your page must be a Navigation Page
  1. public App()    
  2.        {    
  3.            InitializeComponent();    
  4.            MainPage = new NavigationPage(new MainPage());    
  5.        }    
Here, we are going to use NavigationPage,TitleView. You can use this for Custom TitleView.
 
MainPage.Xaml
  1. <?xml version="1.0" encoding="utf-8"?>    
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:d="http://xamarin.com/schemas/2014/forms/design" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="XamarinApp.MainPage">    
  3.     
  4.     <NavigationPage.TitleView>    
  5.         <StackLayout HorizontalOptions="Center" VerticalOptions="Center"  Orientation="Horizontal">    
  6.             <Label HorizontalOptions="Center" VerticalTextAlignment="Center" Text="MyPage" FontSize="Small"/>    
  7.                 
  8.         </StackLayout>    
  9.     </NavigationPage.TitleView>    
  10.     
  11.     
  12.     <StackLayout Margin="0,100,0,0" VerticalOptions="StartAndExpand">    
  13.         <Image VerticalOptions="Center" Source="xamarinmonkeysbanner.png"/>    
  14.     </StackLayout>    
  15. </ContentPage>     
Xamarin.Forms - Custom TitleView
 
Title with Icon
 
Now, added Title with Image in TitleView
  1. <?xml version="1.0" encoding="utf-8"?>    
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:d="http://xamarin.com/schemas/2014/forms/design" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="XamarinApp.MainPage">    
  3.     
  4.     <NavigationPage.TitleView>    
  5.         <StackLayout HorizontalOptions="Center" VerticalOptions="Center"  Orientation="Horizontal">    
  6.             <Label HorizontalOptions="Center" VerticalTextAlignment="Center" Text="Refresh" FontSize="Small"/>    
  7.             <Image VerticalOptions="Center"  HorizontalOptions="End" Source="sync.png"/>    
  8.         </StackLayout>    
  9.     </NavigationPage.TitleView>    
  10.     
  11.     
  12.     <StackLayout Margin="0,100,0,0" VerticalOptions="StartAndExpand">    
  13.         <Image VerticalOptions="Center" Source="xamarinmonkeysbanner.png"/>    
  14.     </StackLayout>    
  15. </ContentPage>     
Xamarin.Forms - Custom TitleView
 
TitleView with SearchView
 
You can add SearchBar also in the TitleView
  1. <?xml version="1.0" encoding="utf-8"?>    
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"    
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"    
  4.              xmlns:d="http://xamarin.com/schemas/2014/forms/design"    
  5.              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    
  6.              mc:Ignorable="d" x:Class="XamarinApp.MainPage">    
  7.     
  8.     <NavigationPage.TitleView>    
  9.        <SearchBar Placeholder="Search items..."    
  10.            HorizontalTextAlignment="Center"    
  11.            FontSize="Medium"    
  12.            />    
  13.     </NavigationPage.TitleView>    
  14.     <StackLayout Margin="0,100,0,0" VerticalOptions="StartAndExpand">    
  15.             
  16.         <Image VerticalOptions="Center" Source="xamarinmonkeysbanner.png"/>    
  17.     </StackLayout>    
  18. </ContentPage>      
Xamarin.Forms - Custom TitleView
 
Custom TitleView
 
Here, we are going to create a common TitleView, you can reuse your Content pages.
 
TitleView.Xaml
  1. <?xml version="1.0" encoding="UTF-8"?>    
  2. <ContentView xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="XamarinApp.CustomView.TitleView">    
  3.     <ContentView.Content>    
  4.         <Label HorizontalOptions="Center" Text="Xamarin Monkeys"/>    
  5.     </ContentView.Content>    
  6. </ContentView>     
Consume TitleView
 
Now, Consume the TitleView from your custom files folder.
  1. <?xml version="1.0" encoding="utf-8"?>    
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"    
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"    
  4.              xmlns:d="http://xamarin.com/schemas/2014/forms/design"    
  5.              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    
  6.              xmlns:TitleView="clr-namespace:XamarinApp.CustomView"    
  7.              mc:Ignorable="d" x:Class="XamarinApp.MainPage">    
  8.     
  9.     <NavigationPage.TitleView>    
  10.       <TitleView:TitleView/>    
  11.     </NavigationPage.TitleView>    
  12.     
  13.     
  14.     <StackLayout Margin="0,100,0,0" VerticalOptions="StartAndExpand">    
  15.             
  16.         <Image VerticalOptions="Center" Source="xamarinmonkeysbanner.png"/>    
  17.     </StackLayout>    
  18. </ContentPage>    
Xamarin.Forms - Custom TitleView
 
I hope you have understood  how to create a custom TitleView in Xamarin.Forms.
 
Thanks for reading. Please share your comments and feedback.
 
Happy Coding :)