.NET MAUI デスクトップ アプリにメニュー バーを表示する

.NET Multi-platform App UI (.NET MAUI) メニュー バーは、Mac Catalyst と Windows のアプリの上部に横一列に一連のメニューを表示するコンテナーです。

メニュー バーの各トップレベル メニューは、メニュー バー項目と呼ばれ、MenuBarItem オブジェクトで表されます。 MenuBarItem は次の特性を定義します。

• string 型の Text は、メニュー テキストを定義します。
• boolean 型の IsEnabled は、メニューを有効にするかどうかを指定します。 このプロパティの既定値は true です。

これらのプロパティは、BindableProperty オブジェクトが基になっています。つまり、これらは、データ バインディングの対象にすることができ、スタイルを設定できます。

MenuBarItem は次の子で構成できます。

• MenuFlyoutItem はクリックできるメニュー項目を表します。
• MenuFlyoutSubItem はクリックできるサブメニュー項目を表します。
• MenuFlyoutSeparator はメニュー内の項目を区切る水平線です。

MenuFlyoutSubItem は MenuFlyoutItem から派生します。また、後者は MenuItem から派生します。 MenuItem は、メニュー項目の外観と動作を指定できるようにする複数のプロパティを定義します。 メニュー項目またはサブ項目の外観は、Text プロパティと IconImageSource プロパティを設定することで定義できます。 メニュー項目またはサブ項目に対する応答は、Clicked プロパティ、Command プロパティ、およびCommandParameterプロパティを設定することで定義できます。 メニュー項目の詳細については、「メニュー項目を表示する」をご覧ください。

メニュー バー項目を作成する

MenuBarItem オブジェクトは、ContentPage 上の MenuBarItems コレクション (IList<MenuBarItem> 型) に追加できます。 NavigationPage またはシェル アプリでホストされている ContentPage にメニュー項目を追加すると、.NET MAUI デスクトップ アプリでその項目を含むメニュー バーが表示されます。

次の例は、メニュー バー項目を定義する ContentPage を示します。

<ContentPage ...>
    <ContentPage.MenuBarItems>
        <MenuBarItem Text="File">
            <MenuFlyoutItem Text="Exit"
                            Command="{Binding ExitCommand}" />
        </MenuBarItem>
        <MenuBarItem Text="Locations">
            <MenuFlyoutSubItem Text="Change Location">
                <MenuFlyoutItem Text="Redmond, USA"
                                Command="{Binding ChangeLocationCommand}"
                                CommandParameter="Redmond" />
                <MenuFlyoutItem Text="London, UK"
                                Command="{Binding ChangeLocationCommand}"
                                CommandParameter="London" />
                <MenuFlyoutItem Text="Berlin, DE"
                                Command="{Binding ChangeLocationCommand}"
                                CommandParameter="Berlin"/>
            </MenuFlyoutSubItem>
            <MenuFlyoutSeparator />            
            <MenuFlyoutItem Text="Add Location"
                            Command="{Binding AddLocationCommand}" />
            <MenuFlyoutItem Text="Edit Location"
                            Command="{Binding EditLocationCommand}" />
            <MenuFlyoutItem Text="Remove Location"
                            Command="{Binding RemoveLocationCommand}" />                            
        </MenuBarItem>
        <MenuBarItem Text="View">
            <MenuFlyoutItem Text="Refresh"
                            Command="{Binding RefreshCommand}" />
            <MenuFlyoutItem Text="Change Theme"
                            Command="{Binding ChangeThemeCommand}" />
        </MenuBarItem>
    </ContentPage.MenuBarItems>
</ContentPage>

この例では、3 つのトップレベル メニューを定義します。 各トップレベル メニューにはメニュー項目があり、2 番目のトップレベル メニューにはサブメニューと区切り記号があります。

Note

Mac Catalyst では、メニュー項目はシステム メニュー バーに追加されます。

この例では、各 MenuFlyoutItem は選択時に ICommand を実行するメニュー項目を定義します。

キーボード ショートカットを使用してメニュー項目を呼び出せるように、キーボード アクセラレータをメニュー バーのメニュー項目に追加できます。 詳細については、「キーボード アクセラレータ」をご覧ください。

メニュー項目にアイコンを表示する

MenuFlyoutItem と MenuFlyoutSubItem は IconImageSource プロパティを MenuItem から継承します。これにより、メニュー項目のテキストの横に小さなアイコンを表示できます。 このアイコンは、画像またはフォント アイコン

警告

Mac Catalyst では、メニュー項目にアイコンを表示できません。

次の例は、フォント アイコンを使用してメニュー項目のアイコンを定義したメニュー バー項目を示します。

<ContentPage.MenuBarItems>
    <MenuBarItem Text="Media">
        <MenuFlyoutItem Text="Play">
            <MenuFlyoutItem.IconImageSource>
                <FontImageSource Glyph="&#x25B6;"
                                 FontFamily="Arial" />
            </MenuFlyoutItem.IconImageSource>
        </MenuFlyoutItem>
        <MenuFlyoutItem Text="Pause"
                        Clicked="OnPauseClicked">
            <MenuFlyoutItem.IconImageSource>
                <FontImageSource Glyph="&#x23F8;"
                                 FontFamily="Arial" />
            </MenuFlyoutItem.IconImageSource>
        </MenuFlyoutItem>
        <MenuFlyoutItem Text="Stop"
                        Clicked="OnStopClicked">
            <MenuFlyoutItem.IconImageSource>
                <FontImageSource Glyph="&#x23F9;"
                                 FontFamily="Arial" />
            </MenuFlyoutItem.IconImageSource>
        </MenuFlyoutItem>
    </MenuBarItem>
</ContentPage.MenuBarItems>

この例では、メニュー バー項目は、Windows にアイコンとテキストを表示する 3 つのメニュー項目を定義します。

フォント アイコンの表示の詳細については、「フォント アイコンを表示する」をご覧ください。 .NET MAUI プロジェクトへの画像の追加については、「.NET MAUI アプリ プロジェクトに画像を追加する」をご覧ください。