ツール バー項目を表示する
.NET Multi-platform App UI (.NET MAUI) ToolbarItem クラスは、Page オブジェクトの ToolbarItems コレクションに追加できる特殊なタイプのボタンです。 Shell クラスは Page から派生しているため、ToolbarItem オブジェクトを Shell オブジェクトの ToolbarItems
コレクションに追加することもできます。 各 ToolbarItem オブジェクトは、アプリのナビゲーション バーにボタンとして表示されます。 ToolbarItem オブジェクトにはアイコンを付け、プライマリまたはセカンダリ項目として表示できます。 ToolbarItem クラスは MenuItem から継承します。
次のスクリーンショットは、iOS のナビゲーション バーの ToolbarItem オブジェクトを示しています。
ToolbarItem クラスでは、次のプロパティが定義されます。
- ToolbarItemOrder 型の Order は、ToolbarItem オブジェクトがプライマリ メニューとセカンダリ メニューのどちらに表示されるかを決定します。
int
型の Priority は、ToolbarItems コレクション内の項目の表示順序を決定します。
ToolbarItem クラスは、MenuItem クラスから次の一般的に使用されるプロパティを継承します。
- ICommand 型の Command は、指のタップやクリックなどのユーザー操作を、viewmodel で定義したコマンドにバインドできます。
object
型の CommandParameter は、Command
に渡すパラメーターを指定します。- ImageSource 型の IconImageSource は、ToolbarItem オブジェクトの表示アイコンを決定します。
string
型の Textは、ToolbarItem オブジェクトの表示テキストを決定します。
これらのプロパティは BindableProperty オブジェクトがサポートしています。そのため、これらのプロパティはデータ バインディングの対象にできます。
注意
ToolbarItem オブジェクトからツール バーを作成する代わりに、TitleViewProperty 添付プロパティを複数のビューを含むレイアウト クラスに設定することもできます。 詳細については、「ナビゲーション バーにビューを表示する」を参照してください。
ツール バー項目を作成するには、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 クラスは MenuItem クラスから Clicked イベントを継承します。 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 を有効または無効にするには、その Command プロパティを ICommand 実装にバインドし、canExecute
デリゲートが必要に応じて ICommand を有効または無効にするようにします。
重要
Command
プロパティを使用して ToolbarItem を有効または無効にする場合は、IsEnabled
プロパティを別のプロパティにバインドしないでください。
ToolbarItemOrder 列挙型には Default
、Primary
、Secondary
の値があります。
Order プロパティが Primary
に設定されている場合、ToolbarItem オブジェクトはすべてのプラットフォームのナビゲーション バーに表示されます。 ToolbarItem オブジェクトはページ タイトルよりも優先され、項目のスペースを作るために省略されます。
Order プロパティが Secondary
に設定されている場合、動作はプラットフォームによって異なります。 iOS と Mac Catalyst では、Secondary
ツールバー項目を横方向のリストとして表示します。 Android と Windows では、Secondary
項目メニューはタップできる 3 つのドットとして表示します。
3 つのドットをタップすると、縦方向のリスト内の項目を表示します。
警告
Order プロパティが Secondary
に設定されている ToolbarItem オブジェクトのアイコンの動作は、プラットフォーム間で一貫していません。 セカンダリ メニューに表示される項目で、IconImageSource プロパティを設定しないでください。
.NET MAUI に関するフィードバック
.NET MAUI はオープンソース プロジェクトです。 フィードバックを提供するにはリンクを選択します。