WinUI3 建立滑鼠右鍵選單 MenuFlyout

在 Border 上增加滑鼠右鍵選單

在 Border 建立選單非常簡單，定義好後就會自動綁定可以直接使用

    
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
    <Border Background="LightGray" Width="100" Height="100" Margin="50">
        <Border.ContextFlyout>
            <MenuFlyout>
                <MenuFlyoutItem Text="選項 1" Click="MenuFlyoutItem1_Click"/>
                <MenuFlyoutItem Text="選項 2" Click="MenuFlyoutItem2_Click"/>
            </MenuFlyout>
        </Border.ContextFlyout>
    </Border>
</StackPanel>
    

只是要在 C# 中建立按鈕事件：

    
private void MenuFlyoutItem1_Click(object sender, RoutedEventArgs e)
{
    Console.WriteLine("選項一被按下");
}

private void MenuFlyoutItem2_Click(object sender, RoutedEventArgs e)
{
    Console.WriteLine("選項二被按下");
}
    

在 Page 上使用 XAML 定義選單

在 Page 頁面上時我們可以在 Page.Resources 中定義 MenuFlyout 選單介面，並在要觸發的元件中(例如 Grid)加上 RightTapped 事件

    
<Page
    x:Class="WinUi3Test0310.Views.Page1"
    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"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid RightTapped="Page_RightTapped">
    </Grid>
    
    <Page.Resources>
        <MenuFlyout x:Key="MyPageRightClickMenu">
            <MenuFlyoutItem Text="選項一" Click="MenuFlyoutItem1_Click"/>
            <MenuFlyoutItem Text="選項二" Click="MenuFlyoutItem2_Click"/>
        </MenuFlyout>
    </Page.Resources>
</Page>

    

然後在 C# 程式碼中加上 Page_RightTapped 事件，在原本的座標顯示剛剛定義的介面即可

    
private void Page_RightTapped(object sender, RightTappedRoutedEventArgs e)
{
    var menuFlyout = this.Resources["MyPageRightClickMenu"] as MenuFlyout;
    menuFlyout?.ShowAt(sender as UIElement, e.GetPosition(sender as UIElement));
    e.Handled = true;
}

private void MenuFlyoutItem1_Click(object sender, RoutedEventArgs e)
{
    Console.WriteLine("選項一被按下");
}

private void MenuFlyoutItem2_Click(object sender, RoutedEventArgs e)
{
    Console.WriteLine("選項二被按下");
}
    

動態產生選單

筆者這個人就是懶，一個檔案可以寫完的東西為什麼要拆兩個檔案？(誤)
這裡示範動態產生滑鼠右鍵選單並動態綁定到整個頁面的滑鼠右鍵事件上：

    
var menuFlyout = new MenuFlyout();
var menuFlyoutItem1 = new MenuFlyoutItem { Text = "選項一" };
var menuFlyoutItem2 = new MenuFlyoutItem { Text = "選項二" };
menuFlyoutItem1.Click += (sender, args) => { Console.WriteLine("選項一被按下"); };
menuFlyoutItem2.Click += (sender, args) => { Console.WriteLine("選項二被按下"); };
menuFlyout.Items.Add(menuFlyoutItem1);
menuFlyout.Items.Add(menuFlyoutItem2);

this.Resources.Add("MyPageRightClickMenu", menuFlyout);
this.RightTapped += (sender, e) =>
{
    menuFlyout.ShowAt(sender as UIElement, e.GetPosition(sender as UIElement));
    e.Handled = true;
};