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">
  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">
  4. <NavigationPage.TitleView>
  5. <StackLayout HorizontalOptions="Center" VerticalOptions="Center" Orientation="Horizontal">
  6. <Label HorizontalOptions="Center" VerticalTextAlignment="Center" Text="MyPage" FontSize="Small"/>
  8. </StackLayout>
  9. </NavigationPage.TitleView>
  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">
  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>
  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">
  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">
  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">
  9. <NavigationPage.TitleView>
  10. <TitleView:TitleView/>
  11. </NavigationPage.TitleView>
  14. <StackLayout Margin="0,100,0,0" VerticalOptions="StartAndExpand">
  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 :)