0

I wanted to do the same as this question, but for .NET MAUI: Same header & footer in all WPF windows

It is same header and footer for all windows.

tbear
  • 95
  • 1
  • 8
  • 1
    Your question seems to be self-contained, not just a reference to another question. Regardless, create a base page that includes the header and footer, and then have all of your pages inherit from that base page – Jason Dec 03 '22 at 17:10
  • can you give me an example? – tbear Dec 03 '22 at 17:19
  • 1
    https://thewissen.io/create-a-kickass-banking-app-using-a-basepage-in-xamarin/ – Jason Dec 03 '22 at 17:21
  • Thank you. that was what I was looking for. If you make it an answer, I will accept it. – tbear Dec 03 '22 at 18:40

2 Answers2

2

I found a better way to do it using control templates.

PageLayout.xaml file:

<ContentPage ...>
    <ContentPage.Resources>
        <ControlTemplate x:Key="PageLayoutTemplate">
            <Grid RowDefinitions="Auto,*,Auto">

                <!--Header-->
                <Grid>
                    <!--header content-->
                </Grid>

                <!--Content-->
                <ContentPresenter Grid.Row="1"/>

                <!--Footer-->
                <Grid Grid.Row="2">
                    <!--footer content-->
                </Grid>

            </Grid>
        </ControlTemplate>
    </ContentPage.Resources>
</ContentPage>

SubView.xaml file:

<PageLayout ... 
            ControlTemplate="{StaticResource PageLayoutTemplate"}>
    <Grid>
        <!--Main content-->
    </Grid>
</PageLayout>

Why this is better:

  1. No code behind
  2. Binding is easier thanks to template binding
  3. A alternate template can be easily added

Reference: https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/controltemplate?view=net-maui-7.0

tbear
  • 95
  • 1
  • 8
1

If you don't want to click the link @Jason provided in the comment, here is a shortened version.

PageLayout.xaml file:

<ContentPage ...>

   <Grid RowDefinitions="Auto,*,Auto">

        <!--Row 1 : Header-->
        <Grid>
            <!--header content-->
        </Grid>

        <!--Row 2 : Content-->
        <Grid Grid.Row="1"
              Name="PrimaryPageLayout">
        </Grid>

        <!--Row 3 : Footer-->
        <Grid Grid.Row="2">
            <!--footer content-->
        </Grid>
    
    </Grid>
</ContentPage>

PageLayout.xaml.cs file :

public partial class PageLayout : ContentPage
{
    public IList<IView> PageLayoutContent => PrimaryPageLayout.Children;

    public PageLayout()
    {
        InitializeComponent();
    }
}

SubView.xaml file:

<PageLayout ... >
    <views:PageLayout.PageLayoutContent>
        <!--Main content-->
    </views:PageLayout.PageLayoutContent>
</PageLayout>
tbear
  • 95
  • 1
  • 8