MAUI Cross-Platform Podcast Application (Conf 2021)

introduced

At the. NET Conf 2021 conference, Microsoft demonstrated cross-platform applications based on. NET6, with ASP.NET Core, Blazor,. NET MAUI, microservices and other functions. 浏览由 ASP.NET Core 和 Blazor 提供支持的 .NET Podcasts 应用的实时运行版本：https://dotnetpodcasts.azurewebsites.net/。

project system

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

• Web: Blazor WebAssembly application and ASP.NET Core Blazor website
• APIs: ASP.NET Core Web API, anxiety worker, and podcast update worker
• Blazor Hybrid Application: An example of a hybrid application of. NET MAUI and Blazor.

MAUI Project

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

Features introduction

• Global Usings

Global reference, just add the Global keyword before any using statement to make the reference global

global using Microsoft.Maui;

• built-in themes

Modify theme settings based on different platforms through UserAppTheme, Light/Dark

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

• message center

You have used Messenger like mvmlight, and you can subscribe, publish, unsubscribe and other functions through Subscribe/Send/Unsubscribe.

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

//取消订阅
MessagingCenter.Instance.Unsubscribe<string>("", "");

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

• inner container

For the unified registration and Kubernetes Engine provided in MAUI, custom services are added through MauiAppBuilder and corresponding services are obtained through MauiWinUIApplication.

//注册服务
public static MauiAppBuilder ConfigureServices(this MauiAppBuilder builder)
{
    builder.Services.TryAddSingleton<PlayerService>();
}

//调用平台的容器服务
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, local resource files, etc.

access the font

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

Access photo resources

<image Source="xxx.png" />

localized resources

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

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

platformization

In XAML and code, you can process different UIs and business logic through platformization, and you can distinguish platforms and types through OnPlatform and OnIdiom.

Font settings on different platforms

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

Settings for different devices

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

Essentials

Built-in Essentials provides access to local networks WIFI, Bluetooth and more.

//验证是否联网
var current = Connectivity.NetworkAccess;
if (current != NetworkAccess.Internet)
{
    //...
}

//验证是否存在WIFI连接
var profiles = Connectivity.ConnectionProfiles;
var hasWifi = profiles.Contains(ConnectionProfile.WiFi);

if (hasWifi)
{
    //...
}

mixed mode

In XAML, use BlazorWebView

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

项目已在 GitHub 发布, https://github.com/microsoft/dotnet-podcasts, 更多特性探索源代码。