MAUI UI July

It’s Maui UI July which means there are a bunch of great blog posts about creating user interfaces in MAUI coming out all month. You can check out the rest of the posts over at Matt Goldman’s blog. Thanks to Matt for organising.

For my post, I’ve teamed up with my buddy Kym Phillpotts. We’re both taking on the same UI Challenge, but Kym has created the UI using Maui XAML, and I’ve built it using Maui Blazor. If you havn’t already seen it, check out Kym’s blog post from yesterday MAUI UI Challenge

The design we’re implementing is a music teacher’s app that we found on dribbble, created by Sumit Choudhary. You can check it out at [https://dribbble.com/shots/17453615-Classfly-Music-app-concept]

Design

Blazor Maui

Blazor MAUI is a new way of creating mobile apps with .NET.

It’s built on top of the MAUI, so you get all the benefits of the ecosystem

The first step was to change the navigation. The Blazor template started out with a navigation menu on the left of the screen if you were on large devices that squashed down to be top navigation on mobile. Our design called for bottom tabs.

Blank Maui Blazor app running on Windows 11

And here it is running on an Android Emulator Blank Maui Blazor app running on and Android Emulator

I kept the existing NavigationBar.razor component, but

this will be a post about blazor