MAUI Beach - Updating to .NET MAUI GA

MAUI Beach - Updating to .NET MAUI GA

Dave Murray's photo
Dave Murray
ยทJul 3, 2022ยท

8 min read

Play this article

Table of contents

  • Visual Studio 2022 Preview?
  • The Plan
  • Creating a New .NET MAUI Project
  • Styles and Resources
  • The Project File
  • Pages, ViewModels and Services
  • Platform Specific Code
  • Shell
  • Update Complete!
  • And Finally...

With .NET MAUI reaching GA release at the end of May I decided it was time to update my playground app. The last time I did any work on MAUI Beach it was with Preview 11 so a lot of things have changed. In this article I'll explain the steps I took and the issues I ran into.

The code for my .NET MAUI articles is available on GitHub: irongut/MauiBeach

Visual Studio 2022 Preview?

Although .NET MAUI is GA, Microsoft are still working on the tooling so preview versions of Visual Studio 2022 are still required. The completed .NET MAUI tooling should appear in a full release of Visual Studio 2022 in August for Windows and November for macOS.

.NET MAUI Roadmap

Currently the required versions are Visual Studio 2022 17.3 Preview 2 on Windows or Visual Studio 2022 for Mac 17.3 Preview 2.1 on macOS. When installing select the .NET Multi-platform App UI development workload. If you also develop Xamarin.Forms applications ensure the optional Xamarin item is ticked; see VS2022 17.3 Preview 1.1 - Missing Xamarin SDKs for more details.

Visual Studio 2022 Installer

The Plan

There have been many changes to .NET MAUI since I last worked on MAUI Beach so I decided the best approach was to start fresh with a new project, update the code from the old project and then replace it in the repository. That way changes to required Nuget packages, project configuration and the platform specific files would all be handled and I would only need to make minor code changes.

This is a similar process to how I would convert a Xamarin.Forms app to .NET MAUI. When the .NET Upgrade Assistant gains MAUI support I will reappraise this opinion.

Creating a New .NET MAUI Project

Creating a new .NET MAUI app in Visual Studio 2022 is a simple process. Select MAUI from the Project Types drop down and Visual Studio presents you with three options - .NET MAUI App, .NET MAUI Blazor App and .NET MAUI Class Library. Select .NET MAUI App and click Next.

Create a New .NET MAUI Project

Visual Studio then asks for the project name, location and solution name, like any other .NET project. I gave the project and solution the same names as my original project but a different location.

Configure a New .NET MAUI Project

Finally the Framework should be .NET 6.0 (Long-term support). Click Create and a new cross platform app is created from the .NET MAUI template.

Additional .NET MAUI Project Information

The default template includes platform folders for Android, iOS, MacCatalyst, Tizen and Windows. I'm not interested in the Tizen platform so I deleted the Platforms/Tizen folder. There is also a Target Framework entry for Tizen in the project file but it is commented out so we can ignore it.

At this point my next step was to build and run the template app on all platforms to ensure my development setup was working correctly. Which it was, phew! ๐Ÿ˜…

Styles and Resources

Retracing my First Steps on MAUI Beach I decided to copy over my custom styles and colour palette to the new app first.

Back in .NET MAUI Preview 11 my styles and colours were all in one file: Resources/Styles/DefaultTheme.xaml

In .NET MAUI GA the default template provides two files: Resources/Styles/Colors.xaml and Resources/Styles/Styles.xaml.

I replaced the contents of Colors.xaml with my colour pallete, removing all the default values. I also copied over the contents of Platforms/Android/Resources/values/colors.xml from the old project to the new project.

Styles was slightly more complicated, checking the template styles against my previous custom styles I spotted an extra property that I had not set for Shell (TabBarForegroundColor) and also decided to add a style for TabbedPage, based on the style in the template.

There have been some changes in the Resources folder structure too. Previously the images used to construct the application icon were in the Resources folder, now they live in Resources/AppIcon. Similarly the splash screen image has now moved to the Resources/Splash folder. I copied the images from my old project to the relevant locations in the new project and in Visual Studio set their Build Action properties.

The template project provides two custom fonts but I'm not using both of them in MAUI Beach. I deleted OpenSans-Semibold.ttf from the Resources/Fonts folder and removed the line of code that adds it to the app from MauiProgram.cs.

Missing Image Build Issue

