Search code examples
wpfdatagrid

How can I surround my WPF Datagrid header with a curve?


I would like to surround the headers of my datagrid in WPF with a curve. My current code:

<StackPanel Orientation="Vertical" Background="Red">
        <DataGrid Height="433" x:Name="data" Width="801">
            <DataGrid.Resources>
                <Style TargetType="{x:Type DataGridColumnHeader}">
                    <Setter Property="Background" Value="#292F3B"/>
                    <Setter Property="Foreground" Value="LightBlue"/>
                    <Setter Property="FontWeight" Value="SemiBold"/>
                    <Setter Property="Height" Value="30"/>
                    <Setter Property="FontSize" Value="15"/>
                    <Setter Property="BorderThickness" Value="0,0,2,0" />
                    <Setter Property="BorderBrush" Value="#333333"/>
                    <Setter Property="Padding" Value="10 0 0 0"/>
                    
                </Style>
                <Style TargetType="{x:Type DataGrid}">
                    <Setter Property="Background" Value="#20262E"/>
                </Style>
            </DataGrid.Resources>
            
            
            
            <DataGrid.Columns>
                <DataGridTextColumn Header="user"  Binding="{Binding user}" Width="*"/>
                <DataGridTextColumn Header="User1" Binding="{Binding user1}" Width="*"/>
                <DataGridTextColumn Header="User2" Binding="{Binding user2}" Width="*"/>
                <DataGridTextColumn Header="User3" Binding="{Binding user3}" Width="*"/>
                <DataGridTextColumn Header="User4" Binding="{Binding user4}" Width="*"/>
            </DataGrid.Columns>
        </DataGrid>
    </StackPanel>

I tried Corner Radius or Something else but the Property dosent find this.

Like this:Picture


Solution

  • Add a template with a Border with rounded corners.

    <Style TargetType="{x:Type DataGridColumnHeader}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
                    <Border Background="Black">
                        <Border BorderThickness="1"
                                CornerRadius="6"
                                Background="LightBlue"
                                Padding="10,0,0,0"
                                Margin="2">
                            <ContentPresenter/>
                        </Border>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="FontWeight" Value="SemiBold"/>
        <Setter Property="Height" Value="30"/>
        <Setter Property="FontSize" Value="15"/>
    </Style>