MAUIクロスプラットフォームポッドキャストアプリケーションConf 2021

MAUIクロスプラットフォームポッドキャストアプリケーションConf 2021

モバイルおよびデスクトップ:iOS、Android、macOS、Windows用のネイティブ. NET MAUIアプリ

最后更新 2021/12/03 12:27
微信公众号【痕迹gg CodeShare】
预计阅读 3 分钟
分类
MAUI
标签
.NET C# MAUI オープンソースソース オープンソースMaUI

プレゼンテーション:プレゼンテーション

NET Conf 2021カンファレンスで、マイクロソフトはASP.NET Core、Blazor、. NET MAUI、マイクロサービスなどの機能を備えた. NET 6ベースのクロスプラットフォームアプリケーションを展示した。 浏览由 ASP.NET Core 和 Blazor 提供支持的 .NET Podcasts 应用的实时运行版本:https://dotnetpodcasts.azurewebsites.net/

プロジェクトシステムプロジェクト

モバイルおよびデスクトップ:iOS、Android、macOS、Windows用のネイティブ. NET MAUIアプリ

  • Web:Blazor Web AssemblyアプリケーションとASP.NET Core Blazor Webサイト
  • API:ASP.NET Core Web API 、インジェストワーカー、ポッドキャスト更新ワーカー
  • Blazorハイブリッドアプリケーション:. NET MAUIとBlazorのハイブリッドアプリケーションの例。

MAUIプロジェクト

Android、iOS、macOS、およびWindowsネイティブ. NETアプリケーション用の単一コードベースのクロスプラットフォームプロジェクトソリューション、以下のソリューション

特徴の紹介

  • Global Usings

グローバル参照、任意のusingステートメントの前にGlobalキーワードを追加するだけで、参照をグローバルにする

global using Microsoft.Maui;
  • 組み込みのテーマ

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

使用済み類似mvvmlight 中のMessenger類似で、Subscribe/Send/Unsubscribeによって購読、公開、購読解除などの機能を完成することができる。

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

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

//发布
MessagingCenter.Instance.Send<string>("", "");
  • 組み込みコンテナ。

MAUIで提供される統合登録およびコンテナサービスは、MauiAppBuilderによるカスタムサービスの追加およびMauiWinUI Applicationによる対応サービスの取得を行う。

//注册服务
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
}

統合リソース管理

MAUIでは、リソースの管理およびアクセス、例えば、フォント、アイコン、スタイル、ローカルリソースファイルなどが統一されている。

フォントへのアクセス

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

写真資源へのアクセス

<image Source="xxx.png" />

ローカライズされたリソース

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

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

プラットフォーム化され

XAMLとコードでは、プラットフォーム化によって異なるUIとビジネスロジックを処理でき、OnPlatformとOnIdiomによってプラットフォームとタイプを区別できます。

異なるプラットフォームでのフォント設定

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

各種機器の設定

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

Essentials

内蔵Essentialsは、ネイティブネットワークWIFI、Bluetoothなどにアクセスできます。

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

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

if (hasWifi)
{
    //...
}

ブレンドモード#ブレンドモード#

XAMLでの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>

まとめまとめまとめ

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

Keep Exploring

延伸阅读

更多文章
同分类 / 同标签 2024/04/11

NET MAUIオープンソースUIツールキット-Uranium

私は. NET MAUI関連のUIフレームワークを共有するためにWeChatパブリックアカウントのバックグラウンドメッセージに小さなパートナーを持っていました。今日、Dayaoは. NET MAUIオープンソース、無料のUIツールキットを共有しました。

继续阅读
同分类 / 同标签 2023/01/12

Maui Blazorはカメラを使用して

Maui BlazorのインターフェイスはWebViewでレンダリングされるため、ネイティブカメラはインターフェイスコンポーネントをバインドする必要があるため、Androidカメラを使用するとアクセスできません。

继续阅读