### Build IHost

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Hosting/HowTo-HostingSetup.md

Finalize the setup by building the host and assigning it to the Host property.

```cs
protected override void OnLaunched(LaunchActivatedEventArgs e)
{
    var appBuilder = this.CreateBuilder(args)
    .Configure(host => {
        // Configure the host builder
    });

    MainWindow = builder.Window;

    Host = appBuilder.Build();
    ...
}
```

--------------------------------

### Install and Run Kiota CLI

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Http/HowTo-Kiota.md

Install the global Kiota tool and generate a C# client from an OpenAPI specification.

```bash
dotnet tool install --global Microsoft.OpenApi.Kiota
```

```bash
# From a static spec file
kiota generate --openapi PATH_TO_YOUR_API_SPEC.json --language CSharp --class-name MyApiClient --namespace-name MyApp.Client.MyApi --output ./MyApp/Content/Client/MyApi
# OR directly from the running server’s Swagger endpoint
kiota generate --openapi http://localhost:5002/swagger/v1/swagger.json --language CSharp --class-name MyApiClient --namespace-name MyApp.Client.MyApi --output ./MyApp/Content/Client/MyApi
```

--------------------------------

### Start IHost in OnLaunched

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Hosting/HostingOverview.md

Execute host startup within the application launch lifecycle.

```csharp
protected override void OnLaunched(LaunchActivatedEventArgs e)
{
    ...
    await Task.Run(() => Host.StartAsync());
}
```

--------------------------------

### Install Hosting Feature

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Hosting/HowTo-HostingSetup.md

Add the Hosting feature to the UnoFeatures property in your project file.

```diff
<UnoFeatures>
    Material;
+   Hosting;
    Toolkit;
    MVUX;
</UnoFeatures>
```

--------------------------------

### Initialize C# Markup Page

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Markup/HowTo-CustomMarkupProject.md

Example of setting up a MainPage using C# markup extensions for layout and data binding.

```csharp
using Microsoft.UI;
using Microsoft.UI.Text;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Media.Imaging;
using MySampleProject.Model;
using MySampleProject.ViewModel;
using System;

namespace MySampleProject;

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        //Create an ViewModel that load a list of samples
        DataContext = new ViewModelSample();

        //Set a ViewModel to the DataContext
        this.DataContext<ViewModelSample>((page, vm) => page
            .Background(ThemeResource.Get<Brush>("ApplicationPageBackgroundThemeBrush"))
            .Content(
                    new Grid()
                        .Style(GetGridStyle())
                        .RowDefinitions<Grid>("Auto, *")
                        .ColumnDefinitions<Grid>("2*, Auto, 2*")
                        .Background(new SolidColorBrush(Colors.Silver))
                        .Margin(50)
                        .Children(
```

--------------------------------

### Configure Authentication Provider

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Authentication/HowTo-Cookies.md

Initial setup of the IHostBuilder with a custom authentication provider.

```csharp
protected override void OnLaunched(LaunchActivatedEventArgs args)
{
    var builder = this.CreateBuilder(args)
        .Configure(host =>
        {
            host.UseAuthentication(auth =>
                auth.AddCustom(custom =>
                    custom.Login(
                        async (sp, dispatcher, tokenCache, credentials, cancellationToken) =>
                        {
                            var isValid = credentials.TryGetValue("Username", out var username) && username == "Bob";
                            return isValid ?
                            credentials : default;
                        })
            ));
        });
    ...
}
```

--------------------------------

### Create an Uno Platform app with the CLI

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/GettingStarted.md

Commands to install the Uno templates and generate a new project using the recommended preset.

```dotnetcli
dotnet new install Uno.Templates
```

```dotnetcli
dotnet new unoapp -o MyProject -preset recommended
```

--------------------------------

### Set Background via XAML

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Markup/HowTo-CreateMarkupProject.md

Equivalent XAML examples for setting background using Theme, Colors, and ARGB values.

```xml
<Grid
    Background="{ThemeResource ApplicationSecondaryForegroundThemeBrush}">
    <TextBlock
        Text="Hello Uno Platform"
        Padding="50"
        Margin="50"
        HorizontalAlignment="Right" />
</Grid>
```

```xml
<Grid
    Background="Silver">
    <TextBlock
        Text="Hello Uno Platform"
        Padding="50"
        Margin="50"
        HorizontalAlignment="Right" />
</Grid>
```

```xml
<Grid
    Background="#FFE9E9E9">
    <TextBlock
        Text="Hello Uno Platform"
        Padding="50"
        Margin="50"
        HorizontalAlignment="Right" />
</Grid>
```

--------------------------------

### Complete Visibility-Based Navigation Example

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Navigation/Walkthrough/UsePanel.md

A full implementation of a page using visibility-based region navigation.

```xml
<Page xmlns:uen="using:Uno.Extensions.Navigation.UI"
      Background="{ThemeResource MaterialBackgroundBrush}">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>

        <StackPanel Grid.Row="1"
                    HorizontalAlignment="Center"
                    Orientation="Horizontal">
            <Button Content="One"
                    uen:Navigation.Request="./One" />
            <Button Content="Two"
                    uen:Navigation.Request="./Two" />
            <Button Content="Three"
                    uen:Navigation.Request="./Three" />
        </StackPanel>

        <Grid uen:Region.Attached="True"
              uen:Region.Navigator="Visibility"
              Grid.Row="2">
            <Grid uen:Region.Name="One" Visibility="Collapsed">
                <TextBlock Text="One" FontSize="24" />
            </Grid>
            <Grid uen:Region.Name="Two" Visibility="Collapsed">
                <TextBlock Text="Two" FontSize="24" />
            </Grid>
            <Grid uen:Region.Name="Three" Visibility="Collapsed">
                <TextBlock Text="Three" FontSize="24" />
            </Grid>
        </Grid>
    </Grid>
</Page>
```

--------------------------------

### Implement MainPage with C# Markup and MVUX

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Markup/HowTo-CustomMarkupProject-MVUX.md

