macで.netのMAUIをHello Worldしてみる

xcode-select: note: Command line tools are already installed. Use "Software Update" in System Settings or the softwareupdate command line interface to install updates

が、既に入ってた

kurehajime

.net MAUI拡張をVS Codeに入れるのを忘れてた

kurehajime

ここから先はこのページを参考に作業する

kurehajime

エクスプローラーで [.NET プロジェクトの作成] または >CTRL/CMD+SHIFT+P[.NET: 新しいプロジェクト...] をクリックします。

とあるが、「.NET プロジェクトの作成」が見つからなかったので

CMD+SHIFT+P → .NET: 新しいプロジェクト → .NET MAUI アプリ

を選択

kurehajime

色々ファイルができた

kurehajime

右下の{}をクリックしてデバイスターゲットがMacになってることを確認

kurehajime

VS Codeの実行とデバッグを押してみる

kurehajime

うごいた！

kurehajime

MainPage.xamlをいじって「Hello World」を「こんにちは世界 🌏」にした
このファイルは全プラットフォーム共通っぽい

kurehajime

ボタンはこのようなタグで定義されている

<Button
    x:Name="CounterBtn"
    Text="Click me"
    SemanticProperties.Hint="Counts the number of times you click"
    Clicked="OnCounterClicked"
    HorizontalOptions="Fill"/>

Clicked="OnCounterClicked"

とあるのでボタンをクリックするとMainPage.xaml.csの以下のメソッドが呼ばれる

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);
}

kurehajime

だいぶ久しぶりにC#のコード読んだが「あーこんな感じだったなぁ」と思い出してきた

しかし
SemanticScreenReader.Announce(CounterBtn.Text);
ははじめて見た

スクリーンリーダーに読み上げさせるためのメソッドらしい

なるほど

kurehajime

なんとなくの理解

kurehajime

MauiProgram.csがAppをビルドしている

var builder = MauiApp.CreateBuilder();
		builder
			.UseMauiApp<App>()
			.ConfigureFonts(fonts =>
			{
				fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
				fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
			});

kurehajime

AppはMainPageというプロパティを持っていて、そこにAppShellを代入している

MainPage = new AppShell();

kurehajime

AppShellはアプリケーションのUIの容れ物的な役割を果たしている(？)
そしてサンプルプログラムではMainPageというコンテンツを1つ持っている

<ShellContent
    Title="Home"
    ContentTemplate="{DataTemplate local:MainPage}"
    Route="MainPage" />

kurehajime

そしてMainPageはUIの大部分を担っている

ただし画面上部の「Home」というバーはAppShellのほうで表示している
MainPageはそこから下の部分

kurehajime

テキストボックスとラベルを追加してみる

MainPage.xaml

<Entry
    x:Name="NameEntry"
    Placeholder="Enter your name"
    TextChanged="OnEntryTextChanged"
    SemanticProperties.Hint="Enter your name"/>
<Label
    x:Name="GreetingLabel"/>

テキスト変更時のイベント

MainPage.xaml.cs

private void OnEntryTextChanged(object sender, TextChangedEventArgs e)
{
    GreetingLabel.Text = $"こんにちは、{e.NewTextValue}さん"; ;
}

反映された

kurehajime

VS Codeでの開発は微妙かもしれない

AppクラスでMainPageに代入している箇所

IDEではMauiApp1.MainPageと表示され、CMDクリックするとMainPageクラスに飛ぶけれど、このプロパティの実態はMainPageクラスではない

たまたま同じ名前なだけのMainPageプロパティらしい

C#でがっつり開発したければWindowsのVisual Studio本家を使いなさいってことかなぁ

kurehajime

VSCodeは悪くなかった
設定でOmnisharp使うようにチェックを入れたら良い感じの挙動になった

kurehajime

しかし公式プラグインの説明を見るとOmniSharpは旧機能っぽい扱いなんだよなぁ

優れた Language Server 機能を活用したくない場合は、拡張機能設定に移動してdotnet.server.useOmnisharptrue に設定することで、OmniSharp の使用に戻すことができます。次に、C# Dev Kit をアンインストールまたは無効にします。最後に、VS Code を再起動してこれを有効にします。