.NET MAUIのテンプレートソースをチェック
「前編」でWindowsアプリはコンパイルできましたので、このサンプルソースをチェックします。今回も1行もソースを書いてません。
プロジェクト作成直後のテンプレートソースはこちら
ファイル一覧
スケルトンにしてはファイル数があるように見えますが
の2つに分かれています。
/platformsフォルダ下部のソースは基本いじらずに、設定は一番下の MauiProgram.cs、GUI周りはxamlとコードビハインドを変更する形になります。
エントリーポイント
Windowsの場合
Windows固有のエントリーポイントは /Platforms/Windows/App.xaml(.cs) のようです。中間生成コードでもこのクラスに Main() が生成されています。
using Microsoft.UI.Xaml;
namespace MauiApp1.WinUI;
public partial class App : MauiWinUIApplication
{
public App()
{
this.InitializeComponent();
}
protected override MauiApp CreateMauiApp() => MauiProgram.CreateMauiApp();
}
注目は MauiProgram.CreateMauiApp() を呼び出すようにoverrideしている点です。これはAndroid,
iOSも同様で、実質的なエントリーポイントは MauiProgram.cs になるようです。
Androidの場合
Androidも MauiProgram.CreateMauiApp()が呼び出されています。
using Android.App;
using Android.Runtime;
namespace MauiApp1;
[Application]
public class MainApplication : MauiApplication
{
public MainApplication(IntPtr handle, JniHandleOwnership ownership)
: base(handle, ownership)
{
}
protected override MauiApp CreateMauiApp() => MauiProgram.CreateMauiApp();
}
Mac / iOS
MacCatalystとiOSは同じコードになっています。Windows,Androidと同じように MauiProgram.CreateMauiApp() を呼び出しているだけです。
using ObjCRuntime;
using UIKit;
namespace MauiApp1;
public class Program
{
// This is the main entry point of the application.
static void Main(string[] args)
{
// if you want to use a different Application Delegate class from "AppDelegate"
// you can specify it here.
UIApplication.Main(args, null, typeof(AppDelegate));
}
}
using Foundation;
namespace MauiApp1;
[Register("AppDelegate")]
public class AppDelegate : MauiUIApplicationDelegate
{
protected override MauiApp CreateMauiApp() => MauiProgram.CreateMauiApp();
}
共通のエントリーポイント
ということで、WindowsもAndroidもiOSも必ず MauiProgram.CreateMauiApp() メソッドを呼び出しています。つまりここがプラットフォームに依存しない共通のエントリーポイントとなります。
namespace MauiApp1;
public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.ConfigureFonts(fonts =>
{
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
});
return builder.Build();
}
}
ASP.NETやBlazerと同様のGeneric Hostパターン、公式には builder patternと言うようです。
サンプルではフォントをエイリアス名を付けて登録しています。
そしてUseMauiApp<App>()を使って Appクラスが呼び出され、GUIが定義されていきます。
手の込んだアプリを作る場合はここにハンドラーを登録していくことになると思います。
詳しくは以下を参照してください。
https://docs.microsoft.com/ja-jp/dotnet/maui/fundamentals/app-startup
GUI部
GUI部分としてはAppクラスを頂点とした xaml/xaml.csファイル群になります。
App クラス
WPFなどと同様に ResouceDictionary でリソース定義されています。
Appクラスは Application クラスを継承しており、MainPageプロパティに実際のページを生成するようです。
<?xml version = "1.0" encoding = "UTF-8" ?>
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MauiApp1"
x:Class="MauiApp1.App">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Resources/Colors.xaml" />
<ResourceDictionary Source="Resources/Styles.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
namespace MauiApp1;
public partial class App : Application
{
public App()
{
InitializeComponent();
MainPage = new AppShell();
}
}
サンプルアプリでは MainPage = new AppShell() ですので次は AppShellを確認します。
AppShell クラス
csファイルの方はいつもの InitializeComponent()の呼び出しだけなので割愛して、xamlだけ見てみます。
<?xml version="1.0" encoding="UTF-8" ?>
<Shell
x:Class="MauiApp1.AppShell"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MauiApp1"
Shell.FlyoutBehavior="Disabled">
<ShellContent
Title="Home"
ContentTemplate="{DataTemplate local:MainPage}"
Route="MainPage" />
</Shell>
Shell コントロールが作られています。詳しくは公式ドキュメントを見ていただくとして、一般的なアプリによくある機能を持っている複合コントロールのようです。以下の機能を持っています。
- メニュー機能（ドロップダウンする3本線のアレ）
- ページ遷移機能
- タブ
- 検索ボックス、検索機能
MainPage
AppShellでページとして定義されているのがこの MainPage クラスです。
画面に表示されているのがこれになります。
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiApp1.MainPage">
<ScrollView>
<VerticalStackLayout
Spacing="25"
Padding="30,0"
VerticalOptions="Center">
<Image
Source="dotnet_bot.png"
SemanticProperties.Description="Cute dot net bot waving hi to you!"
HeightRequest="200"
HorizontalOptions="Center" />
<Label
Text="Hello, World!"
SemanticProperties.HeadingLevel="Level1"
FontSize="32"
HorizontalOptions="Center" />
<Label
Text="Welcome to .NET Multi-platform App UI"
SemanticProperties.HeadingLevel="Level2"
SemanticProperties.Description="Welcome to dot net Multi platform App U I"
FontSize="18"
HorizontalOptions="Center" />
<Button
x:Name="CounterBtn"
Text="Click me"
SemanticProperties.Hint="Counts the number of times you click"
Clicked="OnCounterClicked"
HorizontalOptions="Center" />
</VerticalStackLayout>
</ScrollView>
</ContentPage>
このxamlの結果が以下のGUI画面になります。
一番上の 「Home」 はShellの機能です。
「Click me」の実装はコードビハインドにあります。
namespace MauiApp1;
public partial class MainPage : ContentPage
{
int count = 0;
public MainPage()
{
InitializeComponent();
}
private void OnCounterClicked(object sender, EventArgs e)
{
count++;
if (count == 1)
CounterBtn.Text = $"Clicked {count} time";
else
CounterBtn.Text = $"Clicked {count} times";
SemanticScreenReader.Announce(CounterBtn.Text);
}
}
参考
.NET MAUIらしいところは 今のところShellぐらいしか出てきてませんが公式ドキュメントも確認してください。
公式ドキュメント
エントリーポイント
Shell