Using already existing templates

Introduction

First of all, you have to understand each file in template's directory:

• .xaml and .xaml.cs: same as usual, main frontend file and its .cs file resp. Technically .xaml.cs file doesn't do anything, you don't have to use it.

• .cs: class, that utilizes the template and sets it up for you to use.

To make a page from template you will only have to use the class in .cs file.

.xaml of your page

General usage of templates will be similar in each case (assuming, that all templates are written correctly, more - Create your own template).

First of all, you define root tag:

<?xml version="1.0" encoding="utf-8" ?>
<template:|ClassName| xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                      xmlns:template="clr-namespace:PlutoFramework.Templates.|DirName|"
                      x:Class="|PathToNamespace|">
</template:|ClassName|>

You may add other properties, this is the bare minimum required.

Where |ClassName| is the template's class (Introduction) and |DirName| is name of the template directory.

You need xmlns, xmlns:x, x:Class properties as always, but additionally you need xmlns:template to import template's namespace.

Next, insert blocks inside of the root tag:

Blocks are inner tags of each template, that are defined in it. You can change contents of those blocks, therefore using template as you wish. You can modify none, one or more blocks in the same file.

<template:|ClassName|.|BlockName|>
    <!-- Content you want to put in the block -->
</template:|ClassName|.|BlockName|>

|BlockName| is selected block's name.

Also main content block can be specified in template, then content, that you put directly into the root tag's content and it will be shown in main content block.

Example

SettingsPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<template:PageTemplate xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                       xmlns:settings="clr-namespace:PlutoFramework.Components.Settings"
                       xmlns:template="clr-namespace:PlutoFramework.Templates.PageTemplate"
                       x:Class="PlutoFramework.Components.Settings.SettingsPage"
                       Title="Settings">
    <VerticalStackLayout HorizontalOptions="Center"
                         Padding="20, 10, 20, 100"
                         Spacing="15">

        <!-- ... -->
    </VerticalStackLayout>
</template:PageTemplate>

The following code is equivalent to this, as it used main content block, that was mentioned before:

<?xml version="1.0" encoding="utf-8" ?>
<template:PageTemplate xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                       xmlns:settings="clr-namespace:PlutoFramework.Components.Settings"
                       xmlns:template="clr-namespace:PlutoFramework.Templates.PageTemplate"
                       x:Class="PlutoFramework.Components.Settings.SettingsPage"
                       Title="Settings">
    <template:Pagetemplate.MainContent>
        <VerticalStackLayout HorizontalOptions="Center"
                             Padding="20, 10, 20, 100"
                             Spacing="15">

            <!-- ... -->

        </VerticalStackLayout>
    </template:Pagetemplate.MainContent>
</template:PageTemplate>

.xaml.cs file of your page

You just make regular class for .xaml but the only difference is that this class inherits from the template class.

namespace <your_namespace>;

public partial class <your_class_name> : <template_class>
{
    public <your_class_name>()
    {
        InitializeComponent();
    }
}

After that you just add everything you need for that page as usual.

Example

using PlutoFramework.Components.CustomLayouts;
using PlutoFramework.Components.Kilt;
using PlutoFramework.Components.Credits;
using PlutoFramework.Model;
using PlutoFramework.Model.SQLite;
using PlutoFramework.View;
using PlutoFramework.Templates.PageTemplate;

namespace PlutoFramework.Components.Settings;

public partial class SettingsPage : PageTemplate
{
    public SettingsPage()
    {
        InitializeComponent();

        BindingContext = new SettingsViewModel();
    }
    
    // Other methods
}