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".