wpf datagrid定制(边界,单元角等) [英] wpf datagrid customization (border, cell corners, etc.)
问题描述
我正在尝试在xaml中设置wpf数据网格的样式,以使其看起来像此图像。那可能吗?
我尝试了很多事情,但仍然存在以下问题:
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:
- 单元格边框属性仅影响选定的单元格。否则,我只有1px的细线,可以通过VerticalGridLinesBrush着色
- 如果我在datagrid.cell级别上指定了背景色,它将覆盖所选内容
- 我不知道是否甚至可以在单元格级别上圆角化(也用于选择)
我非常感谢您提供的四个帮助。如果有帮助,我明天可以在这里进行几次尝试。
I'm grateful four any help. If it helps i can post a couple of tries here tomorrow.
编辑:
这是我生成datagrid的代码,您可以看到我尝试了背景和datagrid.cellstyle中的边距值,但是会导致上述问题:
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>
推荐答案
这应该使您入门:-
<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>
大部分操作是通过重新模板化 DataGridCell
。内边框创建圆角,而外边框确保圆角周围的空间中有黑色背景。
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.
我还添加了一个触发器设置所选单元格的背景色。 DataGrid配置为用于单单元格选择-看起来您的将是 Multiple。
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".
这篇关于wpf datagrid定制(边界,单元角等)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!