MAUI Cross-Platform Podcast App (Conf 2021)

Introduction

At the .NET Conf 2021 conference, Microsoft showcased cross-platform applications based on .NET 6, featuring ASP.NET Core, Blazor, .NET MAUI, microservices, and more.

Browse the live running version of the .NET Podcasts app powered by ASP.NET Core and Blazor: https://dotnetpodcasts.azurewebsites.net/.

Project Architecture

Mobile and Desktop: Native .NET MAUI applications for iOS, Android, macOS, and Windows

• Web: Blazor WebAssembly application and ASP.NET Core Blazor website
• API: ASP.NET Core Web API, ingestion worker, and podcast update worker
• Blazor hybrid application: An example of a hybrid application combining .NET MAUI and Blazor.

MAUI Project

A cross-platform project solution from a single codebase, providing native .NET applications for Android, iOS, macOS, and Windows. The solution is as follows:

Feature Introduction

• Global Usings

Global usings allow you to make a using directive global simply by adding the global keyword before any using statement.

global using Microsoft.Maui;

• Built-in Theme

Modify theme settings based on different platforms using UserAppTheme, supporting Light/Dark modes.

switch (Settings.Theme)
{
    default:
    case OSAppTheme.Light:
        App.Current.UserAppTheme = OSAppTheme.Light;
        break;
    case OSAppTheme.Dark:
        App.Current.UserAppTheme = OSAppTheme.Dark;
        break;
}

• Messaging Center

Similar to the Messenger in MVVMLight, it supports subscribing, sending, and unsubscribing via Subscribe/Send/Unsubscribe.

// Subscribe
MessagingCenter.Instance.Subscribe<string>("", "", async (sender) =>
{
    //...
});

// Unsubscribe
MessagingCenter.Instance.Unsubscribe<string>("", "");

// Send
MessagingCenter.Instance.Send<string>("", "");

• Built-in Container

MAUI provides unified registration and container services. Custom services can be added via MauiAppBuilder and retrieved via MauiWinUIApplication.

// Register service
public static MauiAppBuilder ConfigureServices(this MauiAppBuilder builder)
{
    builder.Services.TryAddSingleton<PlayerService>();
}

// Access platform container service
public static class ServicesProvider
{
    public static TService GetService<TService>()
        => Current.GetService<TService>();

    public static IServiceProvider Current
        =>
#if WINDOWS10_0_17763_0_OR_GREATER
        MauiWinUIApplication.Current.Services;
#elif ANDROID
        MauiApplication.Current.Services;
#elif IOS || MACCATALYST
        MauiUIApplicationDelegate.Current.Services;
#else
        null;
#endif
}

Unified Resource Management

MAUI unifies the management and access of resources such as fonts, icons, styles, and local resource files.

Accessing fonts:

<Setter Property="FontFamily" Value="SegoeUiSemibold" />

Accessing image resources:

<image Source="xxx.png" />

Localized resources:

xmlns:res="clr-namespace:Microsoft.NetConf2021.Maui.Resources.Strings"

<label Text="{x:Static res:AppResource.Categories}" />

Platform-Specific Code

In both XAML and code-behind, you can handle different UI and business logic per platform using OnPlatform and OnIdiom to differentiate between platforms and device types.

Font size settings for different platforms:

<label FontSize="{OnPlatform UWP=24, macOS=24, Android=14,iOS=14}" />

Settings for different device idioms:

<GridItemsLayout Span="{OnIdiom Phone=2, Tablet=3, Desktop=3}" />

Essentials

Built-in Essentials provides access to native networking (WiFi, Bluetooth, etc.).

// Check network connectivity
var current = Connectivity.NetworkAccess;
if (current != NetworkAccess.Internet)
{
    //...
}

// Check for WiFi connection
var profiles = Connectivity.ConnectionProfiles;
var hasWifi = profiles.Contains(ConnectionProfile.WiFi);

if (hasWifi)
{
    //...
}

Hybrid Mode

Using BlazorWebView in XAML:

xmlns:b="clr-namespace:Microsoft.AspNetCore.Components.WebView.Maui;assembly=Microsoft.AspNetCore.Components.WebView.Maui"

<b:BlazorWebView
  x:Name="MyWebView"
  Margin="10,0"
  HostPage="wwwroot/index.html"
  BackgroundColor="{AppThemeBinding Light={StaticResource Grey1}, Dark={StaticResource Grey9}}"
>
  <b:BlazorWebView.RootComponents>
    <b:RootComponent
      Selector="app"
      ComponentType="{x:Type pages:ListenTogetherComponent}"
    />
  </b:BlazorWebView.RootComponents>
</b:BlazorWebView>

Summary

The project is published on GitHub at https://github.com/microsoft/dotnet-podcasts. Explore the source code for more features.