This example demonstrates the structure of a MainPage using C# Markup, including DataContext initialization and FeedView configuration.

```csharp
namespace MySampleProjectMVUX;
using Uno.Extensions.Reactive.UI;

public sealed partial class MainPage : Page
{
    public MainPage()
    {

        this.DataContext = new WeatherViewModel(new WeatherService());

        this.DataContext<WeatherViewModel>((page, vm) => page
            .Background(ThemeResource.Get<Brush>("ApplicationPageBackgroundThemeBrush"))
            .Content(
                new StackPanel()
                    .VerticalAlignment(VerticalAlignment.Center)
                    .HorizontalAlignment(HorizontalAlignment.Center)
                    .Children(
                        new TextBlock()
                            .Text("Hello Uno Platform!"),
                        new FeedView()
                            .Source(() => vm.CurrentWeather)
                            .Source(x => x.Bind(() => vm.CurrentWeather))

                            //You can use the Function
                            .DataTemplate((sample) => GetDataTemplate())

                            //Or you can use direct the Element
                            .ProgressTemplate<StackPanel>((sample) =>
                                new StackPanel().Children(
                                    new TextBlock().Text("Loading...")
                                )
                            )
                    )
            )
        );
    }
    //Using Template
    public StackPanel GetDataTemplate()
    {
        return new StackPanel()
                .Orientation(Orientation.Vertical)
                .Children(
                    new TextBlock()
                        .Margin(10)
                        //.DataContext(x => x.Bind("Data"))
                        //.Text(x => x.Bind("Temperature"))
                        .Text("Temperature")
                    //,
                    //new Button()
                    //  .Margin(10)
                    //  .Content("Refresh")
                    //  .Command(x => x.Bind("Refresh"))
                );
    }
}
```

--------------------------------

### Navigating via ViewModel

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Navigation/HowTo-DefineRoutes.md

Example of triggering navigation using a ViewModel type.

```csharp
_navigator.NavigateViewModelAsync<MainViewModel>(this);
```

--------------------------------

### Integrate SampleUserControl into pages

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Markup/HowTo-CustomMarkupProject-VisualStates.md

Examples of adding the custom UserControl to MainPage and SecondPage layouts.

```xml
<StackPanel HorizontalAlignment="Center"
    VerticalAlignment="Center">
    <Button Content="Go to Second Page" Click="navigationButton_Click"/>

    <local:SampleUserControl/>

</StackPanel>
```

```xml
<StackPanel>
    <utu:NavigationBar Content="Title Second Page"
                HorizontalAlignment="Left"
                VerticalAlignment="Top"/>
    <StackPanel HorizontalAlignment="Center"
        VerticalAlignment="Center">
        <Button Content="Go to Main Page" Click="navigationButton_Click"/>

        <local:SampleUserControl/>
    </StackPanel>
</StackPanel>
```

--------------------------------

### Full C# Markup MainPage Implementation

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Markup/HowTo-CreateMarkupProject.md

Example of a complete MainPage.cs file demonstrating nested layout elements and theme-based styling.

```csharp
using Microsoft.UI;

namespace MySampleProject;

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this
            .Background(ThemeResource.Get<Brush>("ApplicationPageBackgroundThemeBrush"))
            .Content(
                new StackPanel()
                .VerticalAlignment(VerticalAlignment.Center)
                .HorizontalAlignment(HorizontalAlignment.Center)
                .Children(
                    new Grid()
                        //Set Background from Theme
                        .Background(ThemeResource.Get<Brush>("ApplicationSecondaryForegroundThemeBrush"))
                        .Children(

                            new TextBlock()
                                .Text("Hello Uno Platform!")
                                .Padding(50)//Set some padding
                                .Margin(50)//Set some Margin
                                .HorizontalAlignment(HorizontalAlignment.Right)//Custom the Alignment

                        ),
                    new Grid()
                        //Set Background from Colors
                        .Background(new SolidColorBrush(Colors.Silver))
                        .Children(

                            new TextBlock()
                                .Text("Hello Uno Platform!")
                                .Padding(50)//Set some padding
                                .Margin(50)//Set some Margin
                                .HorizontalAlignment(HorizontalAlignment.Right)//Custom the Alignment

                        ),
                    new Grid()
                        //Set Background from custom Brush
                        .Background(new SolidColorBrush(Color.FromArgb(255, 233, 233, 233)))
                        .Children(

                            new TextBlock()
                                .Text("Hello Uno Platform!")
                                .Padding(50)//Set some padding
                                .Margin(50)//Set some Margin
                                .HorizontalAlignment(HorizontalAlignment.Right)//Custom the Alignment

                        )
        ));
    }
}
```

--------------------------------

### Install Configuration feature

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Configuration/HowTo-Configuration.md

Add the Configuration feature to the UnoFeatures property in your project file.

```diff
<UnoFeatures>
    Material;
+   Configuration;
    Toolkit;
    MVUX;
</UnoFeatures>
```

--------------------------------

### Implement MainPage XAML and Code-Behind

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Markup/HowTo-CustomMarkupProject-Toolkit.md

Provides the full XAML and C# code-behind for the main page navigation setup.

```csharp
namespace MySampleToolkitProjectXAML;

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
    }
    public void navigationButton_Click(object sender, RoutedEventArgs e)
    {
        Frame.Navigate(typeof(SecondPage));
    }
}
```

```xml
<Page x:Class="MySampleToolkitProjectXAML.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MySampleToolkitProjectXAML"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:utu="using:Uno.Toolkit.UI"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <StackPanel HorizontalAlignment="Center"
                VerticalAlignment="Center">
        <utu:NavigationBar Content="Title Main Page"/>
        <Button 
            Content="Go to Second Page" 
            Click="navigationButton_Click"/>
    </StackPanel>
</Page>
```

--------------------------------

### Full MainPage C# Markup Implementation

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Markup/HowTo-CreateMarkupProject.md

Provides a complete example of a MainPage.cs file structure using C# Markup.

