none
DataGrid Turn Off Selected Cell Style

    Question

  • I have a read-only datagrid. When the user selects a row the cell they clicked on gets a different style from the other cells in the row. Is it possible to turn this behavior off?

    My concern is that having the selected cell look different encourages the user to think the cell is editable when in fact it is not and they are simply selecting the entire row. 

    Thanks.

     

     

    Wednesday, October 15, 2008 1:34 AM

Answers

  • Hi Wackyphill, 

    I have a read-only datagrid. When the user selects a row the cell they clicked on gets a different style from the other cells in the row. Is it possible to turn this behavior off?

    We need to use VisualStateManager to manage its state according to its behaviors.   For example,

    <Style TargetType="local:DataGridRow">
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:DataGridRow">
                    <localprimitives:DataGridFrozenGrid Name="Root">
                        <vsm:VisualStateManager.VisualStateGroups>
                            <vsm:VisualStateGroup x:Name="CommonStates">
                                <vsm:VisualStateGroup.Transitions>
                                    <vsm:VisualTransition GeneratedDuration="0" />
                                </vsm:VisualStateGroup.Transitions>
                                <vsm:VisualState x:Name="Normal" />
                                <vsm:VisualState x:Name="Normal AlternatingRow">
                                    <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="Normal Selected">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="MouseOver Selected">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="Unfocused Selected">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/>
                                        <ColorAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
                                            <SplineColorKeyFrame KeyTime="0" Value="#FFE1E7EC"/>
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                </vsm:VisualState>
                            </vsm:VisualStateGroup>
                        </vsm:VisualStateManager.VisualStateGroups>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                        </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="#FFBADDE9"/>

                        <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>
    </Style>

    For more, please take a look at this document.

    Best regards,

    Jonathan

    Tuesday, October 21, 2008 2:50 AM