Initially I deleted the images provided by the MAUI template project but when I came to build my app I ran into errors that Resizetizer couldn't find the old images for the icon and splash screen despite them not being listed anywhere in the project file. Resizetizer is part of the tooling that creates the app icon, splash screen and other images for your app so hopefully this issue will be fixed as Visual Studio 2022 is updated. To get past it I restored the template images and was able to build my app, after that first build I was able to delete them again and everything worked. ๐Ÿคทโ€โ™‚๏ธ

The Project File

With my resouces in place I decided it was time to update the project file - MauiBeach.csproj. Examining the new project file I noticed a number of changes from the MAUI preview version, including the syntax for target frameworks and supported OS versions, so it was definitely worth recreating the app from scratch. I copied over my Application Title and Id then setup my icon and splash screen using the new paths to the images.

Pages, ViewModels and Services

Now we get into the actual C# code.

I was able to copy my ViewModels directly from the old project. The only modification required was to remove some using statements that are no longer needed because implicit usings is turned on in the new project file.

MAUI Beach contains one service - DeviceInfoService, which improves on .NET MAUI's built-in DeviceInfo class and is implemented using platform specific partial classes. I'll come back to this in the next section but for now I copied the cross platform partial class Services/DeviceInfoService.cs into the new project.

MAUI Beach contains three pages so I created three new pages with the same names in the new project. When creating pages be sure to pick .NET MAUI Content Page (XAML) not Content Page (XAML) or you'll get the Xamarin version! (Yes, I did that wrong. ๐Ÿคฆโ€โ™‚๏ธ) I copied the contents of the XAML and C# code-behind files from my old project into the new pages and modified the using statements.

Platform Specific Code

MAUI Beach uses platform specific partial classes to implement DeviceInfoService. I copied the Platforms/<platform>/Services/DeviceInfoService.cs files into the new project. No changes were required to the Android and Windows versions of these classes. The MacCatalyst version only required me to delete the existing using statement.

The iOS version of DeviceInfoService.cs required an additional change as Visual Studio recommended I change the marshalling argument for the sysctlbyname system call from LPStr to LPWStr.

The About page in MAUI Beach has two buttons that open websites in the default browser which requires permission on Android. I copied the required intent into Platforms/Android/AndroidManifest.xml from the old project.

Shell

The UI for MAUI Beach is based around a flyout menu built using Shell. In the original version this was defined in App.xaml but the new template provides AppShell.xaml. Copying the XAML into the new file was straightforward with no surprises.

Flyout Menu Issue

When I ran MAUI Beach on Windows I discovered a problem with the flyout menu items - the images were to the right of where they should be and the text labels were not visible at all! ๐Ÿ˜ฒ The menu items were defined as a Grid with two columns using proportional or * sizing:

<Grid ColumnDefinitions="0.25*, 0.75*"
      Style="{StaticResource shellItem}"
      Padding="0, 10">

It seems that .NET MAUI is now using the full width of the window to calculate those sizes instead of the width of the flyout menu as it did before. Once I realised that it was simple to fix by setting a fixed width for the first column:

<Grid ColumnDefinitions="85, *"
      Style="{StaticResource shellItem}"
      Padding="0, 10">

Update Complete!

With all the code moved over, and the minor image issue mentioned earlier fixed, I was able to build and run the new version of MAUI Beach on all platforms. And, once I fixed the flyout menu items it even looks better than the old preview version because bugs have been fixed. ๐Ÿ˜

MAUI Beach Screenshots

In order to maintain version history I deleted my original project from the Git repository and copied the new project in its place. I ran into some issues with missing resources when I tried to build & run the moved project, I reset the Build Action properties of all the resources and cleaned up the changes that caused in the project file. Another Clean & Rebuild and my app was working again. ๐ŸŽ‰

And Finally...

After committing and pushing my changes I created a Pull Request and discovered my CI builds were broken on iOS and Windows. I'll write about building a .NET MAUI app with GitHub Actions again soon but if you want a sneak peak ๐Ÿ•ต๏ธโ€โ™€๏ธ you can find my working CI Build workflow on GitHub.

ย 

ย 

Cover image includes a vector created by brgfx from www.freepik.com.

Did you find this article valuable?

Support Dave Murray by becoming a sponsor. Any amount is appreciated!

See recent sponsors |ย Learn more about Hashnode Sponsors
ย 
Share this