Question

Lets say I have 2 columns in my data Grid: Column A: Selected, and Column B: Name. The Selected column is a checkbox. And Name column is text field. I want to set the color of the text in ‘Name’ column as Blue if Column A’s check box is checked, and Red otherwise.

Essentially I don’t know how to bind data between columns of the datagrid. And sample code/link providing example would be useful.

Answer 1

I haven’t used the WPF Toolkit’s DataGrid much, but from what I can gather, one method is to use DataGridTemplateColumn’s and then set up your DataTriggers based on the binding.

Here is an example that uses DataTriggers to set the style of the Foreground color as well the entire row’s background color. Of note, you’ll need a boolean Property in your ItemsSource’s binding to make this work with this method.

XAML

<Window.Resources>

<Style TargetType="{x:Type tk:DataGridRow}">
    <Style.Triggers>
        <DataTrigger 
            Binding="{Binding Path=IsSelected}" Value="True">
            <Setter Property="Background" Value="Yellow" />
        </DataTrigger>
    </Style.Triggers>
</Style>

<Style TargetType="{x:Type TextBlock}" x:Key="MyTextBlockStyle">
    <Style.Triggers>
        <DataTrigger 
            Binding="{Binding Path=IsSelected}" Value="True">
            <Setter Property="Foreground" Value="Blue" />
        </DataTrigger>
        <DataTrigger 
            Binding="{Binding Path=IsSelected}" Value="False">
            <Setter Property="Foreground" Value="Red" />
        </DataTrigger>
    </Style.Triggers>
</Style>


</Window.Resources>
<Grid>
<tk:DataGrid x:Name="MyGrid" 
             AutoGenerateColumns="False"
             ItemsSource="{Binding}">
    <tk:DataGrid.Columns>

        <tk:DataGridTemplateColumn Header="Selected"
                                   Width="75">
            <tk:DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                     <CheckBox IsChecked="{Binding Path=IsSelected}"/>
                </DataTemplate>
            </tk:DataGridTemplateColumn.CellTemplate>
        </tk:DataGridTemplateColumn>

        <tk:DataGridTemplateColumn Header="Name" Width="100" >
            <tk:DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Path=Name}" 
                               Style="{StaticResource MyTextBlockStyle}" />
                </DataTemplate>
            </tk:DataGridTemplateColumn.CellTemplate>
        </tk:DataGridTemplateColumn>   

    </tk:DataGrid.Columns>
</tk:DataGrid>

</Grid>

Code Behind

public partial class DataGridDataTrigger : Window
{
    public List<Person> People { get; set; }
    public DataGridDataTrigger()
    {
        InitializeComponent();

        var names = new List<string> { "Joe", "Bob", "Frank", "Scott", "Mike" };
        People = new List<Person>();
        names.ForEach( x => People.Add( new Person { Name = x } ) );

        People.ForEach( x =>
                           {
                               if( x.Name.Contains( "o" ) )
                                   x.IsSelected = true;
                           } );

        MyGrid.DataContext = People;
    }
}

public class Person
{
    public string Name { get; set; }
    public bool IsSelected { get; set; }
}