XAML Integration

This page describes how is possible to integrate MauiReactor components in a classic XAML-C# MAUI application

Sometimes you may want to adopt the MVU approach only for a portion of the application, for example, when you have already developed a XAML-based app and are not ready to completely re-write it using a different framework like MauiReactor.

XAML integration in MauiReactor allows us to run a MauiReactor component inside a standard MAUI page or view. You can even use MauiReactor component for an entire page while the rest of the app uses a classic MVVM approach.

Using MauiReactor (i.e. MVU) for the entire application remains the recommended way.

Consider this feature if you are facing the following scenarios:

1) You have completed the development of a standard MAUI application or are in an advanced stage of the process where moving to MauiReactor is not feasible but you're interested in adopting MauiReactor in the future

2) You may want to adopt/experiment with the MVU approach for some specific portion or page of the UI

Do not mix MVU and MVVM code/approaches but use the dependency inject to share services.

Let's start by adding MauiReactor Nuget package to the project:

dotnet add package Reactor.Maui

To host a MauiReactor component on your page please use the ComponenHost class like it's shown in the following snippet code:

<?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"
             xmlns:MauiReactor="clr-namespace:MauiReactor.Integration;assembly=MauiReactor"
             xmlns:components="clr-namespace:IntegrationTest.Components"
             x:Class="IntegrationTest.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">

            <Image
                Source="dotnet_bot.png"
                SemanticProperties.Description="Cute dot net bot waving hi to you!"
                HeightRequest="200"
                HorizontalOptions="Center" />

            <Label
                Text="Hello, World!"
                SemanticProperties.HeadingLevel="Level1"
                FontSize="32"
                HorizontalOptions="Center" />

            <Label
                Text="Welcome to .NET Multi-platform App UI"
                SemanticProperties.HeadingLevel="Level2"
                SemanticProperties.Description="Welcome to dot net Multi platform App U I"
                FontSize="18"
                HorizontalOptions="Center" />

            <MauiReactor:ComponentHost
                Component="{x:Type components:Counter}"/>

            <Button
                Text="Click Me!"
                Clicked="Button_Clicked"
                />

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

In line 4, you have to specify the MauiReactor namespace and assembly containing the ComponentHost class.

In lines 33 and 34 we're going to create an instance of the control ComponentHost passing the Counter component type as a parameter: the ComponentHost class will instantiate and run the component.

Of course the same can be done in code:

var componentHost = new MauiReactor.ComponentHost
{
    Component = typeof(Counter)
}

Another way to integrate a MauiReactor component is to navigate to another page passing a component as its root using the overload of the Navigation class Navigation.PushAsync<Component-Type>()

await Navigation.PushAsync<ChildPage>();

Where ChildPage is defined as:

class ChildPage : Component
{
    public override VisualNode Render()
    {
        return new MauiReactor.ContentPage()
        {
            new MauiReactor.Label("Hello from MauiReactor!")
        };
    }
}

The same works with the Shell as well. You need to register the route using the static method Routing.RegisterRoute and navigate to it with the usual Shell.Current.GoToAsync call:

Routing.RegisterRoute<Page2>("page-2");
...
await MauiControls.Shell.Current.GoToAsync("page-2");