UWP DataGrid单元格内ColorPickerButton无法选中颜色问题咨询

AI 小北

2026-10-8

修复方案

这个问题是Windows Community Toolkit旧版本的已知缺陷，同时叠加了DataGrid单元格路由事件拦截、TabView首标签预渲染逻辑异常两个影响因素，可按以下优先级修复：

方案1：升级Toolkit版本（推荐）

低于7.1.2版本的UWP Toolkit确实存在ColorPickerButton嵌套在DataTemplate中时的事件冒泡异常问题，直接升级到7.1.2及以上的稳定版即可，官方已经在该版本修复了对应场景的bug。

方案2：调整DataGrid模板列结构

将ColorPickerButton从CellTemplate移到CellEditingTemplate中，仅在单元格进入编辑状态时加载颜色选择器，从根源避免DataGrid显示状态的事件拦截：

<toolkit:DataGridTemplateColumn  Header="Color"  Tag="LayerColor">
    <toolkit:DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <!-- 显示状态只用色块展示颜色 -->
            <Border Width="20" Height="20" Background="{Binding LayerColor, Mode=OneWay}"/>
        </DataTemplate>
    </toolkit:DataGridTemplateColumn.CellTemplate>
    <toolkit:DataGridTemplateColumn.CellEditingTemplate>
        <DataTemplate>
            <toolkit:ColorPickerButton SelectedColor="{Binding LayerColor, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
        </DataTemplate>
    </toolkit:DataGridTemplateColumn.CellEditingTemplate>
</toolkit:DataGridTemplateColumn>

方案3：手动干预事件逻辑（无需调整现有结构）

如果不想改动现有布局，直接给ColorPickerButton加事件处理强制同步状态即可：

XAML添加事件和属性配置

<toolkit:ColorPickerButton 
    SelectedColor="{Binding LayerColor, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
    ColorChanged="ColorPickerButton_ColorChanged"
    IsTabStop="True"/>

后台添加事件处理逻辑

private void ColorPickerButton_ColorChanged(ColorPickerButton sender, ColorChangedEventArgs args)
{
    // 强制关闭颜色选择面板
    sender.IsDropDownOpen = false;
    // 手动触发绑定源更新，避免属性变更丢失
    var bindingExpr = sender.GetBindingExpression(ColorPickerButton.SelectedColorProperty);
    bindingExpr?.UpdateSource();
}

针对首标签页异常的补充修复

如果是使用TabView承载页面，给TabView添加PreloadTabItems="False"配置，关闭首标签提前预渲染逻辑，保证所有标签页的渲染逻辑一致即可。

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