WinUI 3中如何基于绑定值修改DataGrid单元格背景色

一、静态修改单元格背景色 #

如果只是要统一设置某列或所有单元格的背景色，直接通过CellStyle或列的ElementStyle就能实现：

• 全局设置所有单元格：

<controls:DataGrid>
    <controls:DataGrid.CellStyle>
        <Style TargetType="controls:DataGridCell">
            <Setter Property="Background" Value="#FFE0F7FA"/>
        </Style>
    </controls:DataGrid.CellStyle>
</controls:DataGrid>

• 针对特定列设置：

<controls:DataGridTextColumn Header="名称" Binding="{Binding Name}">
    <controls:DataGridTextColumn.ElementStyle>
        <Style TargetType="TextBlock">
            <Setter Property="Background" Value="#FFFCE4EC"/>
        </Style>
    </controls:DataGridTextColumn.ElementStyle>
</controls:DataGridTextColumn>

二、基于绑定值动态修改背景色 #

方法1：使用值转换器（IValueConverter） #

先写一个实现IValueConverter的类，根据绑定的值返回对应颜色：

using Microsoft.UI.Xaml.Data;
using Microsoft.UI.Xaml.Media;

public class StatusToBackgroundColorConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        if (value is string status)
        {
            return status switch
            {
                "已完成" => new SolidColorBrush(Microsoft.UI.Colors.Green),
                "进行中" => new SolidColorBrush(Microsoft.UI.Colors.Yellow),
                "未开始" => new SolidColorBrush(Microsoft.UI.Colors.Red),
                _ => new SolidColorBrush(Microsoft.UI.Colors.Transparent)
            };
        }
        return new SolidColorBrush(Microsoft.UI.Colors.Transparent);
    }

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

接着在XAML页面资源里声明这个转换器：

<Page.Resources>
    <local:StatusToBackgroundColorConverter x:Key="StatusToColorConverter"/>
</Page.Resources>

最后在DataGrid列中绑定使用：

<controls:DataGridTextColumn Header="状态" Binding="{Binding Status}">
    <controls:DataGridTextColumn.CellStyle>
        <Style TargetType="controls:DataGridCell">
            <Setter Property="Background" Value="{Binding Status, Converter={StaticResource StatusToColorConverter}}"/>
        </Style>
    </controls:DataGridTextColumn.CellStyle>
</controls:DataGridTextColumn>

方法2：使用DataTemplate与VisualState触发器 #

如果需要更复杂的视觉状态切换，用DataTemplate结合VisualStateManager实现：

<controls:DataGridTemplateColumn Header="进度">
    <controls:DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <Grid x:Name="CellGrid" Background="Transparent">
                <TextBlock Text="{Binding Progress}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup>
                        <VisualState x:Name="LowProgress">
                            <VisualState.Setters>
                                <Setter Target="CellGrid.Background" Value="#FFEF9A9A"/>
                            </VisualState.Setters>
                            <VisualState.StateTriggers>
                                <CompareStateTrigger Value="{Binding Progress}" Comparison="LessThan" ValueToCompare="30"/>
                            </VisualState.StateTriggers>
                        </VisualState>
                        <VisualState x:Name="MediumProgress">
                            <VisualState.Setters>
                                <Setter Target="CellGrid.Background" Value="#FFFCD299"/>
                            </VisualState.Setters>
                            <VisualState.StateTriggers>
                                <CompareStateTrigger Value="{Binding Progress}" Comparison="GreaterThanOrEqual" ValueToCompare="30"/>
                                <CompareStateTrigger Value="{Binding Progress}" Comparison="LessThan" ValueToCompare="70"/>
                            </VisualState.StateTriggers>
                        </VisualState>
                        <VisualState x:Name="HighProgress">
                            <VisualState.Setters>
                                <Setter Target="CellGrid.Background" Value="#FFA5D6A7"/>
                            </VisualState.Setters>
                            <VisualState.StateTriggers>
                                <CompareStateTrigger Value="{Binding Progress}" Comparison="GreaterThanOrEqual" ValueToCompare="70"/>
                            </VisualState.StateTriggers>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
            </Grid>
        </DataTemplate>
    </controls:DataGridTemplateColumn.CellTemplate>
</controls:DataGridTemplateColumn>

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