> For the complete documentation index, see [llms.txt](https://plutolabs.gitbook.io/plutoframework/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://plutolabs.gitbook.io/plutoframework/make-your-application/templates/using-already-existing-templates.md).

# 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](/plutoframework/make-your-application/templates/create-your-own-template.md)).

#### First of all, you define root tag:<br>

{% code fullWidth="false" %}

```xml
<?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|>
```

{% endcode %}

{% hint style="info" %}
You may add other properties, this is the bare minimum required.
{% endhint %}

Where **|ClassName|** is the template's class ([#introduction](#introduction "mention")) 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:

{% hint style="info" %}
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.
{% endhint %}

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

|BlockName| is selected block's name.

{% hint style="info" %}
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.
{% endhint %}

#### Example

{% code title="SettingsPage.xaml" %}

```xml
<?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>


```

{% endcode %}

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

```xml
<?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.

```csharp
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

```csharp
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
}
```