この記事では MenuBar を使用して基本的なメニューを作成する方法について説明します。
環境
開発環境 | Microsoft Visual Studio Enterprise 2019 Version 16.11.5 |
Framework | Microsoft .NET Framework Version 4.8.04161 |
メニューの基本
メニュー作成の基本
メニューを作成するには、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 を使用します。以下は [編集]-[検索と置換]の下に、[検索]と[置換]の2つの項目を作成する例です。
<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:
コメント