Xamarin.Mac のツール バー

  • [アーティクル]

この記事では、Xamarin.Mac アプリケーションでツール バーを操作する方法について説明します。 Xcode と Interface Builder でのツール バーの作成とメイン、それらをコードに公開し、プログラムで操作する方法について説明します。

Visual Studio for Mac を使用する Xamarin.Mac 開発者は、ツールバー コントロールを含む Xcode を使用する macOS 開発者が使用できる同じ UI コントロールにアクセスできます。 Xamarin.Mac は Xcode と直接統合されるため、Xcode のインターフェイス ビルダーを使用して、ツール バー項目を作成してメインできます。 これらのツール バー項目は、C# でも作成できます。

macOS のツール バーは、ウィンドウの上部セクションに追加され、その機能に関連するコマンドに簡単にアクセスできます。 ツール バーは、アプリケーションのユーザーによって非表示、表示、またはカスタマイズでき、ツール バー項目をさまざまな方法で表示できます。

この記事では、Xamarin.Mac アプリケーションでのツール バーとツール バー項目の操作の基本について説明します。

先に進む前に 、このガイド全体で使用される主要な概念と手法について説明しているため、Hello,Mac の記事 (特 に Xcode とインターフェイス ビルダー と アウトレットとアクション の概要) を読んでください。

Xamarin.Mac Internals ドキュメントの 「C# クラス/メソッドを公開する Objective-C 」セクション も参照 してください。 C# クラスObjective-CをクラスにRegister接続するために使用される属性とExportについて説明します。

ツール バーの概要

macOS アプリケーション内の任意のウィンドウにツールバーを含めることができます。

An example window with a toolbar

ツール バーを使用すると、アプリケーションのユーザーが重要な機能や一般的に使用される機能にすばやくアクセスできます。 たとえば、ドキュメント編集アプリケーションでは、テキストの色を設定したり、フォントを変更したり、現在の文書を印刷したりするためのツール バー項目が提供される場合があります。

ツール バーには、次の 3 つの方法で項目を表示できます。

  1. アイコンとテキスト

    A toolbar with icons and text

  2. アイコンのみ

    An icon-only toolbar

  3. テキストのみ

    A text-only toolbar

ツールバーを右クリックし、コンテキスト メニューから表示モードを選択して、これらのモードを切り替えます。

The contextual menu for a toolbar

同じメニューを使用して、ツールバーをより小さなサイズで表示します。

A toolbar with small icons

メニューでは、ツール バーをカスタマイズすることもできます。

The dialog used to customize a toolbar

Xcode のインターフェイス ビルダーでツール バーを設定する場合、開発者は既定の構成に含まれていない追加のツール バー項目を提供できます。 その後、アプリケーションのユーザーはツール バーをカスタマイズし、必要に応じて事前に定義された項目を追加および削除できます。 もちろん、ツール バーは既定の構成にリセットできます。

ツール バーは自動的に [表示] メニューに接続され、ユーザーはそれを非表示にしたり、表示したり、カスタマイズしたりできます。

Toolbar-related items in the View menu

詳細については、 組み込みのメニュー機能 に関するドキュメントを参照してください。

さらに、インターフェイス ビルダーでツール バーが適切に構成されている場合、アプリケーションは、アプリケーションの複数の起動間でツール バーのカスタマイズを自動的に保持します。

このガイドの次のセクションでは、Xcode の Interface Builder を使用してツール バーを作成してメインする方法と、それらをコードで操作する方法について説明します。

カスタム メイン ウィンドウ コントローラーの設定

アウトレットとアクションを使用して UI 要素を C# コードに公開するには、Xamarin.Mac アプリでカスタム ウィンドウ コントローラーを使用する必要があります。

  1. Xcode のインターフェイス ビルダーでアプリのストーリーボードを開きます。

  2. デザイン画面でウィンドウ コントローラーを選択します。

  3. Identity Inspector に切り替え、クラス名として「WindowController」と入力します。

    Setting a custom class name for the window controller

  4. 変更内容を保存し、Visual Studio for Mac に戻って同期します。

  5. WindowController.cs ファイルが Visual Studio for Mac の Solution Pad のプロジェクトに追加されます。

    Selecting WindowController.cs in the Solution Pad

  6. Xcode のインターフェイス ビルダーでストーリーボードを再度開きます。

  7. WindowController.h ファイルを使用できます。

    The WindowController.h file

