[WinUI 3][MenuBar] メニューの基本使用方法

この記事では MenuBar を使用して基本的なメニューを作成する方法について説明します。

環境

メニューの基本

メニュー作成の基本

メニューを作成するには、MenuBar コントロールを使用します。

XAML では以下のように記述します。

<MenuBar>
 <!-- ここにメニューのアイテムを記載 -->
</MenuBar>

メニューのトップ項目を表示する

続いて、「ファイル」「編集」「ヘルプ」など、メニューのトップ項目を表示するには MenuBarItem を使用します。表示するテキストは Title プロパティに設定します。

以下は、メニューのトップ項目に[ファイル][編集][ヘルプ]を表示する XAML の例です。

<MenuBar>
    <MenuBarItem Title="ファイル" />
    <MenuBarItem Title="編集" />
    <MenuBarItem Title="ヘルプ" />
</MenuBar>

メニューのトップ項目を表示する例

メニューの各項目を作成する

「ファイル」や「編集」、「ヘルプ」にぶら下げる各メニュー項目を作成する場合は MenuFlyoutItem を使用し、表示するテキストは Text プロパティに設定をします。

以下は、メニューの[ファイル][編集][ヘルプ]に対して、メニュー項目を作成する XAML の例です。

<MenuBar>
    <MenuBarItem Title="ファイル">
        <MenuFlyoutItem Text="新規"/>
        <MenuFlyoutItem Text="開く..."/>
        <MenuFlyoutItem Text="保存"/>
        <MenuFlyoutItem Text="終了"/>
    </MenuBarItem>
    <MenuBarItem Title="編集">
        <MenuFlyoutItem Text="元に戻す"/>
        <MenuFlyoutItem Text="切り取り"/>
        <MenuFlyoutItem Text="コピー"/>
        <MenuFlyoutItem Text="貼り付け"/>
    </MenuBarItem>
    <MenuBarItem Title="ヘルプ">
        <MenuFlyoutItem Text="このアプリについて"/>
    </MenuBarItem>
</MenuBar>

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

入れ子のメニュー項目を作成する

メニュー項目の中に、さらにメニュー項目を作成したい場合は MenuFlyoutSubItem を使用します。以下は [編集]-[検索と置換]の下に、[検索]と[置換]の２つの項目を作成する例です。

<MenuBar>
    <MenuBarItem Title="ファイル">
        <MenuFlyoutItem Text="新規"/>
        <MenuFlyoutItem Text="開く..."/>
        <MenuFlyoutItem Text="保存"/>
        <MenuFlyoutItem Text="終了"/>
    </MenuBarItem>
    <MenuBarItem Title="編集">
        <MenuFlyoutSubItem Text="検索と置換">
            <MenuFlyoutItem Text="検索"/>
            <MenuFlyoutItem Text="置換"/>
        </MenuFlyoutSubItem>
        <MenuFlyoutItem Text="元に戻す"/>
        <MenuFlyoutItem Text="切り取り"/>
        <MenuFlyoutItem Text="コピー"/>
        <MenuFlyoutItem Text="貼り付け"/>
    </MenuBarItem>
    <MenuBarItem Title="ヘルプ">
        <MenuFlyoutItem Text="このアプリについて"/>
    </MenuBarItem>
</MenuBar>

入れ子のメニュー項目を作成する例

セパレータを表示する

メニュー項目とメニュー項目の間にセパレータ（分割線）を表示したい場合　MenuFlyoutSeparator を使用します。

以下は [ファイル]メニューの[保存]と[終了]の間にセパレータを挿入する XAML の例です。

<MenuBar>
    <MenuBarItem Title="ファイル">
        <MenuFlyoutItem Text="新規"/>
        <MenuFlyoutItem Text="開く..."/>
        <MenuFlyoutItem Text="保存"/>
        <MenuFlyoutSeparator />
        <MenuFlyoutItem Text="終了"/>
    </MenuBarItem>
    <MenuBarItem Title="編集">
        <MenuFlyoutSubItem Text="検索と置換">
            <MenuFlyoutItem Text="検索"/>
            <MenuFlyoutItem Text="置換"/>
        </MenuFlyoutSubItem>
        <MenuFlyoutItem Text="元に戻す"/>
        <MenuFlyoutItem Text="切り取り"/>
        <MenuFlyoutItem Text="コピー"/>
        <MenuFlyoutItem Text="貼り付け"/>
    </MenuBarItem>
    <MenuBarItem Title="ヘルプ">
        <MenuFlyoutItem Text="このアプリについて"/>
    </MenuBarItem>
</MenuBar>

メニューにセパレータを挿入する例

Please follow and like us: