ツール バー項目を表示する

.NET マルチプラットフォーム アプリ UI (.NET MAUI) ToolbarItem クラスは、 Page オブジェクトの ToolbarItems コレクションに追加できる特別な種類のボタンです。 Shell クラスはPageから派生するため、ToolbarItem オブジェクトをToolbarItems オブジェクトのShell コレクションに追加することもできます。 各 ToolbarItem オブジェクトは、アプリのナビゲーション バーにボタンとして表示されます。 ToolbarItem オブジェクトにはアイコンを付けることができ、プライマリアイテムまたはセカンダリアイテムとして表示されます。 ToolbarItem クラスは、MenuItemから継承します。

次のスクリーンショットは、iOS のナビゲーション バーの ToolbarItem オブジェクトを示しています。

ToolbarItem クラスは、次のプロパティを定義します。

• Orderは、 ToolbarItemOrderの種類で、 ToolbarItem オブジェクトがプライマリ メニューとセカンダリ メニューのどちらに表示されるかを決定します。
• Priorityは、 int型で、 ToolbarItems コレクション内の項目の表示順序を決定します。

ToolbarItem クラスは、MenuItem クラスから、通常使用される次のプロパティを継承します。

• Commandは、 ICommand型で、指のタップやクリックなどのユーザー アクションをビューモデルで定義されたコマンドにバインドできます。
• CommandParameterは、 object型で、 Commandに渡すパラメーターを指定します。
• オブジェクトの表示アイコンを決定する、型の a0/&。
• Textは、 string型で、 ToolbarItem オブジェクトの表示テキストを決定します。

これらのプロパティは、 BindableProperty オブジェクトによってサポートされます。つまり、データ バインディングのターゲットにすることができます。

注

ToolbarItem オブジェクトからツール バーを作成する代わりに、複数のビューを含むレイアウト クラスにTitleViewProperty添付プロパティを設定します。 詳細については、「 ナビゲーション バーにビューを表示する」を参照してください。

ToolbarItem を作成する

ツール バー項目を作成するには、 ToolbarItem オブジェクトを作成し、そのプロパティを設定して外観と動作を定義します。 次の例は、最小限のプロパティを設定して ToolbarItem を作成し、 ContentPageの ToolbarItems コレクションに追加する方法を示しています。

<ContentPage.ToolbarItems>
    <ToolbarItem Text="Add item"
                 IconImageSource="add.png" />
</ContentPage.ToolbarItems>

次の使用例は、テキストとアイコンを含む ToolbarItem オブジェクトになります。 ただし、 ToolbarItem の外観はプラットフォームによって異なります。

コードで ToolbarItem を作成し、 ToolbarItems コレクションに追加することもできます。

ToolbarItem item = new ToolbarItem
{
    Text = "Add item",
    IconImageSource = ImageSource.FromFile("add.png")
};

// "this" refers to a Page object
this.ToolbarItems.Add(item);

注

画像は、アプリ プロジェクト内の 1 つの場所に格納できます。 詳細については、「 .NET MAUI プロジェクトにイメージを追加する」を参照してください。

ボタンの動作を定義する

ToolbarItem クラスは、Clicked クラスからMenuItem イベントを継承します。 イベント ハンドラーを Clicked イベントにアタッチして、 ToolbarItem オブジェクトのタップまたはクリックに対応できます。

<ToolbarItem ...
             Clicked="OnItemClicked" />

イベント ハンドラーは、コード内にアタッチすることもできます。

ToolbarItem item = new ToolbarItem { ... };
item.Clicked += OnItemClicked;

これらの例では、次の例に示すように、 OnItemClicked イベント ハンドラーを参照しています。

void OnItemClicked(object sender, EventArgs e)
{
    ToolbarItem item = (ToolbarItem)sender;
    messageLabel.Text = $"You clicked the \"{item.Text}\" toolbar item.";
}

注

ToolbarItem オブジェクトでは、 Command プロパティと CommandParameter プロパティを使用して、イベント ハンドラーを使用せずにユーザー入力に対応することもできます。

実行時に ToolbarItem を有効または無効にする

実行時に ToolbarItem を有効または無効にするには、その Command プロパティを ICommand 実装にバインドし、その canExecute デリゲートが必要に応じて ICommand を有効または無効にすることを確認します。

Important

IsEnabled プロパティを使用してCommandを有効または無効にする場合は、ToolbarItem プロパティを別のプロパティにバインドしないでください。

プライマリ ツール バー項目とセカンダリ ツール バー項目

ToolbarItemOrder列挙型には、Default、Primary、およびSecondaryの値があります。

Order プロパティが Primary に設定されている場合、ToolbarItem オブジェクトはすべてのプラットフォームのナビゲーション バーに表示されます。 ToolbarItem オブジェクトはページ タイトルよりも優先され、アイテムのスペースを作るために切り捨てられます。

Order プロパティが Secondary に設定されている場合、動作はプラットフォームによって異なります。 iOS および Mac Catalyst では、 Secondary ツールバー項目は、ナビゲーション バーのシステム省略記号アイコンの下に表示されるプルダウン メニューにグループ化されます。 このメニュー内の項目は、 Priority 値で並べ替えされます。 Android と Windows では、 Secondary 項目メニューは、タップできる 3 つのドットとして表示されます。

3 つのドットをタップすると、垂直リスト内の項目が表示されます。

Warnung

ToolbarItem プロパティが Order に設定されているSecondary オブジェクトでのアイコンの動作は、プラットフォーム間で矛盾する可能性があります。 セカンダリ メニューに表示される項目に対して IconImageSource プロパティを設定しないでください。

例: 優先順位でセカンダリ項目を並べ替えます (iOS および Mac Catalyst)

iOS と Mac Catalyst では、セカンダリ項目は Priority 順にプルダウン メニューに表示されます (最初に小さい値が表示されます)。

<ContentPage.ToolbarItems>
    <ToolbarItem Text="Settings" Order="Secondary" Priority="0" />
    <ToolbarItem Text="Feedback" Order="Secondary" Priority="1" />
    <ToolbarItem Text="About" Order="Secondary" Priority="2" />
    <ToolbarItem Text="Help" Order="Secondary" Priority="3" />
    <ToolbarItem Text="Sign out" Order="Secondary" Priority="100" />
</ContentPage.ToolbarItems>

ヒント

ラベルを短くして、プルダウンに快適に収まるようにします。 プラットフォームの不整合のため、 Secondary 項目のアイコンは使用しないでください。