WinUI3中CommunityToolkit DataGrid模板列Flyout按钮点击焦点问题求助

问题分析 #

核心矛盾在于DataGrid的单元格点击事件被自身选中/编辑逻辑拦截，即便设置了IsReadOnly="True"，后续点击仍会触发单元格焦点状态变化，导致按钮的Flyout无法正常弹出。这是因为DataGrid底层会优先处理单元格输入事件，而非直接传递给内部按钮控件。

解决方案 #

通过以下修改可稳定触发Flyout：

• 明确禁用列的编辑权限，避免DataGrid触发编辑模式
• 阻止事件冒泡到DataGrid，确保点击事件直接传递给内部按钮
• 手动显式触发Flyout，规避默认逻辑被干扰的问题

修改后的XAML代码 #

<controls:DataGridTemplateColumn Header="Value" IsReadOnly="True" CanUserEdit="False">
    <controls:DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <Grid PointerPressed="Grid_PointerPressed">
                <Button Content="{Binding Value}" 
                        HorizontalAlignment="Stretch" 
                        VerticalAlignment="Stretch"
                        Click="EditButton_Click">
                    <Button.Flyout>
                        <Flyout>
                            <StackPanel>
                                <TextBlock Text="输入数据填充对应字段" Margin="0,0,0,12" />
                                <!-- 可添加任意自定义控件，如输入框、下拉选等 -->
                                <TextBox PlaceholderText="请输入新值" />
                                <Button Content="确认" Margin="0,8,0,0" Click="ConfirmButton_Click" />
                                <Button Content="取消" Margin="0,8,0,0" Click="CancelButton_Click" />
                            </StackPanel>
                        </Flyout>
                    </Button.Flyout>
                </Button>
            </Grid>
        </DataTemplate>
    </controls:DataGridTemplateColumn.CellTemplate>
</controls:DataGridTemplateColumn>

后台代码实现 #

private void Grid_PointerPressed(object sender, PointerRoutedEventArgs e)
{
    // 阻止事件冒泡到DataGrid，避免触发单元格选中/编辑逻辑
    e.Handled = true;
}

private void EditButton_Click(object sender, RoutedEventArgs e)
{
    var button = sender as Button;
    // 显式触发Flyout，确保弹出逻辑不受DataGrid干扰
    button?.Flyout?.ShowAt(button);
}

private void ConfirmButton_Click(object sender, RoutedEventArgs e)
{
    // 处理确认逻辑，比如更新绑定数据
    var flyout = (sender as Button)?.Flyout;
    flyout?.Hide();
}

private void CancelButton_Click(object sender, RoutedEventArgs e)
{
    var flyout = (sender as Button)?.Flyout;
    flyout?.Hide();
}

补充说明 #

• 若需在Flyout中绑定当前行数据，直接使用{Binding}即可获取行对应的ViewModel实例，方便修改字段值
• 若仍存在焦点冲突，可给按钮添加Focusable="False"属性，避免按钮焦点与DataGrid焦点逻辑冲突

内容的提问来源于stack exchange，提问作者fasigno