wpf datagrid customization (border, cell corners, etc.) wpf datagrid customization (border, cell corners, etc.) wpf wpf

wpf datagrid customization (border, cell corners, etc.)


This should get you started:-

<Page  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">  <Page.Resources>      <Style x:Key="cellStyle" TargetType="DataGridCell">        <Setter Property="Padding" Value="0" />        <Setter Property="Margin" Value="2" />        <Setter Property="Background" Value="Black" />        <Setter Property="Template">          <Setter.Value>                <ControlTemplate TargetType="DataGridCell">                    <Border Background="Black" BorderThickness="0">                      <Border x:Name="border"                              BorderBrush="White"                              BorderThickness="2"                              Background="Black"                              CornerRadius="5">                          <ContentPresenter />                      </Border>                    </Border>                    <ControlTemplate.Triggers>                      <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsSelected}" Value="true">                        <Setter TargetName="border" Property="Background" Value="Orange"/>                      </DataTrigger>                    </ControlTemplate.Triggers>                </ControlTemplate>          </Setter.Value>        </Setter>      </Style>      <Style x:Key="rowStyle" TargetType="DataGridRow">        <Setter Property="Padding" Value="0" />        <Setter Property="Margin" Value="0" />        <Setter Property="BorderThickness" Value="0"/>        <Setter Property="Background" Value="Black" />      </Style>  <Grid>      <DataGrid HeadersVisibility="None" GridLinesVisibility="None" SelectionMode="Single" SelectionUnit="Cell" IsReadOnly="true"      RowStyle="{StaticResource rowStyle}" CellStyle="{StaticResource cellStyle}"       Background="Black" Foreground="White" ItemsSource="{Binding MyData}" />  </Grid></Page>

Most of it is done by re-templating the DataGridCell. The inner border creates the rounded corners, while the outer border ensures there is a black background in the "space" around the rounded corners.

I've also added a trigger that sets the selected cell's background colour. The DataGrid is configured for single-cell selection - it looks like yours will be "Multiple".