Daniel Hindrikes

All videos from .NET Frontend Day 2022 are now uploaded as individual videos on YouTube. You find them in the playlist below, and don't forget to subscribe to the channel!

Visual Studio for Mac doesn't have official support for .NET MAUI. But you can still use it. In this video Daniel Hindrikes will show you how.

Catch Logger is the app that helps you keep track of your catches. It is a non-social app, which means that you keep the catches for yourself. But of course, you can share them if you want. To keep your fishing places secret we have added an edit function so you can edit and your photos before sharing them. That is great if you want to hide the background for example.

With the "fishing session" feature you can easily count the number of catches during, add photos or register special catches if you catch a fish you want to save more information about.

You can also register a single catch or a record catch if you want to add a fish to the app without having to start a fishing session.

Get it here: https://www.catchlogger.app/share

Technical details

Catch Logger is build with Xamarin.Forms and using some components from Syncfusion.

Backend is hosted in Azure, API is built with Azure Functions and data is stored in Azure Table Storage, except for users accounts that are stored in Azure AD B2C.

On Thursday 10 Feb, this year of .NET Frontend Day will be streamed with 8 great speakers talking about .NET MAUI/Xamarin, Blazor and more.

Read more here: https://dotnet-frontend.com

In the latest preview of TinyMvvm, 4.0.1-pre4, there are new methods added to the ViewModelBase class. The new methods will make it easier to handle App lifecycle events in a ViewModel. For example, if you want to unsubscribe from an event when the app goes to sleep. Before you had to handle this in the Application class.

Following methods has been added for you to override:

• Task OnApplicationResume();
• Task OnApplicationSleep();

Those new features are available for both TinyMvvm.Forms (for Xamarin.Forms) and TinyMvvm.Maui (for .NET MAUI). To make them work you need to change the base class of your App class to TinyApplication instead of Application.

If you don't want to change to TinyApplication, nothing old will be broken, but the new methods will not work.

The code for this release is currently just in the maui branch, https://github.com/TinyStuff/TinyMvvm/tree/4.0.1-pre4

You may have heard about Blazor Desktop, Blazor Hybrid, or maybe Blazor Native. All of them are the same, just different names. What it really is, is the BlazorWebView. A control for .NET MAUI (and Xamarin.Forms), WinForms and WPF.

BlazorWebView can be seen as the third option about how you will host your Blazor app. If you are a Blazor web developer you probably already know about Blazor Server and Blazor WebAssembly. With BlazorWebView you will host Blazor inside of your native app, in the same process as the rest of the app.

So why is this an interesting thing for WPF or WinForms developers?

• You can reuse your Blazor components from your web projects.
• You can use Blazor components from the community or third-party vendors, like Progress Telerik and Syncfusion.
• You can develop your app with web technology and have full native access (to what the platform offers).
• You can take your website and add it to a native shell and improve the experience with some native features.

Modernize your app

Because you can use BlazorWebView as all other controls, you can use it wherever you want in your app. This means that you can use BlazorWebView to modernize your apps. For example, if you have an old WinForms app that you maybe want to replace with a website or you want to add new features to it that you already have on your website you can easily take your Blazor component and add them inside of your app. Instead of developing that feature again for the app, you are reusing what you already have developed. In the long run, you maybe will replace the whole app with a website but with this strategy you can do it step by step instead. Or you will keep the app, but with just web UI, but you have specified the website up with some native stuff.

Combine native and web UI

A common strategy with BlazorWebView will be to keep some parts of the app native, navigation for example. In a WinForms or a WPF app, you probably want to have the menu native, but the actual content can be in a BlazorWebView and you can share it with your websites or with a .NET MAUI app for, iOS, Android, and/or MacOS. If you spcify a control that are a Router, you can also navigate inside of your BlazorWebView.

How to use BlazorWebView

To use BlazorWebView you need to install the platform-specific Nuget package to your app project. In this repository on GitHub you can see how I am using Blazor WebView in a project I am working on, https://github.com/dhindrik/CodeBlogger.

You have to create a wwwroot folder in your project and that need to contain an HTML file and you need to include the following script:

<script src="_framework/blazor.webview.js"></script>

Note, the script tag should not include autostart="true". That is only for .NET MAUI apps.

The HTML file needs to contain a container where the component should be inserted. For example, you can insert a div with an id set to “app”. You will point to that selector from your code.

<div id="app"></div>

CSS file or other content should be placed inside of the wwwroot folder.

In the project file you should change the top line from:

<Project Sdk="Microsoft.NET.Sdk">

to

<Project Sdk="Microsoft.NET.Sdk.Razor">

If you not are changing that, it will not work to have razor components inside of that project.

In the project file, you also have to add this rows to handle the web content.

<ItemGroup>
    <Content Update="wwwroot\**">
        <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
    </Content>
</ItemGroup>

WinForms

The NuGet package you need to install is Microsoft.AspNetCore.Components.WebView.WindowsForms

Open the code view for the form where you want to add the BlazorWebView to. You need to create a ServiceCollection because WinForms will not have that in the startup as a .NET MAUI app. If you are using BlazorWebView in multiple places in your app you can of course reuse the same ServiceCollection between them. You need to add the following using:

using Microsoft.AspNetCore.Components.WebView.WindowsForms;

When you have done that you can call AddBlazorWebView() to add it to the ServiceCollection.

After that, you can create the BlazorWebView and add the component you want to show to it. For the HostPage property you should specify the path to the HTML file.