```csharp
namespace MySampleProject;

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this
            .Background(ThemeResource.Get<Brush>("ApplicationPageBackgroundThemeBrush"))
            .Content(new StackPanel()
            .VerticalAlignment(VerticalAlignment.Center)
            .HorizontalAlignment(HorizontalAlignment.Center)
            .Children(
                new Grid()
                    .Children(
                        //Add Some TextBlock
                        new TextBlock()
                            .Text("Hello Uno Platform!")
                            .Padding(50)//Set some padding
                            .Margin(50)//Set some Margin
                            .HorizontalAlignment(HorizontalAlignment.Right)//Custom the Alignment
                        )
        ));
    }
}
```

--------------------------------

### Define UI Layout and Bindings with C# Markup

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Markup/HowTo-CustomMarkupProject.md

This example shows how to set a DataContext, define resources, and construct a complex Grid layout with nested elements and data bindings.

```csharp
//Set a ViewModel to the DataContext
this.DataContext<ViewModelSample>((page, vm) => page
    .Background(ThemeResource.Get<Brush>("ApplicationPageBackgroundThemeBrush"))
    //Set Resources using C# Markup
    .Resources
    (
        r => r
            .Add("Icon_Create", "F1 M 0 10.689374307777618 L 0 13.501874923706055 L 2.8125 13.501874923706055 L 11.107499599456787 5.206874544314932 L 8.295000314712524 2.394375001270064 L 0 10.689374307777618 Z M 13.282499313354492 3.03187490723031 C 13.574999302625656 2.7393749282891826 13.574999302625656 2.266875037959408 13.282499313354492 1.97437505901828 L 11.527500629425049 0.21937498420584567 C 11.235000640153885 -0.07312499473528189 10.762499302625656 -0.07312499473528189 10.469999313354492 0.21937498420584567 L 9.097500085830688 1.591874900865419 L 11.909999370574951 4.404374801538142 L 13.282499313354492 3.03187490723031 L 13.282499313354492 3.03187490723031 Z")
            .Add("Icon_Delete", "F1 M 0.75 12 C 0.75 12.825000017881393 1.4249999821186066 13.5 2.25 13.5 L 8.25 13.5 C 9.075000017881393 13.5 9.75 12.825000017881393 9.75 12 L 9.75 3 L 0.75 3 L 0.75 12 Z M 10.5 0.75 L 7.875 0.75 L 7.125 0 L 3.375 0 L 2.625 0.75 L 0 0.75 L 0 2.25 L 10.5 2.25 L 10.5 0.75 Z")
    )
    .Content(
            new Grid()
                .Style(GetGridStyle())
                .RowDefinitions<Grid>("Auto, *")
                .ColumnDefinitions<Grid>("2*, Auto, 2*")
                .Background(new SolidColorBrush(Colors.Silver))
                .Margin(50)
                .Children(

                    new TextBlock()
                        .Style(
                            new Style<TextBlock>()
                                .Setters(e => e.Padding(50))
                        )
                        .Text("Welcome!!")
                        .Grid(row: 0, column: 0),

                    new Image()
                        .Source(new BitmapImage(new Uri("https://picsum.photos/366/366")))
                        .Stretch(Stretch.UniformToFill)
                        .Width(70)
                        .Height(70)
                        .Margin(0,0,50,0)
                        .Grid(row: 0, column: 2)
                        .HorizontalAlignment(HorizontalAlignment.Right),

                    new Grid()
                        .Style(GetGridStyle())
                        .ColumnDefinitions<Grid>("*, *, *")
                        .Background(new SolidColorBrush(Color.FromArgb(255, 233, 233, 233)))
                        .Grid(grid => grid.Row(1).ColumnSpan(3))
                        .Children(

                            new StackPanel()
                                .Orientation(Orientation.Vertical)
                                .Grid(grid => grid.Column(0))
                                .Children(

                                    //C# Markup easily allows code reuse, as shown below.
                                    GetReusedCodeForTitle("Basics Bindings", "Direct Attribute"),

                                    new TextBlock()
                                        .Margin(0, 20, 0, 0)
                                        .Text("Bind")
                                        .FontSize(14)
                                        .FontWeight(FontWeights.Bold),

                                    //Setting some Binding
                                    new TextBlock()
                                        .Text(x => x.Bind(() => vm.DirectAttribute)),

                                    new TextBlock()
                                        .Margin(0, 20, 0, 0)
                                        .Text("Short Bind")
                                        .FontSize(14)
                                        .FontWeight(FontWeights.Bold),

                                    //Setting some Binding using the shorthand version
                                    new TextBlock()
                                        .Text(() => vm.DirectAttribute),
```

--------------------------------

### Install Navigation Feature

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Navigation/HowTo-NavigateBetweenPages.md

Add the Navigation feature to the UnoFeatures property in your project's .csproj file.

```diff
<UnoFeatures>
    Material;
    Extensions;
+   Navigation;
    Toolkit;
    MVUX;
</UnoFeatures>
```

--------------------------------

### Consume SetupAppAsync helper

Source: https://github.com/unoplatform/uno.extensions/blob/main/src/Uno.Extensions.Navigation.UI.Tests/HotReload.Spec.md

Use this helper to boot an Uno host, mount the navigation root, and wait for the navigator to initialize.

```csharp
await using var app = await SetupAppAsync(
    registerViewsAndRoutes: (views, routes) => { /* scenario-specific */ },
    initialRoute: "StartingPage",
    ct);
```

--------------------------------

### Navigation Qualifiers Table Examples

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Reference/Navigation/Qualifiers.md

Examples of various navigation qualifiers used to define routing behavior.

```text
"Home"
```

```text
"/"
"/Login"
```

```text
"./Info/Profile"
```

```text
"!Cart"
```

```text
"-"
"--Profile"
"-/Login"
```

--------------------------------

### Set Up the Main Window

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/GettingStarted.md

Replaces the standard window initialization with the builder-based approach.

