带有弹出按钮的WinUI3 Datagrid TemplatedColumn

Question

我正在开发一个WinUI3应用程序。我想要一个 CommunityToolkit 数据网格，每行都有一个按钮列。单击按钮时，需要显示一个弹出窗口，让用户输入数据来填充该字段。

为了简单起见，我在示例中只放置了两个按钮，但应用程序将需要更多控件：

<controls:DataGridTemplateColumn Header="Value" IsReadOnly="True">
    <controls:DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <Grid>
                <Button Content="{Binding Value}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                    <Button.Flyout>
                        <Flyout>
                            <StackPanel>
                                <TextBlock Text="All items will be removed. Do you want to continue?" Margin="0,0,0,12" />
                                <Button Content="Yes, empty my cart" Click="Button_Click" />
                                <Button Content="No, cart is full" Click="FullButton_Click" />
                            </StackPanel>
                        </Flyout>
                    </Button.Flyout>
                </Button>
            </Grid>
        </DataTemplate>
    </controls:DataGridTemplateColumn.CellTemplate>
</controls:DataGridTemplateColumn>

如 gif 所示，我遇到了点击焦点问题。第一次单击就像一个超级按钮，进一步单击似乎会将单元格置于编辑模式并且不会触发弹出窗口。如果我将焦点更改为其他行/单元格，结果每次都会不同。

我认为存在一种我不知道如何避免的编辑/点击传递机制。将单元格置于“IsReadOnly”模式不会改变行为。

如果我尝试在单元格上使用 MenuFlyout 或 ContextFlyout，效果很好，但我需要显示更多控件，而不是右键单击时触发的简单菜单。

Answer 1

DataGridComboBoxColumn

曾经有相同的问题，您可以在这里查看它是如何修复的。

您可以像这样创建自定义列：

public class DataGridButtonWithFlyoutColumn : DataGridTemplateColumn
{
    protected override object PrepareCellForEdit(FrameworkElement editingElement, RoutedEventArgs editingEventArgs)
    {
        if (editingElement is Button button)
        {
            button.Flyout.ShowAt(button);
        }

        return base.PrepareCellForEdit(editingElement, editingEventArgs);
    }
}

并像这样使用它：

<local:DataGridButtonWithFlyoutColumn Header="Value">
    <local:DataGridButtonWithFlyoutColumn.CellTemplate>
        <DataTemplate>
            <TextBlock
            HorizontalAlignment="Stretch"
            VerticalAlignment="Center"
            HorizontalTextAlignment="Center"
            Text="{Binding Value}" />
        </DataTemplate>
    </local:DataGridButtonWithFlyoutColumn.CellTemplate>
    <toolkit:DataGridTemplateColumn.CellEditingTemplate>
        <DataTemplate>
            <Button
                HorizontalAlignment="Stretch"
                VerticalAlignment="Stretch"
                Content="{Binding Value}">
                <Button.Flyout>
                    <Flyout>
                        <StackPanel>
                            <TextBlock
                            Margin="0,0,0,12"
                            Text="All items will be removed. Do you want to continue?" />
                            <Button
                            Click="Button_Click"
                            Content="Yes, empty my cart" />
                            <Button
                            Click="Button_Click_1"
                            Content="No, cart is full" />
                        </StackPanel>
                    </Flyout>
                </Button.Flyout>
            </Button>
        </DataTemplate>
    </toolkit:DataGridTemplateColumn.CellEditingTemplate>
</local:DataGridButtonWithFlyoutColumn>