Xcode でのツール バーの作成とメイン

ツールバーが作成され、Xcode のインターフェイス ビルダーを使用してメインされます。 ツール バーをアプリケーションに追加するには、Solution Pad でアプリのプライマリ ストーリーボード (この場合は Main.storyboard) をダブルクリックして編集します。

Opening Main.storyboard in the Solution Pad

ライブラリインスペクターで、検索ボックスに「ツール」と入力すると、使用可能なすべてのツールバー項目が簡単に表示されます。

The Library Inspector, filtered to show toolbar items

インターフェイス エディターのウィンドウにツール バーを ドラッグします。 ツールバーを選択した状態で、属性インスペクターでプロパティを設定して動作を構成します。

The Attributes Inspector for a toolbar

使用できるプロパティは次のとおりです。

  1. 表示 - ツール バーにアイコン、テキスト、またはその両方を表示するかどうかを制御します。
  2. 起動時 に表示 - 選択されている場合、ツールバーは既定で表示されます。
  3. カスタマイズ可能 - 選択した場合、ユーザーはツール バーを編集およびカスタマイズできます。
  4. [区切り記号 ] を選択すると、ウィンドウの内容からツールバーが細い水平線で区切られます。
  5. サイズ - ツール バーのサイズを設定します。
  6. 自動保存 - 選択すると、アプリケーションの起動時にユーザーのツール バー構成の変更が保持されます。

[自動保存] オプションを選択し、他のすべてのプロパティを既定の設定のままにします。

インターフェイス階層でツールバーを開いた後、ツールバー項目を選択してカスタマイズ ダイアログを表示します。

Customizing the toolbar

このダイアログを使用して、既にツール バーの一部になっている項目のプロパティを設定したり、アプリケーションの既定のツール バーを設計したり、ツール バーをカスタマイズするときにユーザーが選択する追加のツール バー項目を提供したりできます。 ツールバーに項目を追加するには、ライブラリインスペクターから項目をドラッグします。

The Library Inspector

次のツール バー項目を追加できます。

  • イメージ ツールバー項目 - カスタム イメージをアイコンとして含むツール バー項目。

  • フレキシブルスペースツールバー項目 - 後続のツールバー項目を正当化するために使用される柔軟なスペース。 たとえば、1 つ以上のツール バー項目の後に、柔軟なスペースのツール バー項目が続き、もう 1 つのツール バー項目によって、最後の項目がツール バーの右側にピン留めされます。

  • Space Toolbar Item - ツール バーの項目間の固定スペース

  • 区切り記号ツール バー項目 - 2 つ以上のツールバー項目の間に表示される区切り記号 (グループ化用)

  • ツール バー項目 のカスタマイズ - ユーザーがツール バーをカスタマイズできるようにします

  • ツール バー項目 の印刷 - ユーザーが開いているドキュメントを印刷できるようにします

  • [色の表示] ツール バー項目 - 標準のシステム カラー ピッカーを表示します。

    The system color picker

  • フォント ツールバー項目 の表示 - 標準のシステム フォント ダイアログを表示します。

    The font selector

重要

後で説明するように、検索フィールド、セグメント化されたコントロール、水平スライダーなど、多くの標準的な Cocoa UI コントロールをツール バーに追加することもできます。

ツール バーへの項目の追加

ツールバーに項目を追加するには、インターフェイス階層のツールバーを選択し、その項目のいずれかをクリックすると、カスタマイズ ダイアログが表示されます。 次に、新しい項目をライブラリインスペクターから[許可されたツールバー項目]領域にドラッグします。

The Allowed Toolbar Items in the toolbar customization dialog

新しい項目が既定のツール バーの一部であることを確認するには、[既定のツール バー項目] 領域にドラッグします。

Reordering a toolbar item by dragging

既定のツール バー項目の順序を変更するには、左または右にドラッグします。