```diff
-MainWindow = new Window();

var builder = this.CreateBuilder(args)
    .Configure(host => host
        // Configure the host builder
    );

+MainWindow = builder.Window;

Host = builder.Build();

if (MainWindow.Content is not Frame rootFrame)
{
    rootFrame = new Frame();
    MainWindow.Content = rootFrame;
}

if (rootFrame.Content == null)
{
    rootFrame.Navigate(typeof(MainPage), args.Arguments);
}

MainWindow.Activate();
```

--------------------------------

### Set Up Main Window

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Hosting/HowTo-HostingSetup.md

Assign the window instance from the builder to the MainWindow property.

```cs
protected override void OnLaunched(LaunchActivatedEventArgs e)
{
    var appBuilder = this.CreateBuilder(args)
    .Configure(host => {
        // Configure the host builder
    });

    MainWindow = builder.Window;
    ...
}
```

--------------------------------

### NavigationViewItem Implementation

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Navigation/Advanced/HowTo-UseNavigationView.md

Example structure for defining navigation items within a NavigationView.

```xml
<NavigationView.MenuItems>
  <NavigationViewItem Content="One"
                      uen:Region.Name="One" />
  ...
</NavigationView.MenuItems>
```

--------------------------------

### MSAL Configuration Error Exception

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Authentication/HowTo-MsalAuthentication.md

Example of the exception thrown when the ClientId is missing.

```xml
Exception thrown: 'Microsoft.Identity.Client.MsalClientException' in Microsoft.Identity.Client.dll
No ClientId was specified.
```

--------------------------------

### Create a XAML project via CLI

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Markup/HowTo-XamlProject.md

Use the dotnet CLI to scaffold a new Uno Platform project with XAML markup support.

```cmd
dotnet new unoapp -preset blank -markup xaml -o MySampleProjectXaml
```

--------------------------------

### UpdateDataAsync Usage Example

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Reference/Reactive/state.md

Demonstrates updating state metadata using the Option type.

```csharp
public IState<string> City => State<string>.Empty(this);

public async ValueTask UpdateCityMetadata(CancellationToken ct)
{
    await City.UpdateDataAsync(currentData =>
    {
        var newData = Option.Some("New York");
        return newData;
    }, ct);
}
```

--------------------------------

### Initialize IHost in App.cs

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Hosting/HostingOverview.md

Use the CreateBuilder extension method within OnLaunched to instantiate and configure the application host.

```csharp
private IHost Host { get; set; }

protected override void OnLaunched(LaunchActivatedEventArgs e)
{
    var appBuilder = this.CreateBuilder(args)
        .Configure(host => {
            // Configure the host builder
        });

    Host = appBuilder.Build();
    ...
}
```

--------------------------------

### Install HttpRefit Feature

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Http/HowTo-Refit.md

Add the HttpRefit feature to the UnoFeatures property in your project file.

```diff
<UnoFeatures>
    Material;
    Extensions;
+   HttpRefit;
    Toolkit;
    MVUX;
</UnoFeatures>
```

--------------------------------

### Install Localization Feature

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Localization/HowTo-Localization.md

Add the Localization feature to the UnoFeatures property in your project file.

```diff
<UnoFeatures>
    Material;
    Extensions;
+   Localization;
    Toolkit;
    MVUX;
</UnoFeatures>
```

--------------------------------

### Create a TextBlock with C# Markup

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Markup/GettingStarted.md

Demonstrates the fluent syntax for initializing a TextBlock and setting its properties.

```cs
new TextBlock()
    .Text("Hello World")
    .FontSize(20)
```

--------------------------------

### Register services in Host

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Walkthrough/CommunityToolkit.howto.md

Configure your services within the host builder during application startup.

```csharp
protected override void OnLaunched(LaunchActivatedEventArgs args)
{
    var builder = this.CreateBuilder(args)
        .Configure(host =>
        {
            host.ConfigureServices(services =>
                services.AddSingleton<IPrimaryService, PrimaryService>()
                        .AddSingleton<ISecondaryService, SecondaryService>());
        });

    Host = builder.Build();
}
```

--------------------------------

### Define theme resources

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Markup/StaticAndThemeResources.md

Define theme-aware resources using Get or Key helpers.

```csharp
public static class MyResources
{
    public static Action<IDependencyPropertyBuilder<Color>> MyThemeColor =>
        ThemeResource.Get<Color>("MyThemeColor");

    public static readonly ThemeResourceKey<Color> MyOtherColor =
        new ThemeResourceKey<Color>("MyOtherColor");
}
```

--------------------------------

### Binding State in XAML

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Reference/Reactive/state.md

Example of two-way data binding between a UI Slider and an MVUX State.

```xml
    <Page
        x:Class="SliderApp.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:SliderApp">
        <Page.DataContext>
            <local:SliderViewModel />
        </Page.DataContext>

        <StackPanel>
            <StackPanel Orientation="Horizontal" Spacing="5">
                <TextBlock Text="Current state value:" />
                <TextBlock Text="{Binding SliderValue}" />
            </StackPanel>

            <Border Height="1" Background="DarkGray" />

            <TextBlock Text="Set state value:"/>
            <Slider Value="{Binding SliderValue, Mode=TwoWay}" />
        </StackPanel>
    </Page>
```

--------------------------------

### Create an MVUX project via CLI

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Mvux/Tutorials/HowTo-MvuxProject.md

Use the dotnet CLI to scaffold a new Uno Platform project with the MVUX presentation preset.

```cmd
dotnet new unoapp -preset blank -presentation mvux -o MyApp
```

--------------------------------

### Create a C# Markup project with Toolkit via CLI

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Markup/HowTo-MarkupProjectToolkit.md

Use the dotnet CLI to scaffold a new Uno Platform project with C# Markup and Toolkit enabled.

```cmd
dotnet new unoapp -preset blank -toolkit true -markup csharp -o MySampleToolkitProject
```

--------------------------------

### Defining State in a Model

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Reference/Reactive/state.md

Example of declaring an IState property within an MVUX model record.

