.NET MAUI で Microsoft.Maui.Graphics.Controls を使ってみた
いわさです。
.NET MAUI を使うと、Visual Studio と .NET でクロスプラットフォームアプリケーションを開発することが出来ます。
これまでいくつか試した際には標準コンポーネントを使いました。そしてそれらは各プラットフォームではネイティブコンポーネントとしてレンダリングされています。
.NET MAUI ではクロスプラットフォームのグラフィックライブラリとして Microsoft.Maui.Graphics というものがあります。
これを使うと、共通のAPIでプラットフォーム間で同じ描画コードを使うことが出来ます。
そして、さらにそれを使ってコンポーネントを独自レンダリングさせるためのライブラリ、Microsoft.Maui.Graphics.Controlsというものが存在します。
本日はこちらを試してみました。
一点注意事項があって、Microsoft.Maui.Graphics.Controlsはまだプレリリース段階のものになりますので、プロダクトへの導入は控えたほうが良いでしょう。
使ってみる
以下のようにデフォルトで適用されているスタイルを削除し、標準コンポーネントをいくつか以下のように並べてみました。
このアプリケーションに対して、Microsoft.Maui.Graphics.Controlsを導入してみます。
今回はVisual Studio 2022 for Mac で試していますが、Windows版 Visual Studio でも導入の流れは同じです。
まずはじめに、プロジェクトへNuGetパッケージを追加する必要があるのですが、nuget.orgでは公開されていません。
専用のパッケージソースを追加し、プレリリース版を導入する必要があります。
https://aka.ms/maui-graphics-controls-nightly/index.jsonを追加しましょう。
追加後、「プレリリースを含める」を有効にした状態で、Microsoft.Maui.Graphics.Controlsを検索しパッケージを追加します。
そして、初期化コードで以下のハイライト部分を追加します。
XAML側は特に変更する必要がなくて、以下のコードで一部の対象コンポーネントのレンダラーがDIされ、独自にレンダリングされるコンポーネントに切り替わります。
using Microsoft.Maui.Graphics.Controls.Hosting;
namespace hoge0705maui;
public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.ConfigureGraphicsControls()
.ConfigureFonts(fonts =>
{
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
});
return builder.Build();
}
}
以下のようになります。
おぉ。
iOSとAndroidで比較できるように並べてみましたが、一部コンポーネントは見た目が同じになっていますね。
本日時点でサポートされているコントロールは以下です。
ButtonCheckBoxDatePickerEditorEntryProgressBarRadioButtonSliderStepperSwitchTimePicker
Labelは対象外なので、通常どおりネイティブコンポーネントが描画されておりプラットフォーム間の差分があります。
DrawableType別の比較
さらに、Microsoft.Maui.Graphics.Controlsでは３つの外観テーマが用意されています。
- Cupertino
- Material
- Fluent
ConfigureGraphicsControlsでDIする際に、パラメータとして指定することが出来て、全コンポーネント一括での指定になります。
:
public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.ConfigureGraphicsControls(Microsoft.Maui.Graphics.Controls.DrawableType.Cupertino)
.ConfigureFonts(fonts =>
{
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
});
return builder.Build();
}
}
引数なしのデフォルトはDrawableType.Materialとなっており、各コンポーネントごとに３種類のレンダリングコンポーネントが実装されています。
例えば、Buttonであれば MaterialButtonDrawable、CupertinoButtonDrawable、FluentButtonDrawableの3つが用意されていて、canvasへの描画処理がそれぞれ実装されています。
DrawableType.Cupertino
こちらはCupertinoです。
iOS感がありますね。
SwitchがON/OFF切り替えても常に緑だったので、まだこれからという感じでしょうか。
DrawableType.Fluent
こちらはFluentです。
Windows感がありますね。
さいごに
本日は .NET MAUI で Microsoft.Maui.Graphics.Controls を使ってみました。
.NET MAUI 標準では良くも悪くもネイティブレンダリングなのでどうしてもプラットフォーム間のレイアウトやスタイルの差が出やすいですが、Flutterのように独自レンダリングでプラットフォーム共通化したいみたいなシーンでは検討の余地ありそうな気がします。
見た目を拡張したい場合もプラットフォームごとに拡張コードを実装しなくて良いのでライブラリが実践投入出来るレベルまであがっていればUI実装を統一するうえでおもしろい選択肢になるかもしれません。
