How do you change a DataGridCell background with onmouseover? RRS feed

  • Question

  • Hello,

    I have searched this forum on how to change a DataGridCell background, and I found a lot of posts. However, most of the answers are either set cell background at run time or using the converter.

    What I cannot accomplish and need your help is, how to change the DataGridCell when the mouse is hovering it and change it back to the default color when the mouse is off the cell.

    For sure that is possible with styling, unfortunately, I'm not an expert in styling in Silverlight yet. 


    Please advice. Thank you very much.

    Thursday, January 28, 2010 8:33 PM


  • Right click on your DataGrid and select Edit Additonal Templates/Edit Cell Style/Edit a Copy...
    Give it a suitable name and click OK.
    In the Objects and Timeline panel right click the Focus Visual rectangle and create a copy, paste it and rename it MouseOverVisual.
    Modify the visual properties of the MouseOverVisual rectangle to whatever you want e.g. change the fill colour to Red.  Make sure you leave the Opacity property at 0.
    Now you need to set up the appropriate Visual State Group in this case CommonStates.  This can be done using Blend or you can just copy the following XAML into the Style for your DatGridCell immediately after the <VisualStateManager.VisualStateGroups>

    <VisualStateGroup x:Name="CommonStates">
    <VisualState x:Name="Normal"/>
    <VisualState x:Name="MouseOver">
    <DoubleAnimation Duration="0" Storyboard.TargetName="MouseOverVisual" Storyboard.TargetProperty="Opacity" To="1"/>

    Hope that helps.


    Friday, January 29, 2010 12:26 PM