```csharp
    public partial record SliderModel
    {
        public IState<double> SliderValue => State.Value(this, () => Random.Shared.NextDouble() * 100);
    }
```

--------------------------------

### Create a C# Markup project via CLI

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Markup/HowTo-MarkupProject.md

Use the dotnet CLI to scaffold a new Uno Platform project with the C# Markup preset enabled.

```cmd
dotnet new unoapp -preset blank -markup csharp -o MySampleProject
```

--------------------------------

### UpdateAsync Usage Example

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Reference/Reactive/state.md

Demonstrates updating a state value using an asynchronous service call.

```csharp
public IState<string> City => State<string>.Empty(this);

public async ValueTask SetCurrent(CancellationToken ct)
{
    var city = await _locationService.GetCurrentCity(ct);
    await City.UpdateAsync(currentValue => city, ct);
}
```

--------------------------------

### Register Web Authentication Provider in Startup

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Walkthrough/Authentication.Web.howto.md

Configures the authentication host to use the web-based provider within the OnLaunched method.

```csharp
protected override void OnLaunched(LaunchActivatedEventArgs args)
{
    var builder = this.CreateBuilder(args)
        .Configure(host =>
        {
            host
                .UseAuthentication(auth =>
                {
                    // You can add other providers too, but here it's only web:
                    auth.AddWeb();
                });
        });

    var appHost = builder.Build();
    base.OnLaunched(args);
}
```

--------------------------------

### PaginatedAsync Operator

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Reference/Reactive/listfeed.md

Defines the signature for creating a paginated list feed and provides an example of its usage.

```csharp
public static IListFeed<T> PaginatedAsync<T>(Func<PageRequest, CancellationToken, Task<IImmutableList<T>>> getPage);
```

```csharp
public IListFeed<City> Cities => ListFeed.AsyncPaginated(async (page, ct) => _service.GetCities(pageIndex: page.Index, perPage: 20));
```

--------------------------------

### Using Qualifiers Class

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Reference/Navigation/Qualifiers.md

Demonstrates using the Qualifiers class from the Uno.Extensions.Navigation namespace for programmatic navigation.

```csharp
await navigator.NavigateViewModelAsync<MainViewModel>(this, Qualifiers.ClearBackStack);
```

--------------------------------

### Implement NavigationView in XAML

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Navigation/Advanced/HowTo-UseNavigationView.md

A complete example of a MainPage layout using NavigationView with attached regions for navigation.

```xml
<Page x:Class="UsingNavigationView.Views.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d"
      xmlns:uen="using:Uno.Extensions.Navigation.UI"
      Background="{ThemeResource MaterialBackgroundBrush}">

    <Grid uen:Region.Attached="True">

        <NavigationView uen:Region.Attached="true">
            <NavigationView.MenuItems>
                <NavigationViewItem Content="One"
                                    uen:Region.Name="One" />
                <NavigationViewItem Content="Two"
                                    uen:Region.Name="Two" />
                <NavigationViewItem Content="Three"
                                    uen:Region.Name="Three" />
                <NavigationViewItem Content="Products"
                                    uen:Navigation.Data="{Binding Entity}"
                                    uen:Region.Name="Products" />
            </NavigationView.MenuItems>

            <Grid uen:Region.Attached="True"
                  uen:Region.Navigator="Visibility">
                <Grid uen:Region.Name="One"
                      Visibility="Collapsed">
                    <TextBlock Text="One"
                               FontSize="24"
                               HorizontalAlignment="Center"
                               VerticalAlignment="Center" />
                </Grid>
                <Grid uen:Region.Name="Two"
                      Visibility="Collapsed">
                    <TextBlock Text="Two"
                               FontSize="24"
                               HorizontalAlignment="Center"
                               VerticalAlignment="Center" />
                </Grid>
                <Grid uen:Region.Name="Three"
                      Visibility="Collapsed">
                    <TextBlock Text="Three"
                               FontSize="24"
                               HorizontalAlignment="Center"
                               VerticalAlignment="Center" />
                </Grid>
            </Grid>
        </NavigationView>
    </Grid>
</Page>
```

--------------------------------

### Initialize the Host

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/GettingStarted.md

Builds the host instance after the builder has been configured.

```csharp
Host = builder.Build();
```

--------------------------------

### Update color palette values

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Markup/HowTo-CustomMarkupProject-Theme.md

Example of modifying a specific color key within the override class.

```csharp
//From
//.Add<Color>(Theme.Colors.Background.Default.Key, "#F4F4F4", "#000000")
//To
.Add<Color>(Theme.Colors.Background.Default.Key, "#A1B2C3", "#000000")
```

--------------------------------

### Implement IHostedService

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Hosting/HostingOverview.md

Standard implementation for asynchronous service startup and shutdown.

```csharp
public class SimpleHostService : IHostedService
{
    public Task StartAsync(CancellationToken cancellationToken)
    {
        return Task.CompletedTask;
    }

    public Task StopAsync(CancellationToken cancellationToken)
    {
        return Task.CompletedTask;
    }
}
```

--------------------------------

### Invalid Feed Instance Caching

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Reference/Reactive/Architecture.md

Example of a delegate declaration that breaks instance caching by re-instantiating on every call.

```csharp
public static Feed<string> ToString(this IFeed<T> feed, Func<T, string> toString)
  => feed.Select(t => toString(t));
```

--------------------------------

### Configure App Class for Theme Support

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Markup/HowTo-CustomMarkupProject-Theme.md

Initialize the AppTheme helper within the Application class during launch.

