C# - Removing right edge row border in WPF DataGrid

Question

I am trying to remove the far right GridLine in a WPF GridView. Here is an example .xaml

<Window x:Class="Pack.ExampleForm"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:Pack"
    Background="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"
    Width="400" Height="300">

    <DataGrid Margin="5" AutoGenerateColumns="False" 
        CanUserReorderColumns="False" HeadersVisibility="Column">

        <DataGrid.Columns>
            <DataGridTextColumn Binding="{x:Null}" CanUserResize="False"/>
            <DataGridTextColumn Binding="{Binding Path=Key}" Header="Request Header" Width="*"/>
            <DataGridTextColumn Binding="{Binding Path=Value}" Header="Value" Width="*"/>
        </DataGrid.Columns>

        <local:RequestHeader Key="Subject 1" Value="Body 1" />
        <local:RequestHeader Key="Subject 1" Value="Body 1" />
    </DataGrid>
</Window>

However this has the far right gridline, as show in the designer, circled in yellow.

Is there any way to remove this and have no border, as it is on the left side. Would prefer to do this in the .xaml if possible.

Solution 1

Hm, it is just sneaky workaround, but... :)

<DataGridTextColumn Binding="{Binding Value}" Width="*">
    <DataGridTextColumn.CellStyle>
        <Style TargetType="DataGridCell">
            <Setter Property="Margin" Value="0,0,-1,0"></Setter>
        </Style>
    </DataGridTextColumn.CellStyle>    
</DataGridTextColumn>

Solution 2

While @monstr's solution does work, it feels like an abuse of the Margin property (it could also make tracking down layout issues more difficult later on). Another solution, which is very similar to the ones suggested by @Nick Sologoub and @Xtr but is slightly cleaner, is to use DataGrid's CellStyle property to modify all cell styles associated with that DataGrid along with DataGrid's GridLinesVisibility property.

<DataGrid GridLinesVisibility="None">
    <DataGrid.CellStyle>
        <Style TargetType="DataGridCell">
            <Setter Property="BorderThickness" Value="1,0,0,1"/>
            <Setter Property="BorderBrush" Value="Black"/>
        </Style>
    </DataGrid.CellStyle>
    <!--Other DataGrid Items-->
</DataGrid>

By styling cells in this manner, you do not affect the layout of controls (whereas messing with the margin does). You also get the benefit of only affecting this one specific DataGrid, and no others in your application. However, if you did want this style to be applied to all DataGrids in your window, you could put it in your window's resources, or even in your application's resources.

<Window>
    <Window.Resources>
        <Style TargetType="DataGrid">
            <Setter Property="GridLinesVisibility" Value="None"/>
        </Style>
        <Style TargetType="DataGridCell">
            <Setter Property="BorderThickness" Value="1,0,0,1"/>
            <Setter Property="BorderBrush" Value="Black"/>
        </Style>
    </Window.Resources>
    <Grid>
        <DataGrid>
            <!--DataGrid Items-->
        </DataGrid>
    </Grid>
</Window>

Notice that the GridLinesVisibility property is also included as it is necesary for this solution to work properly.

The proper way to achieve window/application level styling (like above) would most likely include some usage of ResourceDictionaries, but that's a whole different topic.

Solution 3

IF you want to remove whole Grid cell border then can use GridLinesVisibility="None". else below is the solution to remove single border.

Removing all DataGrid row and cell borders

Solution 4

I did some research, but it doesn't seem like MSFT exposes the properties to modify each specific grid line. So I have a workaround for you. It's not ideal, but it's quite clean and involves no code-behind.

Basically there is a property to control the visibility of grid lines. What you do is hide the vertical ones and then you create a style for cells that will manually create vertical grid lines. You apply that style to every column except for the last one and you get the design you desire.

   <Window.Resources>
    <Style x:Key="DataGridCellStyle">
      <Setter Property="DataGridCell.BorderThickness" Value="0 0 1 0" />
      <Setter Property="DataGridCell.BorderBrush" Value="Black" />
    </Style>
  </Window.Resources>
  <Grid>
    <DataGrid x:Name="grid" Margin="5" AutoGenerateColumns="False" CanUserReorderColumns="False" HeadersVisibility="Column" 
        GridLinesVisibility="Horizontal" >
      <DataGrid.Columns>
        <DataGridTextColumn Binding="{x:Null}" CanUserResize="False" CellStyle="{StaticResource DataGridCellStyle}"/>
        <DataGridTextColumn Binding="{Binding Path=Key}" Header="Request Header" Width="*" CellStyle="{StaticResource DataGridCellStyle}"/>
        <DataGridTextColumn Binding="{Binding Path=Value}" Header="Value" Width="*"/>
      </DataGrid.Columns>
    </DataGrid>
  </Grid>

View more solutions