All replies

  • Hi Wackyphill, 

    I have a read-only datagrid. When the user selects a row the cell they clicked on gets a different style from the other cells in the row. Is it possible to turn this behavior off?

    We need to use VisualStateManager to manage its state according to its behaviors.   For example,

    <Style TargetType="local:DataGridRow">
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:DataGridRow">
                    <localprimitives:DataGridFrozenGrid Name="Root">
                        <vsm:VisualStateManager.VisualStateGroups>
                            <vsm:VisualStateGroup x:Name="CommonStates">
                                <vsm:VisualStateGroup.Transitions>
                                    <vsm:VisualTransition GeneratedDuration="0" />
                                </vsm:VisualStateGroup.Transitions>
                                <vsm:VisualState x:Name="Normal" />
                                <vsm:VisualState x:Name="Normal AlternatingRow">
                                    <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="Normal Selected">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="MouseOver Selected">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="Unfocused Selected">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/>
                                        <ColorAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
                                            <SplineColorKeyFrame KeyTime="0" Value="#FFE1E7EC"/>
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                </vsm:VisualState>
                            </vsm:VisualStateGroup>
                        </vsm:VisualStateManager.VisualStateGroups>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                        </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="#FFBADDE9"/>

                        <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>
    </Style>

    For more, please take a look at this document.

    Best regards,

    Jonathan

    Tuesday, October 21, 2008 2:50 AM
  • Thank you Jonathan!

    Saturday, October 25, 2008 1:16 PM
  • I have this recommended change, but the "selected cell" in the DataGrid that is read-only still shows a lighter color that the other cells in the row.  I believe the original post was asking how to make all the cells in the selected row the same color.  Am I doing something wrong, or does this not address the different color for the selected cell?

     I agree with the original post that in a read-only DataGrid, it is not a good pattern to have a cell look as though it is selected.

    Thursday, May 28, 2009 4:35 PM
  • Hi,

    to supress the Cell-Look, you have to set the CellStyle-Property of your DataGrid. Assign the following CellStyle via StaticResource to this property:

     

    <Style x:Key="dataGridCellStyle" TargetType="data:DataGridCell">

    <Setter Property="Background" Value="Transparent" />

    <Setter Property="HorizontalContentAlignment" Value="Stretch" />

    <Setter Property="VerticalContentAlignment" Value="Stretch" />

    <Setter Property="Cursor" Value="Arrow" />

    <Setter Property="IsTabStop" Value="False" />

    <Setter Property="Template">

    <Setter.Value>

    <ControlTemplate TargetType="data:DataGridCell">

    <Grid Name="Root" Background="{TemplateBinding Background}">

    <vsm:VisualStateManager.VisualStateGroups>

    <vsm:VisualStateGroup x:Name="CurrentStates">

    <vsm:VisualState x:Name="Regular" />

    <vsm:VisualState x:Name="Current"/>

    </vsm:VisualStateGroup>

    <vsm:VisualStateGroup x:Name="ValidationStates">

    <vsm:VisualStateGroup.Transitions>

    <vsm:VisualTransition GeneratedDuration="00:00:0.1"/>

    </vsm:VisualStateGroup.Transitions>

    <vsm:VisualState x:Name="Valid"/>

    <vsm:VisualState x:Name="Invalid">

    <Storyboard>

    <DoubleAnimation Storyboard.TargetName="InvalidVisualElement" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/>

    <ColorAnimation Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="(Fill).Color" Duration="0" To="#FFFFFFFF"/>

    </Storyboard>

    </vsm:VisualState>

    </vsm:VisualStateGroup>

    </vsm:VisualStateManager.VisualStateGroups>

    <Grid.ColumnDefinitions>

    <ColumnDefinition />

    <ColumnDefinition Width="Auto" />

    </Grid.ColumnDefinitions>

    <Rectangle Name="FocusVisual" Stroke="#FF6DBDD1" StrokeThickness="1" Fill="#66FFFFFF" HorizontalAlignment="Stretch"

    VerticalAlignment="Stretch" IsHitTestVisible="false" Opacity="0" />

    <ContentPresenter

    Content="{TemplateBinding Content}"

    ContentTemplate="{TemplateBinding ContentTemplate}"

    Cursor="{TemplateBinding Cursor}"

    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

    Margin="{TemplateBinding Padding}" />

    <Rectangle x:Name="InvalidVisualElement" IsHitTestVisible="False" StrokeThickness="1" Stroke="#FFDC000C" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Opacity="0"/>

    <Rectangle Name="RightGridLine" Grid.Column="1" VerticalAlignment="Stretch" Width="1" />

    </Grid>

    </ControlTemplate>

    </Setter.Value>

    </Setter>

    </Style>

    Wednesday, July 01, 2009 2:50 PM
  • Thomas, your solution worked for me/saved my life. Thanks :)

    The first solution did not work for me either, I have a read only grid too and the cell still showed lighter with this code.

    Regards,

    Sanaa

    Tuesday, March 23, 2010 12:10 PM
  • This works fine for changing the selected state on a cell, however, if one has modified style for the DataGridRow those styles aren't propogated down to the cell. 

    For example. If you wrap the DataGridCellsPresenter in a ContentControl to be able to handle the foreground color of a cell, and on that same grid you apply that cell style, the row style for the cell is ignored.  How does one do this?

    Thursday, May 13, 2010 8:15 PM
  • You can add an "invisible" column:

    <sdk:DataGrid.Columns>
    <sdk:DataGridTextColumn Binding="{Binding Path=Nothing}" MinWidth="0" MaxWidth="0" />
    
    And make it current whenever current cell is changed:
    Private Sub _CurrentCellChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.CurrentCellChanged
        If Me.CurrentColumn IsNot Nothing Then Me.CurrentColumn = Me.Columns(0)
    End Sub
    
    This was suitable for me.
    Monday, September 13, 2010 5:11 PM
  • nice hack hnilickam, thanks

    Wednesday, January 26, 2011 5:43 AM
  • Awesome hack indeed.  Here's my xaml / c# translation.

    <sdk:DataGrid x:Name="dataGridAttendees" CurrentCellChanged="dataGridAttendees_CurrentCellChanged">
    <sdk:DataGrid.Columns>
    <sdk:DataGridTextColumn x:Name="myBlank" Binding="{Binding Path=Nothing}" MinWidth="0" MaxWidth="0" />

    ...

            private void dataGridAttendees_CurrentCellChanged(object sender, EventArgs e)
            {
                dataGridAttendees.CurrentColumn = dataGridAttendees.Columns[0];
            }

    Neil Squires



    Monday, February 27, 2012 7:06 PM