c# - 绑定(bind)属性值更改时更改 DataGrid 单元格的文本颜色

Question

我有一个 DataGrid在 WPF 中，用 ObservableCollection 的元素填充( ElementGroup 具有 ID 和 Text 属性并从 XML 文件中读取的项目)。
我想要实现的是，当用户编辑单元格的值时，单元格内容的文本颜色会发生变化。一旦用户离开单元格并且值与原始值不同，单元格的颜色应保持例如绿色。

到目前为止我所拥有的:

具有以下数据网格的用户控件:

<DataGrid Grid.Row="7" Grid.Column="3" ItemsSource="{Binding Config.ElementGroups, Mode=TwoWay}" AutoGenerateColumns="False" >            
    <DataGrid.Columns>  
        <DataGridTextColumn Header="ID" Binding="{Binding Id, Mode=TwoWay}" Width="Auto"/>
        <DataGridTextColumn Header="Group Name" Binding="{Binding Text, Mode=TwoWay}" Width="*" />
    </DataGrid.Columns>
</DataGrid>

用户控件背后的代码中没有任何内容。

具有 2 个属性的 ElementGroup 类，它也实现了 INotifyPropertyChanged (额外的类，以便重新使用它)

public class ElementGroup : NotifyPropertyChangedBase, ITag
{
    private int myId;
    private string myText;

    public ElementGroup()
    {
        Elements = new List<Element>();
    }

    public List<Element> Elements { get; private set; }

    public int Id 
    { 
        get { return myId; }
        set
        {
            if (myId == value)
            {
                return;
            }
            myId = value;
            OnPropertyChanged();
        }
    }

    public string Text
    {
        get { return myText; }
        set
        {
            if (myText == value)
            {
                return;
            }
            myText = value;
            OnPropertyChanged();
        }
    }
}

数据网格行已正确填充:

datagrid example

我在我的 View 模型中收听属性更改事件。当我将它设置为处理程序然后更改数据网格的一个单元格时，该事件被触发并且断点被击中。 HasTextChanged和 HasIdChanged如果更改是真正的更改，则函数返回 true；如果将值更改为先前的值，则返回 false。

private void GroupPropertyChanged(object sender, PropertyChangedEventArgs propertyChangedEventArgs)
{
    ElementGroup changedGroup = sender as ElementGroup;

    switch (propertyChangedEventArgs.PropertyName)
    {
        case "Text":
            GroupChanged = HasTextChanged(changedGroup);
            OnPropertyChanged("GroupChanged");
            break;
        case "Id":
            GroupChanged = HasIdChanged(changedGroup);
            OnPropertyChanged("GroupChanged");
            break;
    }           
}

我试过的:

起初我以为我只是返回一个颜色并将前景色绑定(bind)到数据网格，就像它适用于一个简单的 TextBox :

<TextBox Grid.Row="5" Grid.Column="3" Text="{Binding Config.Description}" Foreground="{Binding DescriptionColor}"/>

但是将相同的前台绑定(bind)到 DataGridTextColumns不工作。我尝试调整此处找到的答案( Change Color of DatagridCell )，但无法使其正常工作( DescriptionColor 在下面的示例中为 SolidColorBrush DescriptionColor = Brushes.Green :

<DataGridTextColumn Header="Group Name" Binding="{Binding Text, Mode=TwoWay}" Width="*" >
    <DataGridTextColumn.CellStyle>
        <Style>
            <Setter Property="Border.Background" Value="{Binding DescriptionColor}"/>
        </Style>
    </DataGridTextColumn.CellStyle>
</DataGridTextColumn>

我发现的所有其他单元格颜色更改答案都是关于设置触发器，如果​​值更改为指定值，则可以更改颜色。

所以我决定采用“真正的改变是/否”的方法，并添加了一个样式触发我的数据网格:

<DataGrid Grid.Row="7" Grid.Column="3" ItemsSource="{Binding Config.ElementGroups, Mode=TwoWay}" AutoGenerateColumns="False" >
    <DataGrid.CellStyle>
        <Style TargetType="{x:Type DataGridCell}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding GroupChanged}" Value="True">
                    <Setter Property="Background" Value="Green"/>
                </DataTrigger>
                <DataTrigger Binding="{Binding GroupChanged}" Value="False">
                    <Setter Property="Background" Value="Black"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </DataGrid.CellStyle>
    <DataGrid.Columns>  
        <DataGridTextColumn Header="ID" Binding="{Binding Id, Mode=TwoWay}" Width="Auto"/>
        <DataGridTextColumn Header="Group Name" Binding="{Binding Text, Mode=TwoWay}" Width="*" />
    </DataGrid.Columns>
</DataGrid>

这也不起作用，我开始怀疑我是否错过了一些基本的东西。

有没有人知道我做错了什么，或者我必须做什么才能让它发挥作用？
我必须承认，我不是 100% 了解触发器的工作原理以及它是否真的知道该做什么......

谢谢

Answer 1

如果我清楚地了解您想标记用户当前正在编辑的单元格。因此，如果您使用 DataGridTextBoxColumns您可以添加EditingElementStyle为他们。

<DataGrid.Resources>
    <Style x:Key="EditingStyle" TargetType="TextBox">
        <Setter Property="Background" Value="Green" />
        <Setter Property="Foreground" Value="White" />
    </Style>
</DataGrid.Resources>

列应该是这样的。

<DataGridTextColumn Header="ID" Binding="{Binding Id, Mode=TwoWay}" Width="Auto"
                    EditingElementStyle="{StaticResource EditingStyle}" />

更新

要保留已编辑单元格的颜色，您可以 1 添加一些 bool Prop 到 ElementGroup表示已编辑的单元格。像这样的东西。

private bool _isIdChanged;
public bool IsIdChanged
{
    get { return _isIdChanged; }
    set { _isIdChanged = value; NotifyPropertyChanged( "IsIdChanged" ); }
}

2 你应该添加到 id setter IsIdChanged = true .

...
myId = value;
OnPropertyChanged();
IsIdChanged = true;

3 更改 ID 的绑定(bind)柱子。

Binding="{Binding Id, Mode=TwoWay, NotifyOnTargetUpdated=True}"

4 为该列添加样式。

<Style x:Key="IdStyle" TargetType="DataGridCell">
    <Style.Triggers>
        <DataTrigger Binding="{Binding IsIdChanged}" Value="True">
            <Setter Property="Background" Value="Green" />
        </DataTrigger>
    </Style.Triggers>
</Style>

<DataGridTextColumn Name="ID" ... CellStyle="{StaticResource IdStyle}" />

5 绑定(bind)到 DataGrid 后应该更改 IsIdChanged 的所有值集合元素为假。并且它需要在从后面的代码更改值后将其设置为 false。

6 应该为其他列添加相同的代码。希望这可以帮助。

更新

我查看了您的代码，您应该更改 DataTrigger绑定(bind)到这个。

<DataTrigger Binding="{Binding IdChanged}" Value="True">
    <Setter Property="Background" Value="Green" />
</DataTrigger>

您应该在 ChangeConfigSettingViewModel 的构造函数中添加这些字符串.它应该是用于初始化 IdChanged 的构造函数的最后一个字符串值为假。

foreach ( PersonModel pers in myPersons )
{
    pers.IdChanged = false;
}