i'm trying to style a wpf datagrid in xaml to make it look like this image. Is that possible?
I tried numerous things, but i still have the following problems:
- Cell border property only affects selected cells. Otherwise i only have the 1px thin lines which can be coloured via VerticalGridLinesBrush
- If I specifiy a background color on datagrid.cell level it overlays the selection
- I have no idea if rounded edges on cell level (also for selections) is even possible
I'm grateful four any help. If it helps i can post a couple of tries here tomorrow.
Edit:
This is my code generating the datagrid, as you can see I experimented with background and margin values in datagrid.cellstyle, however it resulted in the above problems:
<DataGrid x:Name="Grid" Height="305" VerticalAlignment="Top" Width="505" BorderThickness="1"
AutoGenerateColumns="False" SelectionUnit="Cell" HeadersVisibility="None" ItemsSource="{Binding}"
CanUserSortColumns="False" CanUserResizeColumns="False" CanUserReorderColumns="False" CanUserResizeRows="False"
IsReadOnly="True" HorizontalAlignment="Left" BorderBrush="White" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Disabled"
ScrollViewer.CanContentScroll="False" MouseLeftButtonUp="ScreenGrid_MouseLeftButtonUp" Margin="10,10,0,0" Background="#FF000000"
VerticalGridLinesBrush="White" HorizontalGridLinesBrush="White" SelectedCellsChanged="ScreenGrid_SelectedCellsChanged" >
<DataGrid.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Blue"></SolidColorBrush>
<Style x:Key="DataGridRowStyleColoured" TargetType="{x:Type DataGridRow}">
<Setter Property="Background" Value="#FF000000" />
</Style>
</DataGrid.Resources>
<DataGrid.RowStyle>
<StaticResource ResourceKey="DataGridRowStyleColoured"/>
</DataGrid.RowStyle>
<DataGrid.CellStyle>
<Style TargetType="DataGridCell">
<Setter Property="BorderThickness" Value="0"/>
<!--<Setter Property="Margin" Value="5,5,5,5"/> -->
<!-- <Setter Property="Background" Value="White"/> -->
</Style>
</DataGrid.CellStyle>
</DataGrid>
Best Answer
This should get you started:-
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".