How to add a grid view under Master-Detail detail page in Xamarin Forms?

Question

I'm trying to add a grid view at the bottom of the screen containing 'Current Playing' information about a media being played in a media player. The problem is that I want this view to be there no matter what is the page visible.

The main layout is a Master-Detail page for the navigation menu panel, where the detail page should contain everything.

The detail page can be a content page, a navigation page (mostly) or a modal content page. However, if I might only choose one, I would choose it to be a navigation page.

So, simply I want to do something like this:

<MasterDetailPage.Detail>
        <ContentPage>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="auto"/>
                </Grid.RowDefinitions>

                <Page x:Name="viewPort" Grid.Row="0">
                    <!--This page source is dynamically set from the code behind...-->
                </Page>

                <Grid Grid.Row="2">
                    <!--Here should be the rest of my grid structure...-->
                </Grid>
            </Grid>
        </ContentPage>
</MasterDetailPage.Detail>

But wrapping a page inside another view/page is not possible, I tried also modifying the Master-Detail page control template to add that grid at the bottom of the detail page and display whatever page above it, but no luck in finding the original template or even setting a template for Master-Detail layout...

I'm new to Xamarin but somewhat experienced with c# and xaml, any help is really appreciated.

Wendy Zang - MSFT Wendy Zang - MSFT · Accepted Answer · 2020-03-30T06:18:33

You could use ContentPresenter with control template.

Create a control template in App.xaml> Application.Resources> ResourceDictionary.

  <!--  Grid Template -->
        <ControlTemplate x:Key="GridTemplate">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <ContentPresenter Grid.Row="0" />
                <Label
                    Grid.Row="1"
                    BackgroundColor="Accent"
                    Text="Grid Template" />
            </Grid>
        </ControlTemplate>

And then use it in detail page.

ControlTemplate="{StaticResource GridTemplate}"

I have uploaded the project on GitHub for your reference. https://github.com/WendyZang/Test/tree/master/ControlTemplate_ContentPresenter/MasterDetailPageDemo

Updated:

For data binding of control template, you could use TemplateBinding.

Create a AppViewModel:

 public class AppViewModel
{
    public string Name { get; set; } = "Name_A";

    public AppViewModel()
    {

    }
}

App.xml:

   <ControlTemplate x:Key="GridTemplate">

            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>

                <ContentPresenter Grid.Row="0"  />
                <Label Grid.Row="1" BackgroundColor="Accent" Text="{TemplateBinding BindingContext.Name}" />

            </Grid>
        </ControlTemplate>

Set the binding in each page which use the control template.

  this.BindingContext = new AppViewModel();

How to add a grid view under Master-Detail detail page in Xamarin Forms?

1 Answers