Silverlight DataGrid row color binding

Question

I'd like to find a way to bind the background color of rows of a DataGrid to a property of my bound objects.

Here is my XAML :

<sdk:DataGrid ItemsSource="{Binding MyItems}" />

I'm using the MVVM Light Toolkit with Silverlight 4.

Answer 1

You can do it by changing a row template:

<sdk:DataGrid ItemsSource="{Binding MyItems}">
    <sdk:DataGrid.RowStyle>
        <Style TargetType="sdk:DataGridRow">
            <Setter Property="Template">
            ...
                <Rectangle x:Name="BackgroundRectangle" Fill="{Binding ColorPropertyOfItem}" />
            ...
            </Setter>
        </Style>
    </sdk:DataGrid.RowStyle>
</sdk:DataGrid>

Or you can mark each column as TemplateColumn and set background color explicitly in each of them:

<sdk:DataGridTemplateColumn Header="ColumnName" SortMemberPath="ColumnProperty">
    <sdk:DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding ColumnProperty}" Background="{Binding ColorPropertyOfItem}" />
        </DataTemplate>
    </sdk:DataGridTemplateColumn.CellTemplate>
</sdk:DataGridTemplateColumn>

Here is a complete template of the DataGridRow class:

<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="local:DataGridRow" 
             xmlns:localprimitives="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls.Data"
             xmlns:local="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
             xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows">
            <localprimitives:DataGridFrozenGrid Name="Root">
                <vsm:VisualStateManager.VisualStateGroups>
                    <vsm:VisualStateGroup x:Name="CommonStates">
                        <vsm:VisualState x:Name="Normal"/>
                    <vsm:VisualState x:Name="NormalAlternatingRow">
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To="0"/>
                            </Storyboard>
                        </vsm:VisualState>
                        <vsm:VisualState x:Name="MouseOver">
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To=".5"/>
                            </Storyboard>
                        </vsm:VisualState>
                        <vsm:VisualState x:Name="NormalSelected">
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/>
                            </Storyboard>
                        </vsm:VisualState>
                        <vsm:VisualState x:Name="MouseOverSelected">
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/>
                            </Storyboard>
                        </vsm:VisualState>
                        <vsm:VisualState x:Name="UnfocusedSelected">
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/>
                                <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="(Fill).Color" To="#FFE1E7EC"/>
                            </Storyboard>
                        </vsm:VisualState>
                    </vsm:VisualStateGroup>
                    <vsm:VisualStateGroup x:Name="ValidationStates">
                        <vsm:VisualState x:Name="Valid"/>
                        <vsm:VisualState x:Name="Invalid">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Visibility">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                </ObjectAnimationUsingKeyFrames>
                                <DoubleAnimation Storyboard.TargetName="InvalidVisualElement" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/>
                            </Storyboard>
                        </vsm:VisualState>
                    </vsm:VisualStateGroup>
                </vsm:VisualStateManager.VisualStateGroups>
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>

                <Grid.Resources>
                    <Storyboard x:Key="DetailsVisibleTransition">
                        <DoubleAnimation Storyboard.TargetName="DetailsPresenter" Storyboard.TargetProperty="ContentHeight" Duration="00:00:0.1" />
                    </Storyboard>
                </Grid.Resources>

                <Rectangle x:Name="BackgroundRectangle" Grid.RowSpan="2" Grid.ColumnSpan="2" Opacity="0" Fill="{Binding ColorPropertyOfItem}"/>
                <Rectangle x:Name="InvalidVisualElement" Grid.RowSpan="2" Grid.ColumnSpan="2" Opacity="0" Fill="#FFF7D8DB"/>

                <localprimitives:DataGridRowHeader Grid.RowSpan="3" Name="RowHeader" localprimitives:DataGridFrozenGrid.IsFrozen="True" />
                <localprimitives:DataGridCellsPresenter Grid.Column="1" Name="CellsPresenter" localprimitives:DataGridFrozenGrid.IsFrozen="True" />
                <localprimitives:DataGridDetailsPresenter Grid.Row="1" Grid.Column="1" Name="DetailsPresenter" />
                <Rectangle Grid.Row="2" Grid.Column="1" Name="BottomGridLine" HorizontalAlignment="Stretch" Height="1" />
            </localprimitives:DataGridFrozenGrid>
        </ControlTemplate>
    </Setter.Value>
</Setter>

And don't forget to change Binding ColorPropertyOfItem to a real property of the type Brush in your model.