How can I change the NavigationPage TitleView in Xamarin Forms MasterDetailPage

0
votes

By default a MasterDetailPage adds the Title of the NavigationPage to the top of the view. I tried a simple experiment but it didn't work. It still renders the title instead of replacing it with an image. Is there a simple way to override the title area?

<MasterDetailPage 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"
            xmlns:views="clr-namespace:MyApp.Views"
            x:Class="MyApp.Views.MainPage">

    <MasterDetailPage.Master>
        <views:MenuPage />
    </MasterDetailPage.Master>

    <MasterDetailPage.Detail>
        <NavigationPage>
        <NavigationPage.TitleView>
            <StackLayout>
                <Image Source="MyAppLogo.png"  HorizontalOptions="CenterAndExpand" WidthRequest="50" HeightRequest="50" Aspect="AspectFill" />
            </StackLayout>
        </NavigationPage.TitleView>
            <NavigationPage.Icon>
                <OnPlatform x:TypeArguments="FileImageSource">
                    <On Platform="iOS" Value="tab_feed.png"/>
                </OnPlatform>
            </NavigationPage.Icon>
            <x:Arguments>
                <views:JobsPage />
            </x:Arguments>
        </NavigationPage>
    </MasterDetailPage.Detail>

</MasterDetailPage>

Update

So I discovered that each content page has to individually override the NavigationPage.TitleView. But the goal is to have the same title bar across all content pages. So I followed the recomendation here: https://forums.xamarin.com/discussion/167655/it-is-possible-to-creatre-a-navigationpage-titleview-for-all-contentpage. I've implemented this however I'm not seeing anything in the title bar at all. What am I doing wrong now?

App.xaml

<Application 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"
             xmlns:local="clr-namespace:MyApp.Views"
             mc:Ignorable="d"
             x:Class="MyApp.App">

    <Application.Resources>
        <ResourceDictionary>
            <!--Global Styles-->
            <Color x:Key="NavigationPrimary">#2196F3</Color>
            <Color x:Key="NavbarBackground">Black</Color>
            <Style TargetType="NavigationPage">
                <Setter Property="BarBackgroundColor" Value="{StaticResource NavbarBackground}" />
                <Setter Property="BarTextColor" Value="White" />
            </Style>

            <local:CustomTitleView x:Key="CustomTitleView"/>
            <Style TargetType="ContentPage" x:Key="CustomTitle">
                <Setter Property="NavigationPage.TitleView" Value="{StaticResource CustomTitleView}"/>
            </Style>
        </ResourceDictionary>
    </Application.Resources>

</Application>

CustomTitleView.xaml

<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="BuildPro.Views.CustomTitleView">
    <ContentPage.Content>
        <StackLayout>
            <Label Text="Hello world!" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

MyContentPage.xaml

<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="MyApp.Views.MyPage"
             xmlns:vm="clr-namespace:MyApp.ViewModels"
             Style="{StaticResource CustomTitle}" >

    <ContentPage.BindingContext>
        <vm:MyViewModel />
    </ContentPage.BindingContext>

    <ContentPage.Content>
        <StackLayout>
            <Label Text="Welcome to the Xamarin-Forms!"
                VerticalOptions="CenterAndExpand" 
                HorizontalOptions="CenterAndExpand" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Update 2

I goofed up on the template for the title bar. Should have been a ContentView instead of ContentPage. Totally different class. Now this works:

CustomTitleView

<ContentView 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="MyApp.Views.CustomTitleView">
  <ContentView.Content>
        <StackLayout>
            <Label Text="Hello world!" TextColor="AliceBlue" />
        </StackLayout>
    </ContentView.Content>
</ContentView>
2
xamarinxamarin.formsxamarin.androidxamarin.ios

2 Answers

1
votes

You should add NavigationPage.TitleView in Xaml of each Detail Page (Usually Content Page), not in Xaml of MasterDetailPage.

Such as the Xaml of views:JobsPage can be modified as follow :

<?xml version="1.0" encoding="utf-8" ?>
<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="AppFormsMaster.Views.ItemsPage"
             Title="{Binding Title}"
             x:Name="BrowseItemsPage">

    <NavigationPage.TitleView>
        <StackLayout>
            <Image Source="MyAppLogo.png"  HorizontalOptions="CenterAndExpand" WidthRequest="50" HeightRequest="50" Aspect="AspectFill" />
        </StackLayout>
    </NavigationPage.TitleView>

    <ContentPage.Content>
         //...
         //Content of Content Page    
         //...
    </ContentPage.Content>
</ContentPage>

Then it will show the NavigationPage.TitleView .

0
votes

For xamarin shell it should be Shell.TitleView

<Shell.TitleView>
        <StackLayout Margin="10,10,0,10" Orientation="Horizontal">
            <Image
                BackgroundColor="LightBlue"
                HeightRequest="25"
                WidthRequest="25" />
            <SearchBar HorizontalOptions="FillAndExpand" />
            <Image
                BackgroundColor="LightYellow"
                HeightRequest="25"
                WidthRequest="25" />
        </StackLayout>
    </Shell.TitleView>