Wpf – Remove Border of WPF DataGrid Header column

datagridheaderborderwpfwpfdatagrid

My requirement is that my WPF DataGrid rows should have border but the datagrid header column should not have any border.

If I put DataGrid inside Border element, then entire grid, including header column, gets the border.

I have set GridLinesVisibility="Horizontal".

Is there any way to have border only for grid rows?

Thanks!

Edit

Here is the xaml code I am using..

<Style x:Key="DataGridColumnHeaderHiddenStyle" TargetType="{x:Type DataGridColumnHeader}">
            <Setter Property="Height" Value="15" />            
            <Setter Property="BorderBrush" Value="Transparent"/>            
        </Style>

<StackPanel>
            <ScrollViewer MaxHeight="175" VerticalScrollBarVisibility="Auto">
                <DataGrid  ItemsSource="{Binding SelectedItemsCollectionView}" 
                      CellStyle="{StaticResource CellStyle}" GridLinesVisibility="Horizontal"  HorizontalGridLinesBrush="{StaticResource GridBorderBrush}" ClipToBounds="True" AllowDrop="True" 
                              ScrollViewer.CanContentScroll="True" 
                              ScrollViewer.VerticalScrollBarVisibility="Auto"
                              ScrollViewer.HorizontalScrollBarVisibility="Disabled"

                           x:Name="selectedItemsGrid">


                    <DataGrid.ItemContainerStyle>
                        <Style TargetType="{x:Type DataGridRow}">
                            <Setter Property="AllowDrop" Value="True" />
                        </Style>
                    </DataGrid.ItemContainerStyle>
                    <DataGrid.Columns>
                        <DataGridTextColumn Binding="{Binding Path=Name}">
                            <DataGridTextColumn.ElementStyle>
                                <Style TargetType="TextBlock">
                                    <Setter Property="TextAlignment" Value="Center" />
                                </Style>
                            </DataGridTextColumn.ElementStyle>
                        </DataGridTextColumn>
                    </DataGrid.Columns>
                    <DataGrid.Style>
                        <Style TargetType="DataGrid">
                            <Setter Property="HeadersVisibility" Value="Column" />
                            <Setter Property="ColumnHeaderStyle" Value="{StaticResource DataGridColumnHeaderHiddenStyle}" />
                        </Style>
                    </DataGrid.Style>
                </DataGrid>
            </ScrollViewer>
        </StackPanel>

Best Answer

you can set a style for the DataGridColumnHeader and set SeparatorBrush to transparent. This seems to remove column separators also:

<Style TargetType="{x:Type DataGridColumnHeader}">
    <Setter Property="SeparatorBrush" Value="Transparent" />
</Style>
Related Topic