How to create custom pages in .Net Maui?

Question

I have a custom page template defined as follows:

Page1:

    <?xml version="1.0" encoding="utf-8" ?>
    <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 x:Class="MyApp.Resources.Controls.Page1"             
                 Title="Page1">
        
        <ContentPage.ControlTemplate>
            <ControlTemplate>
                <Grid RowDefinitions="auto,*">
                    <Label Text="Label 1" Grid.Row="0">

                    <!-- Content of page 1 -->
                    <ContentPresenter Grid.Row="1" />                
                </Grid>
            </ControlTemplate>
        </ContentPage.ControlTemplate>
    </ContentPage>

All the pages inheriting from Page1, have "Label 1" . So this is working fine.

Now I need to create a new custom page inherting from Page1 . Basically adding new elements to the template and keep what is already in Page1.

Page2:

    <?xml version="1.0" encoding="utf-8" ?>
    <Controls:Page1 xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 x:Class="MyApp.Resources.Controls.Page2"     
                 xmlns:Controls="clr-namespace:MyApp.Resources.Controls"               
                 Title="Page2">

        <Controls:Page1.ControlTemplate>
            <ControlTemplate>
                <Grid RowDefinitions="auto,*" >   
                    <Label Text="Label 2" Grid.Row="0">
                    
                    <!-- Content of page 2 -->
                    <ContentPresenter Grid.Row="1"/>
                </Grid>
            </ControlTemplate>
            
        </Controls:Page1.ControlTemplate>
    </Controls:Page1>   

Now the pages inheriting from Page2 don't have "Label 1" . They have only "Label 2". While I'm expecting these pages to have both "Label 1" and "Label 2" .

How can I solve that?

Answer 1

Short version of what you can do:

1. Make custom control class (lets say in namespace Controls), inheriting ContentView

   public class MyControl: ContentView

2. In ResourceDictionary, add control template, and inside it, add your VisualElements.

   < ControlTemplate x:Key="MyControlTemplate" >... < /ControlTemplate >

3. In your View, add your control:

   < controls:MyControl ControlTemplate="{StaticResource MyControlTemplate}" />

Where controls is:

xmlns:controls="clr-namespace:MyNamespace.Controls"

And now your user interface can be reused in every page you want. (And bind commands/properties to it, use different templates, etc...)

Best part is that you make changes at one place, and it is changed across your whole project.

Answer 2

Your solution works fine. Modify page2 as a standard page and inherit as said page1. Now Page2 will show both labels Label 1 and Label 2.

<Controls:Page1 x:Class="MyApp.Resources.Controls.Page2" 
                Title="Page2">

    <Grid RowDefinitions="auto,*" >   
        <Label Text="Label 2" Grid.Row="0">
             
        <!-- more xaml here -->       
    </Grid>
</Controls:Page1>