[WinUI 3][MenuBar] メニューにアイコンを表示する

[WinUI 3][MenuBar] メニュー項目にアイコンを表示する

MenuBar

2022.01.212022.09.03

この記事ではメニュー項目にアイコンを表示する方法について説明します。

環境
メニュー項目にアイコンを表示する
使用可能なアイコンについて

環境

開発環境	Microsoft Visual Studio Enterprise 2019 Version 16.11.5
Framework	Microsoft .NET Framework Version 4.8.04161

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

メニュー項目は MenuFlyoutItem で作成することができますが、Icon プロパティを使用すると、アイコンを表示させることができます。

以下は、メニュー項目にアイコンを表示する XAML の例です。

<Window
    x:Class="WinUIAppSample.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WinUIAppSample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <StackPanel VerticalAlignment="Top" HorizontalAlignment="Left">
        <MenuBar>
            <MenuBarItem Title="ファイル">
                <MenuFlyoutItem Text="新規" Icon="Add"/>
                <MenuFlyoutItem Text="開く..." Icon="OpenFile"/>
                <MenuFlyoutItem Text="保存" Icon="Save"/>
                <MenuFlyoutSeparator />
                <MenuFlyoutItem Text="終了"/>
            </MenuBarItem>
            <MenuBarItem Title="編集">
                <MenuFlyoutItem Text="元に戻す" Icon="Undo"/>
                <MenuFlyoutItem Text="切り取り" Icon="Cut"/>
                <MenuFlyoutItem Text="コピー" Icon="Copy"/>
                <MenuFlyoutItem Text="貼り付け" Icon="Paste"/>
            </MenuBarItem>
            <MenuBarItem Title="ヘルプ">
                <MenuFlyoutItem Text="このアプリについて" Icon="Help"/>
            </MenuBarItem>
        </MenuBar>

    </StackPanel>
</Window>