次に、Attributes Inspector を使用して、アイテムの既定のプロパティを設定します。

Customizing a toolbar item using the Attributes Inspector

使用できるプロパティは次のとおりです。

  • イメージ名 - 項目のアイコンとして使用するイメージ
  • ラベル - ツール バーの項目に表示するテキスト
  • [パレット ラベル] - [許可されたツール バー項目] 領域のアイテムに表示するテキスト
  • タグ - コード内の項目を識別するのに役立つ、省略可能な一意の識別子。
  • 識別子 - ツール バー項目の種類を定義します。 カスタム値を使用して、コード内のツール バー項目を選択できます。
  • 選択可能 - チェック場合、項目はオン/オフ ボタンのように動作します。

重要

ユーザーにカスタマイズ オプションを 提供する既定のツール バーではなく、[許可されたツール バー項目] 領域に項目を追加します。

他の UI コントロールをツール バーに追加する

検索フィールドやセグメント化されたコントロールなど、いくつかの Cocoa UI 要素をツール バーに追加することもできます。

これを試すには、インターフェイス階層のツール バーを開き、ツール バー項目を選択してカスタマイズ ダイアログを開きます。 検索フィールドをライブラリインスペクターから[許可されたツールバー項目]領域にドラッグします。

Using the toolbar customization dialog

ここから、Interface Builder を使用して検索フィールドを構成し、アクションまたはアウトレットを介してコードに公開します。

組み込みのツール バー項目のサポート

いくつかの Cocoa UI 要素は、既定で標準のツール バー項目と対話します。 たとえば、テキスト ビューをアプリケーションのウィンドウにドラッグし、コンテンツ領域に合わせて配置します。

Adding a text view to the application

ドキュメントを保存し、Visual Studio for Mac に戻って Xcode と同期し、アプリケーションを実行し、テキストを入力して選択し、[色] ツール バー項目をクリックします。 テキスト ビューは、カラー ピッカーで自動的に動作します。

Built-in toolbar functionality with a text view and color picker

ツール バー項目での画像の使用

イメージ ツールバー項目を使用すると、Resources フォルダーに追加されたビットマップ イメージ (およびバンドル リソースのビルド アクション) をアイコンとしてツール バーに表示できます。

  1. Visual Studio for Mac の Solution Pad で、[リソース] フォルダーを右クリックし、[ファイルの追加]>を選択します。

  2. [ファイルの追加] ダイアログ ボックスから目的のイメージに移動し、それらを選択して [開く] ボタンをクリックします。

    Selecting images to add

  3. [コピー]、[チェック選択したすべてのファイルに対して同じ操作を使用する]を選択し、[OK] をクリックします。

    Selecting the copy action for the added images

  4. Solution Pad で MainWindow.xib をダブルクリックして Xcode で開きます。

  5. インターフェイス階層のツール バーを選択し、その項目の 1 つをクリックしてカスタマイズ ダイアログを開きます。

  6. ライブラリ インスペクターからツールバーの [許可されているツールバー項目] 領域にイメージ ツールバー項目をドラッグします。

    An Image Toolbar Item added to the Allowed Toolbar Items area

  7. 属性インスペクターで、Visual Studio for Mac で追加したイメージを選択します。

    Setting a custom image for a toolbar item

  8. [ラベル] を [ごみ箱] に設定し、[パレット] ラベルを [ドキュメントの消去] に設定します。

    Setting the toolbar item Label and Palette Label

  9. [ライブラリインスペクター] からツールバーの [許可されているツールバー項目] 領域に区切りツール バー項目をドラッグします。

    A Separator Toolbar Item added to the Allowed Toolbar Items area

  10. 区切り記号項目と [ごみ箱] 項目を既定のツール バー項目領域にドラッグし、次のようにツールバー項目の順序を左から右に設定します (色、フォント、区切り記号、ごみ箱、フレキシブルスペース、印刷)。

    The default toolbar items

  11. 変更を保存し、Visual Studio for Mac に戻って Xcode と同期します。

アプリケーションを実行して、新しいツール バーが既定で表示されていることを確認します。

