如何在WinUI 3.0中通过代码自定义DataGrid单元格颜色？

在WinUI 3.0中可以通过编程实现该功能，以下是几种实用的实现方案，基于微软Community Toolkit提供的DataGrid控件：

方案1：实体类新增计算属性绑定背景色 #

适合简单场景，直接在数据实体中根据值返回对应背景色

1.1 定义数据实体（实现INotifyPropertyChanged确保动态更新） #

using CommunityToolkit.Mvvm.ComponentModel;
using Windows.UI;
using Windows.UI.Xaml.Media;

public class DataItem : ObservableObject
{
    private int _cellValue;
    public int CellValue
    {
        get => _cellValue;
        set => SetProperty(ref _cellValue, value);
    }

    // 根据值计算背景色的属性
    public SolidColorBrush CellBackground
    {
        get
        {
            if (CellValue > 80) return new SolidColorBrush(Colors.Green);
            if (CellValue > 50) return new SolidColorBrush(Colors.Yellow);
            return new SolidColorBrush(Colors.Red);
        }
    }
}

1.2 XAML中使用DataGridTemplateColumn自定义单元格 #

<!-- 先引入Community Toolkit控件命名空间 -->
xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"

<controls:DataGrid ItemsSource="{x:Bind DataList}" AutoGenerateColumns="False">
    <controls:DataGrid.Columns>
        <controls:DataGridTemplateColumn Header="数值">
            <controls:DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Grid Background="{x:Bind CellBackground, Mode=OneWay}">
                        <TextBlock Text="{x:Bind CellValue}" Padding="8" />
                    </Grid>
                </DataTemplate>
            </controls:DataGridTemplateColumn.CellTemplate>
        </controls:DataGridTemplateColumn>
    </controls:DataGrid.Columns>
</controls:DataGrid>

方案2：使用IValueConverter实现值到颜色的转换 #

适合需要复用颜色逻辑的场景，无需修改实体类

2.1 编写转换器类 #

using Windows.UI;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Media;

public class ValueToBrushConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        if (value is int intValue)
        {
            return intValue switch
            {
                > 80 => new SolidColorBrush(Colors.Green),
                > 50 => new SolidColorBrush(Colors.Yellow),
                _ => new SolidColorBrush(Colors.Red)
            };
        }
        return new SolidColorBrush(Colors.Transparent);
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

2.2 XAML中声明转换器并绑定 #

<Page.Resources>
    <!-- 引入转换器命名空间 -->
    <local:ValueToBrushConverter x:Key="ValueToBrushConverter" />
</Page.Resources>

<controls:DataGrid ItemsSource="{x:Bind DataList}" AutoGenerateColumns="False">
    <controls:DataGrid.Columns>
        <controls:DataGridTextColumn Header="数值" Binding="{x:Bind CellValue}">
            <controls:DataGridTextColumn.CellStyle>
                <Style TargetType="controls:DataGridCell">
                    <Setter Property="Background" 
                            Value="{Binding CellValue, Converter={StaticResource ValueToBrushConverter}}" />
                </Style>
            </controls:DataGridTextColumn.CellStyle>
        </controls:DataGridTextColumn>
    </controls:DataGrid.Columns>
</controls:DataGrid>

方案3：自动生成列时动态设置样式 #

适合开启AutoGenerateColumns的场景，通过事件处理列样式

3.1 XAML中添加事件 #

<controls:DataGrid ItemsSource="{x:Bind DataList}" 
                   AutoGenerateColumns="True"
                   AutoGeneratingColumn="DataGrid_AutoGeneratingColumn" />

3.2 后台代码处理事件 #

private void DataGrid_AutoGeneratingColumn(object sender, DataGridAutoGeneratingColumnEventArgs e)
{
    // 匹配目标列（这里以列名为"CellValue"为例）
    if (e.Column.Header.ToString() == "CellValue")
    {
        var cellStyle = new Style(typeof(DataGridCell));
        cellStyle.Setters.Add(new Setter(DataGridCell.BackgroundProperty, 
            new Binding("CellValue") { Converter = new ValueToBrushConverter() }));
        e.Column.CellStyle = cellStyle;
    }
}

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