WinUI 3でMenuFlyoutをShowAtで表示する方法【コード付き解説】

MenuFlyout とは？

WinUI 3で利用できるMenuFlyoutは、コンテキストメニューやポップアップメニューを簡単に実装できる便利なUI要素です。通常は右クリックや長押しで表示されますが、C#コードからも任意のタイミングで表示することが可能です。

ShowAtメソッドを使ってMenuFlyoutを表示する

MenuFlyout.ShowAtを使えば、指定したUI要素に対して任意の位置にメニューを表示できます。以下にサンプルコードを紹介します。

XAMLコード

<Grid Width="200" Height="200" Background="BlueViolet" x:Name="g1">
    <Grid.ContextFlyout>
        <MenuFlyout x:Name="m1">
            <MenuFlyoutItem Text="右クリック メニュー1" />
            <MenuFlyoutItem Text="右クリック メニュー2" />
        </MenuFlyout>
    </Grid.ContextFlyout>
    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">右クリック</TextBlock>
</Grid>
<Button Content="メニューを開く" Click="myButton_Click" />

C#コード

private void myButton_Click(object sender, RoutedEventArgs e)
{
    DispatcherQueue.TryEnqueue(() =>
    {
        try
        {
            var options = new FlyoutShowOptions
            {
                Position = new Point(0, 0),
                Placement = FlyoutPlacementMode.Top
            };
            m1.ShowAt(null, options);
        }
        catch (Exception ex)
        {
            Debug.WriteLine($"{ex.Message}");
        }
    });
}

ポイント: ShowAt(null, options) とすることで、FlyoutShowOptions.Position に基づいた位置に表示されます。相対対象がないため絶対位置的な扱いになります。