Use CommandBarFlyout in page resource, throw Value does not fall within the expected range

[XFEstudio]

Describe the bug

The commandBarFlyout.ShowAt() function throw an Exception: Value does not fall within the expected range.
The CommandBarFlyout Control is defined in page resources:

<Page.Resources>
    <CommandBarFlyout Placement="Auto" x:Name="commandBarFlyout">
        <AppBarButton Label="Open In Folder" Icon="OpenLocal" ToolTipService.ToolTip="Open In Folder"/>
        <AppBarButton Label="Copy" Icon="Copy" ToolTipService.ToolTip="Copy">
            <AppBarButton.Flyout>
                <Flyout>
                    <StackPanel>
                        <TextBox Text="" PlaceholderText="Enter the new blueprint name"/>
                        <Button Content="Copy"/>
                    </StackPanel>
                </Flyout>
            </AppBarButton.Flyout>
        </AppBarButton>
        <AppBarButton Label="Delete" Icon="Delete" ToolTipService.ToolTip="Delete"/>
    </CommandBarFlyout>
</Page.Resources>

Here's the invoke event:

    private void GridView_RightTapped(object sender, Microsoft.UI.Xaml.Input.RightTappedRoutedEventArgs e)
    {
        if (sender is Grid grid && grid.DataContext is BlueprintInfoViewData blueprintInfoViewData)
        {
            commandBarFlyout.ShowAt(grid);
        }
    }

This event is binding to the GridView's RightTapped event.

I have tried to set the XamlRoot in CommandBarFlyout, but it doesn't work.

Steps to reproduce the bug

Defined the CommandBarFlyItem in page resources, and binding the GridView's RightTapped event.
The right click anywhere in gridView control, then the exception throw.

Expected behavior

No response

Screenshots

NuGet package version

WinUI 3 - Windows App SDK 1.6.2: 1.6.241106002

Windows version

No response

Additional context

No response

[eduardobragaxz]

I'm surprised if (sender is Grid) even works.

Use the CommandBarFlyout in the GridView's ContextFlyout property instead of in the Page resources. Try it out and see if it works.

[XFEstudio]

sorry about that, the (sender is Grid) is because I need to get the sender's binding model object by right click event, so I bind it to the Grid control.

I move the CommandBarFlyout from the Page resources to GridView's ContextFlyout, and there's no binding event on right click, but when I right click the GridView control, it interrupt and shows an error:

    private void App_UnhandledException(object sender, Microsoft.UI.Xaml.UnhandledExceptionEventArgs e)
    {
        if (GlobalServiceManager.GetService<IMessageService>() is IMessageService messageService)
        {
            messageService.ShowMessage(e.Message, "错误", InfoBarSeverity.Error);
            e.Handled = true;
        }
    }

This exception's message is '参数错误' which means 'parameter error'

Here's my xaml code:

<GridView x:Name="blueprintGridView" ItemsSource="{x:Bind ViewModel.BlueprintInfoViewDataList}" SelectionMode="None" IsItemClickEnabled="True" ItemClick="GridView_ItemClick" Loaded="BlueprintGridView_Loaded">
    <GridView.ContextFlyout>
        <CommandBarFlyout Placement="Auto" x:Name="commandBarFlyout">
            <AppBarButton Label="Open In Folder" Icon="OpenLocal" ToolTipService.ToolTip="Open In Folder"/>
            <AppBarButton Label="Copy" Icon="Copy" ToolTipService.ToolTip="Copy">
                <AppBarButton.Flyout>
                    <Flyout>
                        <StackPanel>
                            <TextBox Text="" PlaceholderText="Enter the new blueprint name"/>
                            <Button Content="Copy"/>
                        </StackPanel>
                    </Flyout>
                </AppBarButton.Flyout>
            </AppBarButton>
            <AppBarButton Label="Delete" Icon="Delete" ToolTipService.ToolTip="Delete"/>
        </CommandBarFlyout>
    </GridView.ContextFlyout>
    <GridView.ItemTemplate>
        <DataTemplate x:DataType="model:BlueprintInfoViewData">
            <Grid Width="280" ToolTipService.ToolTip="{x:Bind Name}">
                <Rectangle Opacity="0.5" Fill="{ThemeResource AcrylicInAppFillColorDefaultBrush}"/>
                <Image x:Name="connectedElement" Grid.RowSpan="2" Source="{x:Bind BlueprintImage,FallbackValue='/Assets/Images/BlueprintDrag.png'}" Stretch="Uniform" VerticalAlignment="Top"/>
                <StackPanel Visibility="{x:Bind NoBlueprint}" Opacity="0.5" Background="{ThemeResource AcrylicInAppFillColorDefaultBrush}">
                    <Image Source="/Assets/Images/forbidden.svg" Width="80" Height="80"/>
                    <TextBlock Text="No Blueprint" Style="{ThemeResource TitleTextBlockStyle}" HorizontalAlignment="Center"/>
                </StackPanel>
                <Grid Height="38" ColumnSpacing="5" Padding="5,0,5,0" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Background="{ThemeResource AcrylicInAppFillColorDefaultBrush}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Text="{x:Bind Name}" Style="{ThemeResource SubtitleTextBlockStyle}" TextTrimming="CharacterEllipsis" VerticalAlignment="Center"/>
                    <TextBlock Grid.Column="1" Text="{x:Bind FileSize}" VerticalAlignment="Center" Foreground="{ThemeResource TextFillColorSecondaryBrush}"/>
                </Grid>
            </Grid>
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

[Skittles2519]

@XFEstudio I was able to reproduce the error you were seeing with your CommandBarFlyout code in your page resources. I'm not sure why, but the issue happens by setting the placement mode of your flyout to Auto specifically. Remove that, or change it to another placement value, and your flyout will show.

On a side note, when I was testing with the GridView RightTapped event. My sender was a GridView and not a Grid, but if your code was still executing before, maybe it's not important.

[XFEstudio]

@Skittles2519 Thanks, it work!

I wonder what caused this problem and whether it is a bug.