WinUI DataGrid（来自 CommunityToolkit）：如何获取当前选定的单元格？

Question

in a WinUI 3 application, I am using the DataGrid from the CommunityToolkit.WinUI.UI.Controls namespace, see MSDN DataGrid class .

I am looking for a way the get the instance of the currently selected or clicked DataGridCell .

I need this because I would like to show a MenuFlyout when the user selects / clicks a certain cell (The MenuFlyout control is like a little popup window, see MSDN MenuFlyout ). This flyout should than be displayed next to cell. For this, the MenuFlyout class has a ShowAt method available which accepts a parameter of type FrameworkElement ("The element to use as the flyout's placement target."). I want to pass the currently selected cell to this method.

This is my current code:

    private void MyDataGrid_CurrentCellChanged(object sender, System.EventArgs e)
    {
        MenuFlyout flyout = new MenuFlyout();
        MenuFlyoutItem item = new MenuFlyoutItem();
        item.Text = "Test";
        flyout.Items.Add(item);

        // How do I get an instance of the currently selected cell in the DataGrid?
        FrameworkElement theCurrentlySelectedCell = ?;
        flyout.ShowAt(theCurrentlySelectedCell);
    }

The problem is that I do not know how to get an instance of the currently selected / clicked cell of the DataGrid. I could not find anything in the DataGrid class which I found helpful for that. Unfortunatly the CurrentCellChanged event which I use in the code example above does not have this information in its event arguments either, it just has a parameter e of type EventArgs . The sender in that case is the DataGrid, not the cell.

What I did find is that there is a CurrentColumn property on the DataGrid, see MSDN DataGrid CurrentColumn . But I was not able to get from this instance to the DataGridCell instances of the row.

Does anyone know how to get an instance of the currently selected or clicked DataGridCell ?

Answer 1

I found an acceptable solution to my problem, but it does not involve getting the instance of the selected DataGridCell .

What I do in order to work with the element of a cell is changing the respective column of the DataGrid to a column of type DataGridTemplateColumn . This allows defining the controls which make up each cell. For instance using a Button or DropDownButton as cell content.

The following code declaratively creates a DataGridTemplateColumn which renders the content of the property Text of class ViewModelForRowData using a DropDownButton . The DropDownButton displays MenuFlyout next to the button (see my question). The dropdwon has three options (menu items) that will appear if the user clicks on the DropDownButton that represents the cell content. Because the DropDownButton actually is the cell content, this is effectively that what I need, ie I do not need the clicked DataGridCell instance itself:

            <controls:DataGridTemplateColumn Header="Test">
                <controls:DataGridTemplateColumn.CellTemplate>
                    <DataTemplate x:DataType="viewModels:ViewModelForRowData">
                        <DropDownButton Content="{x:Bind Text}" HorizontalAlignment="Stretch" >
                            <DropDownButton.Flyout>
                                <MenuFlyout Placement="Bottom" ShowMode="Transient">
                                    <MenuFlyoutItem Text="Menu Option 1" Command="{x:Bind Command1}" />
                                    <MenuFlyoutItem Text="Menu Option 2" Command="{x:Bind Command2}" />   
                                    <MenuFlyoutItem Text="Menu Option 3" Command="{x:Bind Command3}" />   
                                </MenuFlyout>
                            </DropDownButton.Flyout>
                        </DropDownButton>
                    </DataTemplate>
                </controls:DataGridTemplateColumn.CellTemplate>
            </controls:DataGridTemplateColumn>

An alternative would be creating the MenuFlyout in a code behind file, that gets called as a result of a button click event handler.

            <controls:DataGridTemplateColumn Header="Test" >
                <controls:DataGridTemplateColumn.CellTemplate>
                    <DataTemplate x:DataType="viewModels:ViewModelForRowData">
                        <Button Content="{x:Bind Text}" Click="ButtonClick"></Button>
                    </DataTemplate>
                </controls:DataGridTemplateColumn.CellTemplate>
            </controls:DataGridTemplateColumn>



    private void ButtonClick(object sender, Microsoft.UI.Xaml.RoutedEventArgs e)
    {
        Button button = sender as Button;

        if (button == null)
        {
            return;
        }

        MenuFlyout flyout = new MenuFlyout();

        MenuFlyoutItem item1 = new MenuFlyoutItem();
        item1.Text = "TestItem 1";
        flyout.Items.Add(item1);

        MenuFlyoutItem item2 = new MenuFlyoutItem();
        item2.Text = "TestItem 2";
        flyout.Items.Add(item2);

        FlyoutShowOptions flyoutShowOptions = new FlyoutShowOptions();
        flyout.ShowAt(button, flyoutShowOptions);
    }

In that case the sender parameter of the event handler references the button, so i can use this to specify the first parameter of the MenuFlyout.ShowAt method.