# MAUI Beach - Updating to .NET MAUI GA 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](https://github.com/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](https://visualstudio.microsoft.com/vs/preview/) 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](https://cdn.hashnode.com/res/hashnode/image/upload/v1656809009462/xxYAriqZC.webp align="center") 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](https://blog.taranissoftware.com/vs2022-173-preview-11-missing-xamarin-sdks) for more details. ![Visual Studio 2022 Installer](https://cdn.hashnode.com/res/hashnode/image/upload/v1656808979618/dyyjh6Jbb.webp align="center") ## 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](https://cdn.hashnode.com/res/hashnode/image/upload/v1656808864549/hp_AWrsj8.webp align="center") 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](https://cdn.hashnode.com/res/hashnode/image/upload/v1656808902036/l7s-yC91C.webp align="center") 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](https://cdn.hashnode.com/res/hashnode/image/upload/v1656808947390/_m5ghc6Th.webp align="center") 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](https://blog.taranissoftware.com/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](https://devblogs.microsoft.com/dotnet/welcome-to-csharp-10/#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](https://blog.taranissoftware.com/platform-specific-code-using-partial-classes-in-net-maui). 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](https://blog.taranissoftware.com/platform-specific-code-using-partial-classes-in-net-maui) to implement `DeviceInfoService`. I copied the `Platforms//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: ```xml ``` 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: ```xml ``` ## 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](https://cdn.hashnode.com/res/hashnode/image/upload/v1656867858703/6ghKBP_hq.webp align="center") 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](https://github.com/irongut/MauiBeach/pull/18) 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](https://github.com/irongut/MauiBeach/blob/7adb82c5f693acb847295681b19254ed0d7b4a05/.github/workflows/ci-build.yml) workflow on GitHub.     Cover image includes a vector created by brgfx from [www.freepik.com](https://www.freepik.com/vectors/beach-cartoon).