Silverlight datagrid change foreground color on VisualStateManager(mouseover, selected)

Here is how you could change font properties using the VisualStateManager in a Silverlight datagrid.

The main problem is that when trying to edit a copy of the grid style the row content is presented as a DataGridCellPresenter, which doesn’t have any font properties. So what you can do is to wrap the DataGridCellPresenter into a contentControl so this way you can modify its properties and the  DataGridCellPresenter would inherit them.

Here is an example:

<ContentControl x:Name=”contentControl” Foreground=”#FF000000″>
  <Primitives:DataGridCellsPresenter x:Name=”CellsPresenter” Grid.Column=”1″
                                                                            Primitives:DataGridFrozenGrid.IsFrozen=”True”/>
</ContentControl>

<vsm:VisualState x:Name=”MouseOver”>
  <Storyboard>
    <ColorAnimationUsingKeyFrames BeginTime=”00:00:00″ Duration=”00:00:00.0010000″
                                                                           Storyboard.TargetName=”contentControl”
                                                                           Storyboard.TargetProperty=”(Control.Foreground).(SolidColorBrush.Color)”>
      <SplineColorKeyFrame KeyTime=”00:00:00″ Value=”#FFE13710E”/>
    </ColorAnimationUsingKeyFrames>
  </Storyboard>
</vsm:VisualState><vsm:VisualState  x:Name=”Normal Selected”>
  <Storyboard>
    <DoubleAnimationUsingKeyFrames Storyboard.TargetName=”BackgroundRectangle”
                                                                               Storyboard.TargetProperty=”Opacity”>
      <SplineDoubleKeyFrame KeyTime=”0″ Value=”1″/>
    </DoubleAnimationUsingKeyFrames>
    <ColorAnimationUsingKeyFrames BeginTime=”00:00:00″ Duration=”00:00:00.0010000″
                                                                            Storyboard.TargetName=”contentControl”
                                                                            Storyboard.TargetProperty=”(Control.Foreground).(SolidColorBrush.Color)”>
      <SplineColorKeyFrame KeyTime=”00:00:00″ Value=”#FFE12222″/>
    </ColorAnimationUsingKeyFrames>
  </Storyboard>
</vsm:VisualState>