How to put a view in the title bar of MasterDetailView

CaseCase USMember ✭✭✭
edited January 2017 in Xamarin.Forms

How can I put a view inside the title bar of a MasterDetailView NavigationPage?
I want to use xaml as much as possible.

I have a MasterDetailView which shows a NavBarView as the Master page, a MainView as the Detail page.
The MainView then shows various content pages which change per user action.

I'd like a static title view where I can display various stats to the user.

My MasterDetailView.xaml

<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"             
                  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"       
                  x:Class="MyApp.Views.MasterDetailView"
                  IsGestureEnabled="True"
                  MasterBehavior="Popover"
                  Title="Master Detail View">
  <MasterDetailPage.Master>
  </MasterDetailPage.Master>
  <MasterDetailPage.Detail>
  </MasterDetailPage.Detail>  
</MasterDetailPage>

My MasterView.xaml

<?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="MyApp.Views.MasterView"
             Title="Master View">  
  <ContentPage.Content>
    <StackLayout Orientation="Vertical">
      <Label Text="{Binding Item1}"/>
      <Button Text="MasterView Options" Command="{Binding Option1Command}"/>
    </StackLayout >
  </ContentPage.Content>  
</ContentPage>

My DetailView.xaml

<?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:views="clr-namespace:MyApp.Views"
             x:Class="MyApp.Views.DetailView"
             Title="Detail View">
  <ContentPage.ToolbarItems>
    <ToolbarItem Text="Detail View Options" Icon="options_dots.png" Order="Primary"
                 Command="{Binding OptionsCommand}" />
  </ContentPage.ToolbarItems>     
  <ContentPage.Content>  
  </ContentPage.Content>      
</ContentPage>

My TitleBarView.xaml

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:views="clr-namespace:MyApp.Views"
             x:Class="MyApp.Views.TitleBarView">
  <ContentView.Content> 
    <StackLayout Orientation="Horizontal">
      <Label Text="{Binding Item1}"/>
      <Button Text="TitleBar Options" Command="{Binding OptionsCommand}"/>
    </StackLayout>
  </ContentView.Content>
</ContentView>

My Page1View.xaml

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:views="clr-namespace:MyApp.Views"
             x:Class="MyApp.Views.Page1View">
  <ContentView.Content> 
    <StackLayout Orientation="Vertical">
      <Label Text="{Binding Info}"/>
      <Button Text="Go To Page 2" Command="{Binding GoToPage2Command}"/>
    </StackLayout >
  </ContentView.Content>
</ContentView>

My Page2View.xaml

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:views="clr-namespace:MyApp.Views"
             x:Class="MyApp.Views.Page2View">  
  <ContentView.Content>   
    <StackLayout Orientation="Vertical">
      <Label Text="{Binding Info}"/>
      <Button Text="Go To Page 1" Command="{Binding GoToPage1Command}"/>
      <Button Text="Show Popup" Command="{Binding ShowPopupCommand}"/>
    </StackLayout >
  </ContentView.Content>
</ContentView>

I am controlling navigation throgh a navigation controller

public NavigationController()
{
    masterDetailView = new MasterDetailView();
    masterDetailViewModel = new MasterDetailViewModel();
    masterDetailView.BindingContext = masterDetailViewModel;

    masterView = new MasterView();
    masterViewModel = new MasterViewModel();
    masterView.BindingContext = masterViewModel;

    detailView = new DetailView();
    detailViewModel = new DetailViewModel();
    detailView.BindingContext = detailViewModel;

    titleBar = new TitleBarView();
    titleBarVM = new TitleBarViewModel();
    titleBar.BindingContext = titleBarVM;

    page1View = new Page1View();
    page1ViewModel = new Page1ViewModel();
    page1View.BindingContext = page1ViewModel;

    page2View = new Page2View();
    page2ViewModel = new Page2ViewModel();
    page2View.BindingContext = page2ViewModel;

    detailView.Content = new StackLayout()
    {
        Children = { page1View }
    };

    currentView = page1View;

    masterDetailView.Master = masterView;
    masterDetailView.MasterBehavior = MasterBehavior.Popover;
    masterDetailView.Detail = new NavigationPage(detailView);
}

public void GoToPage1()
{
    if (currentView != page1View)
    {
        StackLayout sl = (StackLayout)detailView.Content;
        sl.Children.Clear();
        sl.Children.Add(page1View);
    }
}

public void GoToPage2()
{
    if (currentView != page2View)
    {
        StackLayout sl = (StackLayout)detailView.Content;
        sl.Children.Clear();
        sl.Children.Add(page2View);
    }
}
Sign In or Register to comment.