windowsxamlwinui-3winuiflyout

How do I make a CommandBarFlyout appear when right-clicking an Image in XAML with WinUI 3?


I've tried this but it's not working. I want right-click to open the menu on images 2, 3, and 4:

<winex:WindowEx xmlns:winex="using:WinUIEx" 
                x:Class="myapp.ViewImagesWindow"
        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" >

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="150" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Grid Grid.Row="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="50*" />
                <ColumnDefinition Width="50*" />
                <ColumnDefinition Width="50*" />
                <ColumnDefinition Width="50*" />
            </Grid.ColumnDefinitions>
            <Grid.Resources>
                <CommandBarFlyout x:Name="DeleteCommandsFlyout">
                    <CommandBarFlyout.SecondaryCommands>
                        <AppBarButton Label="Delete" Icon="Delete" ToolTipService.ToolTip="Delete" Click="DeleteAppBarButton_Click"/>
                    </CommandBarFlyout.SecondaryCommands>
                </CommandBarFlyout>
            </Grid.Resources>
            
            <Image x:Name="image1" Tapped="Image_Tapped" Grid.Column="0" Source="ms-appx:///Assets/StoreLogo.scale-400.png" Width="100" Height="150" Margin="5" Stretch="Uniform" RightTapped="image1_RightTapped" />

            <Image x:Name="image2" Tapped="Image_Tapped" Grid.Column="1" Source="ms-appx:///Assets/StoreLogo.scale-400.png" Width="100" Height="150" Margin="5" Stretch="Uniform" FlyoutBase.AttachedFlyout="{x:Bind DeleteCommandsFlyout}" ContextFlyout="{x:Bind DeleteCommandsFlyout}"/>

            <Image x:Name="image3" Tapped="Image_Tapped" Grid.Column="2" Source="ms-appx:///Assets/StoreLogo.scale-400.png" Width="100" Height="150" Margin="5" Stretch="Uniform" FlyoutBase.AttachedFlyout="{x:Bind DeleteCommandsFlyout}" ContextFlyout="{x:Bind DeleteCommandsFlyout}"/>

            <Image x:Name="image4" Tapped="Image_Tapped" Grid.Column="3" Source="ms-appx:///Assets/StoreLogo.scale-400.png" Width="100" Height="150" Margin="5" Stretch="Uniform" FlyoutBase.AttachedFlyout="{x:Bind DeleteCommandsFlyout}" ContextFlyout="{x:Bind DeleteCommandsFlyout}"/>

        </Grid>

        <!-- Large image view -->
        <Image Grid.Row="1" x:Name="largeImage" Source="ms-appx:///Assets/StoreLogo.scale-400.png" Stretch="Uniform" Margin="10" />
    </Grid>

</winex:WindowEx>

Solution

  • You need to set your ContextFlyout in each image.

    <Image
        x:Name="image1"
        Grid.Column="0"
        Width="100"
        Height="150"
        Margin="5"
        ContextFlyout="{StaticResource DeleteCommandsFlyout}"
        Source="ms-appx:///Assets/StoreLogo.png"
        Stretch="Uniform"
        Tapped="image1_Tapped" />