```csharp
namespace MySampleToolkitProject;

public class App : Application
{
    public AppTheme? AppTheme;
    protected Window? MainWindow { get; private set; }

    protected override void OnLaunched(LaunchActivatedEventArgs args)
    {
#if (NET6_0_OR_GREATER && WINDOWS) || HAS_UNO_WINUI
        MainWindow = new Window();
#else
        MainWindow = Microsoft.UI.Xaml.Window.Current;
#endif

        // Do not repeat app initialization when the Window already has content,
        // just ensure that the window is active
        if (MainWindow.Content is not Frame rootFrame)
        {
            // Create a Frame to act as the navigation context and navigate to the first page
            rootFrame = new Frame();

            // Place the frame in the current Window
            MainWindow.Content = rootFrame;

            rootFrame.NavigationFailed += OnNavigationFailed;
        }

        if (rootFrame.Content == null)
        {
            // When the navigation stack isn't restored navigate to the first page,
            // configuring the new page by passing the required information as a navigation
            // parameter
            rootFrame.Navigate(typeof(MainPage), args.Arguments);
        }

        AppTheme = new AppTheme(MainWindow);

        // Ensure the current window is active
        MainWindow.Activate();
    }

    /// <summary>
    /// Invoked when Navigation to a certain page fails
    /// </summary>
    /// <param name="sender">The Frame which failed navigation</param>
    /// <param name="e">Details about the navigation failure</param>
    void OnNavigationFailed(object sender, NavigationFailedEventArgs e)
    {
        throw new InvalidOperationException($"Failed to load {e.SourcePageType.FullName}: {e.Exception}");
    }
}
```

--------------------------------

### Generated R Class Structure

Source: https://github.com/unoplatform/uno.extensions/blob/main/samples/MauiEmbedding/MauiEmbedding/Platforms/Android/Resources/AboutResources.txt

Example of the R class generated by the build system containing resource tokens.

```csharp
public class R {
    public class drawable {
        public const int icon = 0x123;
    }

    public class layout {
        public const int main = 0x456;
    }

    public class strings {
        public const int first_string = 0xabc;
        public const int second_string = 0xbcd;
    }
}
```

--------------------------------

### Enable HTTP and Authentication in .csproj

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Walkthrough/Authentication.howto.md

Add the necessary UnoFeatures to your project file to enable HTTP and Authentication support.

```xml
<PropertyGroup>
  <UnoFeatures>
    Material;
    Authentication;
    Http;
    Toolkit;
    MVUX;
  </UnoFeatures>
</PropertyGroup>
```

--------------------------------

### Valid Record Constructors for PropertySelector

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/PropertySelector/rules.md

Examples of record definitions that satisfy the parameter-less or nullable-only constructor requirement for PropertySelectors.

```csharp
public record MyRecord(string Value);
```

```csharp
public record MyRecord(string? Value);
```

```csharp
public record MyRecord(string Value = "");
```

```csharp
public record MyRecord(string Value)
{
    public MyRecord(): this("a default value") { }
}
```

--------------------------------

### Create Uno Platform project with .NET MAUI Embedding via CLI

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Maui/ThirdParty-EsriMaps.md

Use the dotnet CLI to scaffold a new Uno Platform project configured with .NET MAUI Embedding support for specific platforms.

```bash
dotnet new unoapp -preset blank -maui -platforms "android" -platforms "ios" -platforms "maccatalyst" -platforms "windows" -o ArcGisApp
```

--------------------------------

### Implicit Command Method Signatures

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Mvux/Advanced/Commands.md

Examples of method signatures in the Model that trigger automatic command generation in the ViewModel.

```csharp
public void DoWork();
```

```csharp
public ValueTask DoWork(CancellationToken ct);
```

```csharp
public ValueTask DoWork();
```

--------------------------------

### Create AppTheme Helper Class

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Markup/HowTo-CustomMarkupProject-Theme.md

Create a helper class to interface with SystemThemeHelper for applying theme changes to the window content.

```csharp
namespace MySampleToolkitProject;
public class AppTheme
{
    private readonly Window _window;
    public AppTheme(Window window)
    {
        _window = window;
    }

    public void SetTheme(bool darkMode)
    {
            SystemThemeHelper.SetRootTheme(_window.Content.XamlRoot, darkMode);
    }
}
```

--------------------------------

### Register Embedded AppSettings

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Walkthrough/Configuration.howto.md

Use UseConfiguration during host setup to register embedded JSON files as configuration sources.

```csharp
protected override void OnLaunched(LaunchActivatedEventArgs args)
{
    var builder = this.CreateBuilder(args)
        .Configure(host =>
        {
            host.UseConfiguration(config =>
                config.EmbeddedSource<App>()            // appsettings.json
                      .EmbeddedSource<App>("platform")); // appsettings.platform.json
        });
}
```

--------------------------------

### Attach Regions to Navigational Controls

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Navigation/HowTo-Regions.md

Basic setup for linking a TabBar and a Content Grid using the Region.Attached property.

```xml
<Grid uen:Region.Attached="True">
   <Grid uen:Region.Attached="True" />
   <utu:TabBar uen:Region.Attached="True">
      <!-- Items -->
   </utu:TabBar>
</Grid>
```

--------------------------------

### Configure Toolkit Navigation in Host Builder

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Navigation/Advanced/HowTo-UseTabBar.md

Register toolkit navigation support during application startup using the UseToolkitNavigation extension method.

```csharp
var builder = this.CreateBuilder(args)
    // Add navigation support for toolkit controls such as TabBar and NavigationView
    .UseToolkitNavigation()
    .Configure(host => host....);
```

--------------------------------

### Define the PeopleModel and Service

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Mvux/Walkthrough/Selection.howto.md

Initial setup for a service providing a list of people and a model exposing that list as an IListFeed.

```csharp
public interface IPeopleService
{
    ValueTask<IImmutableList<Person>> GetPeopleAsync(CancellationToken ct);
}

public partial record PeopleModel(IPeopleService PeopleService)
{
    public IListFeed<Person> People => ListFeed.Async(PeopleService.GetPeopleAsync);
}
```

--------------------------------

### Define a simple UI with C# Markup

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Markup/Overview.md

Demonstrates creating a MainPage with a centered StackPanel containing a TextBlock.

