Xamarin.Mac アプリをstoryboard で作ってみる

Microsoft Developer Day 参戦。Balzor来そうだなーと思いつつ、Visual Studio 2022 for Mac、 Xamarin で Cocoa アプリが作れるということなので、試す。

最近すっかり、Mac 派になって、フリマサイトで中古の Mac をたびたび購入したりしているのだけれど、きっかけは、Xamarin をビルドしたいので、MacBook Air を購入したところからなことを思い出した。

SwiftUIも面白いけど、慣れたC#とstoryboardがどんなものか簡単にUI作れるのか、試したい。

以下のチュートリアルが、手取り足取りで分かりやすそうなので、やってみる。

Hello, Mac – チュートリアル – Xamarin | Microsoft Docs

1.Visual Studio 2022 form Mac のダウンロード、インストールから新規プロジェクトの作成

起動すると、キーバインドが選べる。Visual Studio Code の設定が選べるのは嬉しい。

下図赤枠、Mac-App-General-Cocoa App を選択

適当に作成

生成されるファイルの役割

Main.cs	アプリのメインエントリポイントが含まれています。アプリが起動した時点では、Main クラスには実行される最初のメソッドが含まれます。
Appdelegate	オペレーティングシステムからのイベントをリッスンするクラスが含まれています。
Info.plist	アプリケーション名、アイコンなどのアプリのプロパティが含まれています。
Entitlements.plist	アプリの権利が含まれています。アプリの権利によってサンドボックスや iCloud のサポートなどにアクセスできます。 Xamarin アプリが Entitlements.plist や iCloudなどの権利を制御
Main.storyboard	アプリのユーザーインターフェイス (ウィンドウとメニュー) が定義され、ウィンドウ間の相互接続が Segues 経由でレイアウトされます。ストーリーボードは、ビュー (ユーザーインターフェイス要素) の定義を含む XML ファイルです。このファイルは、Xcode 内の Interface Builder で作成、維持管理することができます。
Viewcontroller.cs	メインウィンドウのコントローラーです。コントローラーについては別の記事で詳しく説明しますが、ここでは、コントローラーを特定のビューのメインエンジンと考えることができます。
ViewController.designer.cs	メイン画面のユーザーインターフェイスとの統合のための組み込みコードが含まれています。最初は空ですが、Xcode Interface Builder を使用してユーザーインターフェイスを作成すると、Visual Studio for Mac によって自動的に作成

2.storyboardの編集

Main.storyboardファイルが生成されるので、ダブルクリック

すると、Xcodeが立ち上がる。

Xcode見た目もいいのだが、アイコンがバージョンによって違ったりしていて、画面に部品をおくウィンドウになかなか辿り着けなかった。

結局下図のように、＋ボタン、もしくは、Shift+Control+L

ViewControllerへドロップする。

次に、下図のアイコンから、Assistantを選択し、

ViewController.hを選択。このファイルを編集して、OutletもしくはActionにより、イベントハンドラーを追加していく。

ビューにコントロールを追加しただけでは、コントロールはコードにアクセスできません。
UI 要素を明示的にコードに公開する必要があり、このために2つのオプションが提供されている。
Xcode では、Outlet と Action はコントロールのドラッグで直接コードに追加されます。
アウトレットまたはアクションを追加するコントロール要素を選択し、キーボードの Control キーを押したまま、コントロールをコードに直接ドラッグします。
通常、開発者は ViewController.designer.cs を開く必要はありません

Outlet	プロパティに似ています。開発者がコントロールをアウトレットに接続すると、プロパティを介してコードに公開されるため、イベントハンドラーをアタッチしたり、メソッドを呼び出したりする操作を行うことができます。
Action	WPF のコマンドパターンに似ています。たとえば、コントロールに対してボタンのクリックなどのアクションが実行されると、コントロールはコード内でメソッドを自動的に呼び出します。開発者は多くのコントロールを同じアクションに接続できる

以下の手順も、普段使いしていれば、慣れるのだろうが、すぐ忘れる自信がある。

ViewController.h(下図右側)へ対象のコンポーネントから、Controlボタンを押しながら、ドロップする。

と、ダイアログが表示されるので、Action/Outloetを選択し、名前を決めて、Connect

コードが生成される。

で、Xcodeを保存、ここで、Visual Studio に戻って、Project – Sync with Xcode すると、先程のViewController .designer.csにXcodeの変更が反映される。

XAMLのデザイナーとかと同じような感じか。こちらは、直接編集しないで、XCodeのstoryboardから編集する感じ。

あとは、これも、XAMLと同じように、ViewController.cs自体に、ロジックを実装する。

using System;

using AppKit;
using Foundation;

namespace Hello_Mac
{
	public partial class ViewController : NSViewController
	{
		private int numberOfTimesClicked = 0;
				public ViewController (IntPtr handle) : base (handle)
		{
		}

		public override void ViewDidLoad ()
		{
			base.ViewDidLoad ();

			// Do any additional setup after loading the view.
			ClickedLabel.StringValue = "ボタンはまだクリックされていません。";
		}

		partial void ClickButton(Foundation.NSObject sender)
		{
			ClickedLabel.StringValue = $"{++this.numberOfTimesClicked} 回クリックされました。";
        }

		public override NSObject RepresentedObject {
			get {
				return base.RepresentedObject;
			}
			set {
				base.RepresentedObject = value;
				// Update the view, if already loaded.
			}
		}
	}
}