The last step is to add the BlazorWebView to the view, in this case to the root control of the view. But you can add it to which control supports subcontrols that you want.

var services = new ServiceCollection();
services.AddBlazorWebView();

var blazorWebView = new BlazorWebView()
{
    Dock = DockStyle.Fill,
    HostPage = @"wwwroot\index.html",
    Services = services.BuildServiceProvider(),
};

blazorWebView.RootComponents.Add<Editor>("#app");

Controls.Add(blazorWebView);

WPF

The NuGet package you need to install is Microsoft.AspNetCore.Components.WebView.Wpf

To add a BlazorWebView to a WPF is very similar to how it works for WinForms, but you will do it from "the code behind" and you need to create an instance of the RootComponent object and set the ComponentType property to the type of component you want to use.

The reason I don't do this in the XAML is that we need to pass the ServiceCollection. It is doable in XAML too, if you prefer it, but I think this way is more simple.

var services = new ServiceCollection();
        services.AddBlazorWebView();

        services.AddSingleton<IPostService, PostService>();
        var blazorWebView = new BlazorWebView()
        {
            HostPage = @"wwwroot\index.html",
            Services = services.BuildServiceProvider(),

        };

        blazorWebView.RootComponents.Add(new RootComponent()
        { 
            ComponentType = typeof(Editor),
            Selector = "#app"
        });

        Content = blazorWebView;

On Geek dagen I did a talk about .NET MAUI. The talk is now uploaded to YouTube.

Note, the talk is in Swedish.

TinyMvvm is an open-source project I started back in 2017 primary to be used in my own apps, both private projects, and client projects. I recently released 3.0 that has been in preview for a long time and I used it in apps I have shipped to the app stores. After the 3.0 release, I have focused on bringing TinyMvvm to .NET MAUI and now there is a public preview available.

Instead of migrating the TinyMvvm.Forms project to .NET MAUI I created a new .NET 6 project with the name TinyMvvm.Maui. That means that both will live side-by-side The first thing I did there was to copy all the code from the Forms project and migrate it to MAUI, .NET 6, and C#10. That means that I am using the MAUI namespaces instead of the Xamarin.Forms namespaced, I am using global usings and file-scoped namespaces.

The big change compared to the Forms version of TinyMvvm is how you initialized it. The only thing you need to do now is to use the extension method UseTinyMvvm() on the MauiAppBuilder and initialize the resolver as shown below. If your ViewModels or View are in another assembly you can specify it as an argument to UseTinyMvvm(Assembly viewAssembly, Assembly, viewModelAssembly). If you don't use Shell navigation you can pass an argument to use classic navigation. UseTinyMvvm(bool useClassicNavigation).

The next step is to analyze how I can optimize TinyMvvm for .NET MAUI.

public static MauiApp CreateMauiApp()
{
            var builder = MauiApp.CreateBuilder();
            builder
                .UseMauiApp<App>()
                .ConfigureFonts(fonts =>
                {
                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                })
                .UseTinyMvvm();

            var app = builder.Build();

            Resolver.SetResolver(new ServiceProviderResolver(app.Services));

            return app;
}

You can install the package from NuGet.

To find out more about how to use TinyMvvm you can read the documentation for Xamarin.Forms. Before the stable release of this package, the documentation will be fully updated with how to use it with .NET MAUI.

If you have feedback please create an issue on GitHub.

Visual Studio for Mac is not supporting the current .NET preview. But that doesn't mean that you cannot start to play with MAUI. But you have to use the terminal and for example Visual Studio Code.

Install .NET MAUI

If you do not have installed the preview yet, I recommend you to do that with the Maui Check Tool, https://github.com/Redth/dotnet-maui-check. That will guide you through the process and make sure that you have everything you need install.

Create a project

To create a new project, just use the dotnet new command as with all .NET Core/.NET 5 projects.

dotnet new maui -n MyFirstMauiApp

or this for a MAUI Blazor (Hybrid app) project.

dotnet new maui-blazor -n MyFirstMauiApp

If you want to take a look at a sample app, you may have seen the Weather Twenty One app by David Ortinau. That project is open-source and a good app to sample to start with if you want to explore MAUI, https://github.com/davidortinau/WeatherTwentyOne.

Run a .NET MAUI app

When you want to run an MAUI app from a command, you need to specify what framework you want to use, for example, .NET 6 iOS.

# iOS
dotnet build {YourProjectName} -t:Run -f net6.0-ios
# MacOS
dotnet build {YourProjectName} -t:Run -f net6.0-maccatalyst
# Android
dotnet build {YourProjectName} -t:Run -f net6.0-android

Weather Twenty One app running on Mac Catalyst and iOS simulator

Run on a specific iOS simulator

When you started the iOS project, it probary started on an iPad simulator. If you want to use another simulator you need to set the UDID of the simulator in the command like this:

dotnet build {YourProjectName} -t:Run -f net6.0-ios /p:_DeviceName=:v2:udid={DeviceUDID}

To get all UDID:s run the following command:

xcrun simctl list

Run on an Android emulator

To run it on an Android emulator, just start the emulator before you start the app.

Weather Twenty One app running on Android emulator

More resources

Official MAUI Sample repo - https://github.com/dotnet/maui-samples
MAUI source code - https://github.com/dotnet/maui
Announcing .NET MAUI Preview 4 - https://devblogs.microsoft.com/dotnet/announcing-net-maui-preview-4