```cs
public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.Content
        (
            new StackPanel()
                .VerticalAlignment(VerticalAlignment.Center)
                .HorizontalAlignment(HorizontalAlignment.Center)
                .Children
                (
                    new TextBlock()
                        .Text("Hello Uno Platform!")
                )
        );
    }
}
```

--------------------------------

### Define SamplePage XAML

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Navigation/HowTo-ShowDialog.md

Create a Page to be displayed inside a flyout.

```xml
<Page x:Class="ShowDialog.Views.SamplePage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:ShowDialog.Views"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d"
      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <TextBlock Text="Dialog Navigation"
                   FontSize="32"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center" />
    </Grid>
</Page>
```

--------------------------------

### Register configuration section with DI

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Configuration/ConfigurationOverview.md

Maps a configuration section to a class during application startup using the host builder.

```csharp
protected override void OnLaunched(LaunchActivatedEventArgs e)
{
    var appBuilder = this.CreateBuilder(e)
        .Configure(
            host => host
                .UseConfiguration(
                    builder => builder.EmbeddedSource<App>()
                        .Section<CustomIntroduction>()
                )
        );
    ...
}
```

--------------------------------

### API Request URL

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Http/HowTo-Refit.md

The HTTP GET request used to retrieve the sample data from the Chuck Norris API.

```http
GET https://api.chucknorris.io/jokes/search?query=fight
```

--------------------------------

### Initialize Configuration in HostBuilder

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Configuration/HowTo-WritableConfiguration.md

Register configuration services during the application startup process.

```csharp
private IHost Host { get; set; }

protected override void OnLaunched(LaunchActivatedEventArgs e)
{
    var appBuilder = this.CreateBuilder(args)
        .Configure(host => {
            host
            .UseConfiguration()
        });

    Host = appBuilder.Build();
    ...
}
```

```csharp
private IHost Host { get; set; }

protected override void OnLaunched(LaunchActivatedEventArgs e)
{
    var appBuilder = this.CreateBuilder(args)
        .Configure(host => {
            host
            .UseConfiguration(configure: configBuilder =>
                configBuilder
                    .EmbeddedSource<App>()
            );
        });

    Host = appBuilder.Build();
    ...
}
```

--------------------------------

### Add Project Reference to MAUI Library

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Maui/MauiOverview.md

Example of adding the MAUI class library as a ProjectReference in the Uno project file.

```xml
<Project Sdk="Microsoft.NET.Sdk">
  ...
  <ItemGroup>
    <!-- Add the reference to the .NET MAUI class library as a ProjectReference -->
    <ProjectReference Include="..\..\ExistingUnoApp.MauiControls\ExistingUnoApp.MauiControls.csproj" />
  </ItemGroup>
  ...
</Project>
```

--------------------------------

### Implement ShowDialogClick Method

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Navigation/HowTo-ShowDialog.md

Use the Navigator to display the page as a dialog.

```csharp
private void ShowDialogClick(object sender, RoutedEventArgs e)
{
    _ = this.Navigator()?.NavigateViewAsync<SamplePage>(this, qualifier: Qualifiers.Dialog);
}
```

--------------------------------

### Implement and register a custom browser

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Walkthrough/Authentication.Oidc.howto.md

Create a custom browser implementation by implementing IBrowser and registering it in the dependency injection container to control the sign-in UI.

```csharp
public class CustomBrowser : IBrowser
{
    public Task<BrowserResult> InvokeAsync(BrowserOptions options, CancellationToken ct = default)
    {
        // open your own WebView / window
        // return BrowserResult with response
        throw new NotImplementedException();
    }
}
```

```csharp
.ConfigureServices((context, services) =>
{
    services.AddTransient<IBrowser, CustomBrowser>();
})
```

--------------------------------

### Install Serialization Feature

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Serialization/HowTo-Serialization.md

Add the Serialization feature to your Uno Platform project by updating the UnoFeatures property in your .csproj file.

```diff
<UnoFeatures>
    Material;
    Extensions;
+   Serialization;
    Toolkit;
    MVUX;
</UnoFeatures>
```

--------------------------------

### Full Implementation of SecondPage

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Markup/HowTo-CustomMarkupProject-VisualStates.md

Shows the complete structure of a page using the SampleUserControl and navigation logic.

```csharp
namespace MySampleToolkitProject;

public sealed partial class SecondPage : Page
{
    public SecondPage()
    {
        this
            .Background(ThemeResource.Get<Brush>("ApplicationPageBackgroundThemeBrush"))
            .Content(
                new StackPanel()
                    .Children(
                        new NavigationBar().Content("Title Second Page")
                            .VerticalAlignment(VerticalAlignment.Top)
                            .HorizontalAlignment(HorizontalAlignment.Left),
                        new StackPanel()
                            .Margin(0, 50, 0, 0)
                            .VerticalAlignment(VerticalAlignment.Center)
                            .HorizontalAlignment(HorizontalAlignment.Center)
                            .Children(
                                new Button()
                                    .Content("Go to Main Page")
                                    .Name(out var navigationButton),
                                new SampleUserControl()
                            )
                    )
            );
        navigationButton.Click += (s, e) =>
        {
            Frame.Navigate(typeof(MainPage));
        };
    }
}
```

--------------------------------

### Content Area Grid Implementation

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Navigation/Advanced/HowTo-UseNavigationView.md

Example of defining multiple content grids with unique region names and initial collapsed visibility.

```xml
<Grid uen:Region.Name="One"
      Visibility="Collapsed">
    <TextBlock Text="One"
               FontSize="24"
               HorizontalAlignment="Center"
               VerticalAlignment="Center" />
</Grid>
<Grid uen:Region.Name="Two"
      Visibility="Collapsed">
    <TextBlock Text="Two"
               FontSize="24"
               HorizontalAlignment="Center"
               VerticalAlignment="Center" />
</Grid>
<Grid uen:Region.Name="Three"
      Visibility="Collapsed">
    <TextBlock Text="Three"
               FontSize="24"
               HorizontalAlignment="Center"
               VerticalAlignment="Center" />
</Grid>
```

--------------------------------

