メニュー項目を表示する

.NET マルチプラットフォーム アプリ UI (.NET MAUI) MenuItem クラスを使用して、ListView 項目コンテキスト メニューや Shell アプリ ポップアップ メニューなどのメニューのメニュー項目を定義できます。

次のスクリーンショットは、Android の ListView コンテキスト メニューの MenuItem オブジェクトを示しています。

MenuItem クラスでは、次のプロパティが定義されます。

• ICommand 型の Command は、指のタップやクリックなどのユーザー操作を、viewmodel で定義したコマンドにバインドできます。
• object 型の CommandParameter は、Command に渡すパラメーターを指定します。
• ImageSource 型の IconImageSource は、メニュー項目アイコンを定義します。
• bool 型の IsDestructive は、MenuItem が関連付けられている UI 要素をリストから削除するかどうかを示します。
• bool 型の IsEnabled は、メニュー項目がユーザー入力に応答するかどうかを示します。
• string 型の Text は、メニュー項目のテキストを指定します。

これらのプロパティは BindableProperty オブジェクトがサポートしています。そのため、これらのプロパティはデータ バインディングの対象にできます。

MenuItem を作成する

たとえば、ListView オブジェクトの項目のコンテキスト メニューとしてメニュー項目を作成するには、ListView の ItemTemplate の DataTemplate オブジェクトとして使用される ViewCell オブジェクト内に MenuItem オブジェクトを作成します。 ListView オブジェクトが設定されると、項目に対してコンテキスト メニューがアクティブになったときに MenuItem 選択項目を公開する、DataTemplate を使用して各項目が作成されます。

次の例は、ListView オブジェクトのコンテキスト内で MenuItem を作成する方法を示しています。

<ListView>
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <ViewCell.ContextActions>
                    <MenuItem Text="Context menu option" />
                </ViewCell.ContextActions>
                <Label Text="{Binding .}" />
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

この例では、テキストを含む MenuItem オブジェクトが生成されます。 ただし、MenuItem の外観はプラットフォームによって異なります。

コードで MenuItem を作成することもできます。

// Return a ViewCell instance that is used as the template for each list item
DataTemplate dataTemplate = new DataTemplate(() =>
{
    // A Label displays the list item text
    Label label = new Label();
    label.SetBinding(Label.TextProperty, ".");

    // A ViewCell serves as the DataTemplate
    ViewCell viewCell = new ViewCell
    {
        View = label
    };

    // Add a MenuItem to the ContextActions
    MenuItem menuItem = new MenuItem
    {
        Text = "Context Menu Option"
    };
    viewCell.ContextActions.Add(menuItem);

    // Return the custom ViewCell to the DataTemplate constructor
    return viewCell;
});

ListView listView = new ListView
{
    ...
    ItemTemplate = dataTemplate
};

ListView のコンテキスト メニューがアクティブ化され、プラットフォームごとに異なる方法で表示されます。 Android では、リスト項目を長押しするとコンテキスト メニューがアクティブになります。 コンテキスト メニューはタイトルとナビゲーション バーの領域を置き換え、MenuItem オプションは水平ボタンとして表示されます。 iOS では、リスト項目をスワイプするとコンテキスト メニューがアクティブになります。 コンテキスト メニューはリスト項目に表示され、MenuItems は水平ボタンとして表示されます。 Windows では、リスト項目を右クリックするとコンテキスト メニューがアクティブになります。 コンテキスト メニューは、カーソルの近くに垂直リストとして表示されます。

MenuItem の動作を定義する

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

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

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

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

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

void OnItemClicked(object sender, EventArgs e)
{
    MenuItem menuItem = sender as MenuItem;

    // Access the list item through the BindingContext
    var contextItem = menuItem.BindingContext;

    // Do something with the contextItem here
}

MenuItem の外観を定義する

アイコンは、IconImageSource プロパティを使用して指定します。 アイコンが指定されている場合、Text プロパティで指定されたテキストは表示されません。 次のスクリーンショットは、Android でのアイコン付きの MenuItem を示しています。

MenuItem オブジェクトは、Android 上のアイコンのみを表示します。 他のプラットフォームでは、Text プロパティで指定されたテキストのみが表示されます。

Note

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

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

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

重要

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