A toolbar with customized default items

アウトレットとアクションを使用してツール バー項目を公開する

コード内のツール バーまたはツール バー項目にアクセスするには、その項目をコンセントまたはアクションにアタッチする必要があります。

  1. Solution Pad で Main.storyboard をダブルクリックして Xcode で開きます。

  2. カスタム クラス "WindowController" が Identity Inspector の メイン ウィンドウ コントローラーに割り当てられていることを確認します。

    Using the Identity Inspector to set a custom class for the window controller

  3. 次に、インターフェイス階層のツール バー項目を選択します。

    Selecting the toolbar item in the Interface Hierarchy

  4. アシスタント ビューを開き、WindowController.h ファイルを選択し、ツール バー項目から WindowController.h ファイルに control キーを押しながらドラッグします。

  5. [接続の種類] を [アクション] に設定し、[名前] に「trashDocument」と入力し、[接続] ボタンをクリックします。

    Configuring an action for a toolbar item

  6. ViewController.h ファイルの "documentEditor" というアウトレットとしてテキスト ビューを公開します。

    Configuring an outlet for the text view

  7. 変更を保存し、Visual Studio for Mac に戻って Xcode と同期します。

Visual Studio for Mac で、ViewController.cs ファイルを編集し、次のコードを追加します。

public void EraseDocument() {
    documentEditor.Value = "";
}

次に、WindowController.cs ファイルを編集し、クラスの下部に次のコードをWindowController追加します。

[Export ("trashDocument:")]
void TrashDocument (NSObject sender) {

    var controller = ContentViewController as ViewController;
    controller.EraseDocument ();
}

アプリケーションを実行すると、 ごみ箱 ツール バー項目がアクティブになります。

A toolbar with an active trash item

ごみ箱ツール バー項目を使用してテキストを削除できるようになりました。

ツール バー項目の無効化

ツール バーの項目を無効にするには、カスタム NSToolbarItem クラスを作成し、メソッドをオーバーライドします Validate 。 次に、インターフェイス ビルダーで、有効または無効にする項目にカスタム型を割り当てます。

カスタム NSToolbarItem クラスを作成するには、プロジェクトを右クリックし、[新しいファイルの追加>...] を選択します。[全般>空のクラス] を選択し、[名前] に「ActivatableItem」と入力し、[新規] ボタンをクリックします。

Adding an empty class in Visual Studio for Mac

次に 、次のように読み取るようにActivatableItem.cs ファイルを編集します。

using System;

using Foundation;
using AppKit;

namespace MacToolbar
{
    [Register("ActivatableItem")]
    public class ActivatableItem : NSToolbarItem
    {
        public bool Active { get; set;} = true;

        public ActivatableItem ()
        {
        }

        public ActivatableItem (IntPtr handle) : base (handle)
        {
        }

        public ActivatableItem (NSObjectFlag  t) : base (t)
        {
        }

        public ActivatableItem (string title) : base (title)
        {
        }

        public override void Validate ()
        {
            base.Validate ();
            Enabled = Active;
        }
    }
}

Main.storyboard をダブルクリックして Xcode で開きます。 上記で作成したごみ箱ツール バー項目を選択し、ID インスペクターでそのクラスを "ActivatableItem" に変更します。

Setting a custom class for a toolbar item

ごみ箱ツール バー項目に対して呼び出されたtrashItemコンセントを作成します。 変更を保存し、Visual Studio for Mac に戻って Xcode と同期します。 最後に、MainWindow.csを開き、次のように読み取るようにメソッドを更新AwakeFromNibします。

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

    // Disable trash
    trashItem.Active = false;
}

アプリケーションを実行し、ごみ箱項目がツール バーで無効になったことに注意してください。

A toolbar with an inactive trash item

まとめ

この記事では、Xamarin.Mac アプリケーションでツール バーとツール バー項目を操作する方法について詳しく説明しました。 Xcode のインターフェイス ビルダーでツール バーを作成してメインする方法、一部の UI コントロールがツール バー項目を自動的に操作する方法、C# コードでツール バーを操作する方法、ツール バー項目を有効または無効にする方法について説明しました。