### Define ValueTemplate in FeedView

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Mvux/FeedView.md

The ValueTemplate defines the rendering when concrete data is available. These examples show equivalent ways to define the template.

```xml
<FeedView ...>
    <DataTemplate ... />
</FeedView>
```

```xml
<FeedView ...>
    <FeedView.ValueTemplate>
        <DataTemplate ... />
    </FeedView.ValueTemplate>
</FeedView>
```

```xml
<FeedView Source="..." ValueTemplate="{StaticResource MyFeedViewTemplate}" />
```

--------------------------------

### Configure the Host Builder

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/GettingStarted.md

Initializes the host builder within the OnLaunched method of App.xaml.cs.

```csharp
var builder = this.CreateBuilder(args)
    .Configure(host => host
        // Configure the host builder
        .UseConfiguration(...)
        .UseLocalization()
        .UseSerialization(...)
        .UseHttp(...)
    );
```

--------------------------------

### Create UI Elements with C# Markup and XAML

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Markup/HowTo-CreateMarkupProject.md

Demonstrates basic element creation and attribute setting for a TextBlock.

```csharp
//Add Some TextBlock
new TextBlock()
    .Text("Hello Uno Platform!")
    .Padding(50)//Set some padding
    .Margin(50)//Set some Margin
    .HorizontalAlignment(HorizontalAlignment.Right)//Custom the Alignment
)
```

```xml
<TextBlock Text="Hello Uno Platform"
           Padding="50"
           Margin="50"
           HorizontalAlignment="Right" />
```

--------------------------------

### Define Full XAML Page Structure

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Markup/HowTo-CustomMarkupProject.md

Provides a complete XAML page example including resource dictionaries, styles, and data templates.

```xml
<Page x:Class="MySampleProjectXaml.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MySampleProjectXaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    xmlns:model="using:MySampleProjectXaml.Model">
    <Page.Resources>
        <ResourceDictionary>
            <x:String x:Key="Icon_Create">F1 M 0 10.689374307777618 L 0 13.501874923706055 L 2.8125 13.501874923706055 L 11.107499599456787 5.206874544314932 L 8.295000314712524 2.394375001270064 L 0 10.689374307777618 Z M 13.282499313354492 3.03187490723031 C 13.574999302625656 2.7393749282891826 13.574999302625656 2.266875037959408 13.282499313354492 1.97437505901828 L 11.527500629425049 0.21937498420584567 C 11.235000640153885 -0.07312499473528189 10.762499302625656 -0.07312499473528189 10.469999313354492 0.21937498420584567 L 9.097500085830688 1.591874900865419 L 11.909999370574951 4.404374801538142 L 13.282499313354492 3.03187490723031 L 13.282499313354492 3.03187490723031 Z</x:String>
            <x:String x:Key="Icon_Delete">F1 M 0.75 12 C 0.75 12.825000017881393 1.4249999821186066 13.5 2.25 13.5 L 8.25 13.5 C 9.075000017881393 13.5 9.75 12.825000017881393 9.75 12 L 9.75 3 L 0.75 3 L 0.75 12 Z M 10.5 0.75 L 7.875 0.75 L 7.125 0 L 3.375 0 L 2.625 0.75 L 0 0.75 L 0 2.25 L 10.5 2.25 L 10.5 0.75 Z</x:String>

            <Style x:Key="GetGridStyle" TargetType="Grid">
                <Setter Property="Padding" Value="50" />
                <Setter Property="BorderBrush" Value="Blue" />
                <Setter Property="BorderThickness" Value="1" />
                <Setter Property="CornerRadius" Value="30" />
            </Style>
            <DataTemplate x:Key="GetDataTemplate">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding Name}" Margin="10" />
                    <TextBlock Text="{Binding Description}" Margin="10" />
                    <TextBlock Text="{Binding Active}" Margin="10" />
                </StackPanel>
            </DataTemplate>

            <model:MyItemTemplateSelector x:Key="ItemTemplateSelector">
                <model:MyItemTemplateSelector.GetDataTemplateActive>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="{Binding Name}" Margin="10" />
                            <TextBlock Text="{Binding Description}" Margin="10" />
                            <Button>
                                <Button.Content>
                                    <PathIcon Data="{StaticResource Icon_Create}" />
                                </Button.Content>
                            </Button>
                        </StackPanel>
                    </DataTemplate>
                </model:MyItemTemplateSelector.GetDataTemplateActive>
                <model:MyItemTemplateSelector.GetDataTemplateInative>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="{Binding Name}" Margin="10" />
                            <TextBlock Text="{Binding Description}" Margin="10" />
                            <Button>
                                <Button.Content>
                                    <PathIcon Data="{StaticResource Icon_Delete}" />
                                </Button.Content>
                            </Button>
                        </StackPanel>
                    </DataTemplate>
                </model:MyItemTemplateSelector.GetDataTemplateInative>
            </model:MyItemTemplateSelector>
```

--------------------------------

### Define a paginated data service

Source: https://github.com/unoplatform/uno.extensions/blob/main/doc/Learn/Mvux/Walkthrough/Pagination.howto.md

Create an interface and implementation that supports fetching data in chunks based on page size and starting index.

```csharp
namespace PaginationPeopleApp;

public partial record Person(int Id, string FirstName, string LastName);

public interface IPeopleService
{
    ValueTask<IImmutableList<Person>> GetPeopleAsync(
        uint pageSize,
        uint firstItemIndex,
        CancellationToken ct);
}

public class PeopleService : IPeopleService
{
    public async ValueTask<IImmutableList<Person>> GetPeopleAsync(
        uint pageSize,
        uint firstItemIndex,
        CancellationToken ct)
    {
        var (size, start) = ((int)pageSize, (int)firstItemIndex);

        await Task.Delay(TimeSpan.FromSeconds(1), ct); // simulate remote call

        var all = GetPeople(); // returns a big in-memory list

        return all
            .Skip(start)
            .Take(size)
            .ToImmutableList();
    }
}
```