Disable the current border of DataGrid cells in FullRow selection mode

Question

I am using a DataGrid in row selection mode (ie SelectionUnit="FullRow" ). I just want to remove the border that is placed around the current cell when the user selects a row to have a true full row of selection (and cell level selection). I do not mind that the grid supports the current cell, I just want to remove this annoying current cell border, possibly changing the style of the current cell. What is the easiest way to do this?

Answer 1

You can set BorderThickness for DataGridCell to 0

 <DataGrid ... SelectionUnit="FullRow"> <DataGrid.CellStyle> <Style TargetType="DataGridCell"> <Setter Property="BorderThickness" Value="0"/> <!-- Update from comments. Remove the focus indication for the selected cell --> <Setter Property="FocusVisualStyle" Value="{x:Null}"/> </Style> </DataGrid.CellStyle> <!-- ... --> </DataGrid> 

Answer 2

I saw another answer that was close, but he did not get rid of the Focus rectangle. Here's how to destroy all boundaries.

 <DataGrid.Resources> <Style TargetType="{x:Type DataGridCell}"> <Setter Property="BorderThickness" Value="0" /> <Setter Property="FocusVisualStyle" Value="{x:Null}" /> </Style> </DataGrid.Resources> 

Also, since technically these cells still get focus (you just don't see it) to make a tab to the next row instead of the next cell, I define the cell style based on the above, but also adds the following ...

 <DataGrid.Resources> <Style x:Key="NoFocusDataGridCell" TargetType="{x:Type DataGridCell}" BasedOn="{StaticResource {x:Type DataGridCell}}"> <Setter Property="Focusable" Value="False" /> <Setter Property="IsTabStop" Value="False" /> <Setter Property="IsHitTestVisible" Value="False" /> </Style> </DataGrid.Resources> 

... then I apply this to all but the definition of the first column. Thus, the tab key moves to the next line, and not to the next cell.

Back to the borders. If you want to hide them, but still want them to be part of the layout for layout, change the above to this ...

 <DataGrid.Resources> <Style TargetType="{x:Type DataGridCell}"> <Setter Property="BorderBrush" Value="Transparent" /> <Setter Property="FocusVisualStyle" Value="{x:Null}" /> </Style> </DataGrid.Resources> 

Enjoy! :)

Answer 3

 <Style x:Key="DataGrid" TargetType="DataGrid"> <Setter Property="CellStyle"> <Setter.Value> <Style TargetType="DataGridCell"> <Setter Property="BorderThickness" Value="0"/> <Setter Property="Foreground" Value="{Binding Foreground, RelativeSource={RelativeSource TemplatedParent}}" /> <Setter Property="Background" Value="{Binding Background, RelativeSource={RelativeSource TemplatedParent}}" /> </Style> </Setter.Value> </Setter> </Style> 

Answer 4

If you want to show the border only when the cell is edited and selected, you can override the DataGridCell template and add a multitrigger when the cell is IsSelected, not IsReadOnly. Then no border will be shown for cells if you set IsReadOnly = true for the column or DataGrid

 <ControlTemplate x:Key="MellowDataGridCellTemplate" TargetType="{x:Type DataGridCell}"> <Grid> <ContentPresenter VerticalAlignment="Center" /> <Rectangle Name="FocusVisual" Stroke="White" StrokeThickness="1" Fill="Transparent" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" IsHitTestVisible="false" Opacity="0" /> </Grid> <ControlTemplate.Triggers> <MultiTrigger> <MultiTrigger.Conditions> <Condition Property="IsReadOnly" Value="False" /> <Condition Property="IsSelected" Value="True" /> </MultiTrigger.Conditions> <Setter TargetName="FocusVisual" Property="Opacity" Value="1"/> </MultiTrigger> </ControlTemplate.Triggers> </ControlTemplate> 

Use style template

 <Style TargetType="{x:Type DataGridCell}" x:Key="MellowGridDataGridCell"> <Setter Property="Template" Value="{StaticResource MellowDataGridCellTemplate}" /> </Style> 

And use the style

 <DataGrid CellStyle={StaticResource MellowGridDataGridCell > ... </DataGrid> 

Answer 5

If you are using xceed DataGridControl , set the NavigationBehavior parameter to RowOnly

 <xcdg:DataGridControl NavigationBehavior="RowOnly" SelectionMode="Single" ....