Fixed header for list and detail page. Xamarin Forms

Issue

I have a Xamarin Forms app. Inside I have a page with a ListView and a header (a grid with a few rows). This header should the same for the detail page. The detail page is navigated to by clicking on an item in the list view.

The header for both of them is totally the same. So I want to make the header static and while changing from list to detail I want to change only the content below the header while the header stays in the same place).

If somebody did something like this before or knows a better way to do it - i will be very appreciate to get some ideas.

Solution

A ControlTemplate is exactly what you need. It lets you set up a layout that can then get added to when the ControlTemplate is consumed by a ContentView.

<ControlTemplate x:Key="Template">
    <Grid>
        <!-- Set up your grid -->
    </Grid>
    <!-- When this control template is used by a 
         ContentView, the layout in the ContentView 
         will appear where the below ContentPresenter is -->
    <ContentPresenter ... />
</ControlTemplate>

Then to use it in a ContentView (It must be in a ContentView, it cannot be directly in a ContentPage)

<ContentView ControlTemplate="{StaticResource Template}">
   <!-- The below will appear where ContentPresenter element is in the
        ControlTemplate -->
    <ListView ...>
       ...
    </ListView>
</ContentView>

Answered By - jgoldberger - MSFT