Rounded corners on datagrid rows

Question

In my wpf project I have this:

<DataGrid x:Name="Tasks" CanUserDeleteRows="True" IsReadOnly="False" AutoGenerateColumns="False" HorizontalAlignment="Left" Height="413" VerticalAlignment="Top" Width="1100" Background="Transparent" HorizontalGridLinesBrush="Transparent" VerticalGridLinesBrush="Transparent" RowBackground="#202020" AlternatingRowBackground="#262626">
<DataGrid.Columns>
    <DataGridTextColumn Header="..." Binding="{Binding ..., UpdateSourceTrigger=PropertyChanged}"/>
    <DataGridTextColumn Header="...="{Binding ..., UpdateSourceTrigger=PropertyChanged}"/>
    <DataGridTextColumn Header="..." Binding="{Binding ..., UpdateSourceTrigger=PropertyChanged}"/>
    <DataGridTextColumn Header="..." Binding="{Binding ..., UpdateSourceTrigger=PropertyChanged}"/>
    <DataGridTextColumn Header="Colour" Binding="{Binding Colour, UpdateSourceTrigger=PropertyChanged}"/>
    <DataGridTextColumn Header="..." Binding="{Binding ..., UpdateSourceTrigger=PropertyChanged}"/>
    <DataGridTextColumn Header="..." Binding="{Binding ..., UpdateSourceTrigger=PropertyChanged}"/>
    <DataGridTextColumn Header="..." Binding="{Binding ..., UpdateSourceTrigger=PropertyChanged}"/>
    <DataGridTextColumn Header="..." Binding="{Binding ..., Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
    <DataGridTemplateColumn Header="...">
        <DataGridTemplateColumn.CellTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <Button Click="Start_Task_Click">
                        <materialDesign:PackIcon Kind="Play" Foreground="White"/>
                    </Button>
                    <Button Margin="5,0,0,0" Click="Stop_Button_Click">
                        <materialDesign:PackIcon Kind="Stop" Foreground="White"/>
                    </Button>
                    <Button Margin="5,0,0,0" Click="Edit_Task">
                        <materialDesign:PackIcon Kind="Pencil" Foreground="White"/>
                    </Button>
                    <Button Margin="5,0,0,0" Click="Delete_Button_Click">
                        <materialDesign:PackIcon Kind="Delete" Foreground="White"/>
                    </Button>
                </StackPanel>
            </DataTemplate>
        </DataGridTemplateColumn.CellTemplate>
    </DataGridTemplateColumn>
</DataGrid.Columns>

Is there anyway I could make it so that the rows (not the whole datagrid) has rounded corners, producing something like this.

P.S. I made it in Paint in like 5 seconds so dont judge my drawing skills :P

Answer 1

You could define a custom DataGridRow template that contains a Border with some CornerRadius, e.g.:

<DataGrid.RowStyle>
    <Style TargetType="DataGridRow">
        <Setter Property="BorderThickness" Value="2" />
        <Setter Property="BorderBrush" Value="Red" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type DataGridRow}">
                    <Border x:Name="DGR_Border" BorderBrush="{TemplateBinding BorderBrush}" 
                                        BorderThickness="{TemplateBinding BorderThickness}" 
                                        Background="{TemplateBinding Background}" 
                                        SnapsToDevicePixels="True"
                                        CornerRadius="10">
                        <SelectiveScrollingGrid>
                            <SelectiveScrollingGrid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </SelectiveScrollingGrid.ColumnDefinitions>
                            <SelectiveScrollingGrid.RowDefinitions>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="Auto"/>
                            </SelectiveScrollingGrid.RowDefinitions>
                            <DataGridCellsPresenter Grid.Column="1" ItemsPanel="{TemplateBinding ItemsPanel}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                            <DataGridDetailsPresenter Grid.Column="1" Grid.Row="1" SelectiveScrollingGrid.SelectiveScrollingOrientation="{Binding AreRowDetailsFrozen, ConverterParameter={x:Static SelectiveScrollingOrientation.Vertical}, Converter={x:Static DataGrid.RowDetailsScrollingConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" Visibility="{TemplateBinding DetailsVisibility}"/>
                            <DataGridRowHeader Grid.RowSpan="2" SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" Visibility="{Binding HeadersVisibility, ConverterParameter={x:Static DataGridHeadersVisibility.Row}, Converter={x:Static DataGrid.HeadersVisibilityConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"/>
                        </SelectiveScrollingGrid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</DataGrid.RowStyle>

You will have to edit the template according to your requirements. This may also involve the style/template for the DataGridCell elements.