c# - examples - wpf datagrid columns

Personalización de wpf datagrid(borde, esquinas de la celda, etc.)

Question

Estoy tratando de diseñar una cuadrícula de datos wpf en xaml para que se vea como esta imagen . ¿Es eso posible? Intenté muchas cosas, pero todavía tengo los siguientes problemas:

1. La propiedad del borde de la celda solo afecta las celdas seleccionadas. De lo contrario, solo tengo las líneas finas de 1px que se pueden colorear a través de VerticalGridLinesBrush
2. Si especifico un color de fondo en el nivel de celda de la cuadrícula de datos, se superpone a la selección
3. No tengo idea de si los bordes redondeados en el nivel de la celda (también para las selecciones) son posibles

Estoy agradecido a cuatro cualquier ayuda. Si ayuda, puedo publicar un par de intentos aquí mañana.

Editar: Este es mi código que genera la cuadrícula de datos, como puede ver, experimenté con valores de fondo y de margen en datagrid.cellstyle, sin embargo, resultó en los problemas anteriores:

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

Answer 1

Esto debería comenzar: -

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

La mayor parte se realiza al volver a confeccionar la DataGridCell . El borde interior crea las esquinas redondeadas, mientras que el borde exterior asegura que hay un fondo negro en el "espacio" alrededor de las esquinas redondeadas.

También agregué un disparador que establece el color de fondo de la celda seleccionada. El DataGrid está configurado para la selección de celda única: parece que el suyo será "Múltiple".