Convert sample Maui app to MVVM
Create base from Maui template
Open Visual studio, create new project from “.NET MAUI App”. Name it “MauiApp1”.
Set target to “Windows Machine” and press play just to make sure all dots are connected.
The start and result are on Github:LosManos/MauiApp1_MVVM.
If you prefer video instead of text James Montemagno has a similar Youtube video.
Plans
Investigate the code.
In MainPage.xaml there is a tight coupling from the xaml file to the code behind through
1 | Clicked="OnCounterClicked" |
1 | CounterBtn.Text = $"Clicked {count} time"; |
When running the code, the counter and button text, will be updated by the code above.
Let’s get rid of the tight coupling.
Note: I am not satisfied how the click command will be wired up in the final solution. Please comment and help me make it better.
View model
MVVM works by GUI logic writing to an object/data structure (the view model) and the GUI graphic reading from it. And vice verse. It can be compared to a data contract with talking over the wire
This means we can test the logic without having a GUI and the GUI won’t have to rely on complicated GUI logic.
Create a class “MainPageViewModel.cs”, in a new folder “ViewModel”. We want to replace the counter.
To make it easier to react on the changes of the values we will use CommunityToolkit. To make it work the MVVM class must be public and partial. The field must be a field (not a property, and it must be with a leading lower case. Add a counter and a buttonText. Add a method to update the counter and replace the button text.
The reason for the above is that CommunityToolkit creates a Property for every field with ObservableProperty. You can find the rendered code in MauiApp1/Dependencies/.net7.0-xxxx/Analyzers.
I have some reason for the view model to be public but won’t delve into it here.
Install Nuget package CommunityToolkit.MAUI and CommunityToolkit.Mvvm.
(Sorry for the [ and <, but I don’t want to dig through WordPress. Just replace with [ and < respectively.)
Class “MainPageViewModel.cs” will look like this:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
using CommunityToolkit.Mvvm.Input;
namespace MauiApp1.ViewModel;
public partial class MainPageViewModel : ObservableObject
{
public MainPageViewModel()
{
ButtonText = "Click Me";
}
[ObservableProperty]
public int myCount;
[ObservableProperty]
public string buttonText;
[RelayCommand]
public void IncreaseCount()
{
MyCount += 1;
if (MyCount == 1)
ButtonText = $"Clicked {MyCount} time";
else
ButtonText = $"Clicked {MyCount} times";
}
}
Pressing play should work now as we only have added a class. Not changed or connected anything.
Connect
As per the readme you received when installing CommunityToolkit we have to manipulate the startup. Make it use the CommunityToolkit. Open MauiProgram.cs and add
Then we need to wire up the dependency injection. Alas add
2
builder.Services.AddSingleton<MainPage>();
You will now have something like
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
using Microsoft.Extensions.Logging;
namespace MauiApp1;
public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.UseMauiCommunityToolkit()
.ConfigureFonts(fonts =>
{
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
});
builder.Services.AddSingleton<ViewModel.MainPageViewModel>();
builder.Services.AddSingleton<MainPage>();
#if DEBUG
builder.Logging.AddDebug();
#endif
return builder.Build();
}
}
In MainPage.xaml.cs we get rid of the OnCounterClicked method and the counter. We also need to inject the view model to the main page MainPage.xaml.cs. All that is left is:
2
3
4
5
6
7
8
9
10
public partial class MainPage : ContentPage
{
public MainPage(ViewModel.MainPageViewModel vm)
{
InitializeComponent();
BindingContext = vm;
}
}
Do the xaml dance
As we have removed the event handler we also need to remove it from the xaml. Find the button and get rid of “Clicked=”OnCounterClicked””. We also don’t need the name as the code does not reference the button any more. The result looks like
2
3
4
5
Text="Click me"
SemanticProperties.Hint="Counts the number of times you click"
HorizontalOptions="Center"
/>
If you press play now the program will start but nothing will happen if you press play.
Add dynamic button text and the the cryptic command binding to the button
2
3
4
5
6
Text="{Binding ButtonText}"
SemanticProperties.Hint="Counts the number of times you click"
Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodel:MainPageViewModel}}, Path=IncreaseCountCommand}"
HorizontalOptions="Center"
/>
The above will not work unless we tell the xaml where to find the command. So update the ContentPage element
2
3
4
5
6
7
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:viewmodel="clr-namespace:MauiApp1.ViewModel"
x:Class="MauiApp1.MainPage"
x:DataType="viewmodel:MainPageViewModel"
>
Press play.
Every time you press the button the text button will change.