左クリックでFlyoutを表示できるToggleボタンを作る その2

もくじ
https://tera1707.com/entry/2022/02/06/144447#WinUI3

やりたいこと

以前の記事で、ToggleButtonでフライアウトが表示できるようにした。
(ToggleButtonでは、左クリックでフライアウトが表示できなかったので、表示できるようにした)

が、その時のようなややこしいやり方をしなくても、ToggleButtonでフライアウトを表示できる正攻法があったので、メモしておく。

前提

  • Windows10 Home 21H1 19043.1706
  • VisualStudio2022 Community 17.1.4
  • WinUI3.0
  • Windows App SDK 1.0
  • 2022年5月の時点の調査

やったこと

<FlyoutBase.AttachedFlyout><MenuFlyout>をセットし、さらにそこに<RadioMenuFlyoutItem>をセットする。

そのMenuFlyoutを、FlyoutBase.ShowAttachedFlyout();で開く。

実験コード

<Window
    x:Class="App6.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid>
        <ToggleButton x:Name="toggle" Content="フライアウトできるトグルボタン" Click="toggle_Click">
            <FlyoutBase.AttachedFlyout>
                <MenuFlyout>
                    <RadioMenuFlyoutItem Text="項目1"/>
                    <RadioMenuFlyoutItem Text="項目2"/>
                    <RadioMenuFlyoutItem Text="項目3"/>
                </MenuFlyout>
            </FlyoutBase.AttachedFlyout>
        </ToggleButton>
    </Grid>
</Window>
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls.Primitives;

namespace App6
{
    public sealed partial class MainWindow : Window
    {
        public MainWindow()
        {
            this.InitializeComponent();
        }

        private void toggle_Click(object sender, RoutedEventArgs e)
        {
            FlyoutBase.ShowAttachedFlyout(toggle);
        }
    }
}

うごかしてみたところ

備考

上のままだと、フライアウトを出すためにクリックするたびに、ToggleボタンがONOFFしてしまうので、それが嫌なら、以前の記事でやったように、トグル動作をしないようにしたToggleボタン派生クラスを作成してやればよい。

参考

MenuFlyoutの説明

https://docs.microsoft.com/en-us/windows/apps/design/controls/menus#create-a-menu-flyout

今回使ったRadioMenuFlyoutItem

https://docs.microsoft.com/en-us/windows/winui/api/microsoft.ui.xaml.controls.radiomenuflyoutitem?view=winui-3.0