Search code examples
wpfxamldatagrid

WPF - Remove border lines in datagrid

I'm creating a datagrid in WPF to display values from a database in a table. I'm trying to make it look nice, and at the moment I'm on the right path towards what I want. Nevertheless, I would like to remove the lines that can be seen on the left (marked in red in the image).

enter image description here

My XAML code is (in C# I'm not applying any special style):

<Window x:Class="_4913_TV.ShowDBTable"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:_4913_TV"
    mc:Ignorable="d"
    WindowState="Maximized"
    WindowStyle="None"
    Title="ShowDBTable"
    Cursor="None"
    Width="4096"
    Height="2160"
    KeyDown="KeyedKey">

<Window.Resources>

    <!-- DataGrid style -->
    <Style x:Key="DataGridStyle1"
           TargetType="{x:Type DataGrid}">

        <Setter Property="ColumnHeaderStyle"
                Value="{DynamicResource ColumnHeaderStyle1}" />

    </Style>

    <!-- DataGridColumnHeader style -->
    <Style x:Key="ColumnHeaderStyle1"
           TargetType="DataGridColumnHeader">

        <Setter Property="Template">

            <Setter.Value>

                <ControlTemplate TargetType="{x:Type DataGridColumnHeader}">

                    <Border BorderBrush="Black"
                            Background="Black"
                            BorderThickness="5"
                            CornerRadius="20 20 0 0">

                        <TextBlock Text="{TemplateBinding Content}"
                                   Margin="0 10 0 10"
                                   Foreground="White"
                                   FontSize="35"
                                   FontWeight="Bold"
                                   FontFamily="IBM Plex Sans"
                                   TextAlignment="Center"
                                   HorizontalAlignment="Center" />

                    </Border>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

    </Style>

</Window.Resources>

<Grid>

    <Grid>

        <DataGrid Name="showTable"
                  Style="{DynamicResource DataGridStyle1}"
                  HorizontalAlignment="Center"
                  VerticalAlignment="Center"
                  FontFamily="IBM Plex Sans"
                  FontSize="35"
                  RowHeight="60"
                  BorderBrush="White"
                  GridLinesVisibility="None"
                  AlternatingRowBackground="WhiteSmoke"
                  Height="auto"
                  Width="auto"
                  IsReadOnly="True"
                  TextBlock.TextAlignment="Center"
                  AutoGenerateColumns="true">
        </DataGrid>

    </Grid>

</Grid>

Thanks in advance )

Solution

  • Set the RowHeaderWidth to 0 and also set the Background to Transparent to make the DataGrid melt into the background:

    <Style x:Key="DataGridStyle1" TargetType="{x:Type DataGrid}">
    <Setter Property="ColumnHeaderStyle" Value="{DynamicResource ColumnHeaderStyle1}" />
    <Setter Property="RowHeaderWidth" Value="0" />
    <Setter Property="Background" Value="Transparent" />
</Style>