【问题标题】:WPF DataGrid Alternating Column ColorsWPF DataGrid 交替列颜色
【发布时间】:2012-06-10 01:11:45
【问题描述】:

我正在尝试创建具有交替背景颜色的 WPF DataGrid。我目前正在使用 DataGridTemplateColumn 列并设置 CellStyle 背景颜色,但对此结果并不完全满意:

<DataGridTemplateColumn.CellStyle>
    <Style TargetType="DataGridCell">
        <Style.Triggers>
            <Trigger Property="IsSelected" Value="False">
                <Setter Property="Background" Value="#FFF7F7F7" />
            </Trigger>
        </Style.Triggers>
    </Style>
</DataGridTemplateColumn.CellStyle>

我正在对现有 WinForms 项目的 DataGrid 进行建模,并尝试复制它的外观。我面临两个问题:

  1. 不同的列背景附加到单元格,而不是网格本身的属性。因此未使用的行不显示这些背景。我什至想要一个空网格来显示列和背景。

  2. 列背景应延伸到透明的扩展器标题下方。我相信如果满足(1),这也会起作用。

这些目标可以直接通过 DataGrid 实现吗?如果没有,什么变通方法可以解决问题;也许以某种方式直接在 DataGrids 面板 (DataGridRowsPresenter) 上绘制列背景并支持列调整大小?

有什么想法吗?谢谢!

注意:此问题类似且未回答: WPF Datagrid Template column edit event and alternating column color


更新:

此更新基于@LeslieDavies 提出的答案,这让我大部分时间都在那里。我对这个解决方案有两个问题:

  1. 我无法星号 DataGrid 列。如果我尝试设置星号,列会不断增长而不受限制。

  2. 如果我从 XAML 中删除 DataGrid.GroupStyle,调整大小将不再正常工作。矩形正确增长,但缩小列时,矩形缩小,但网格列没有正确缩小。

XAML:

<Window x:Class="GridColumnColors.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525" Background="Black">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Rectangle Name="Rect0" Grid.Column="0" HorizontalAlignment="Left" Margin="-1,0,0,0" Fill="#FFCACACA" />
        <Rectangle Name="Rect1" Grid.Column="1" HorizontalAlignment="Left" Margin="-1,0,0,0" Fill="White"/>
        <Rectangle Name="Rect2" Grid.Column="2" HorizontalAlignment="Left" Margin="-1,0,0,0" Fill="#FFCACACA"/>
        <DataGrid Name="DataGridStudents"  AutoGenerateColumns="False" Visibility="Visible" Grid.ColumnSpan="4" ItemsSource="{Binding StudentsCollectionView}"
                    SelectionMode="Extended" GridLinesVisibility="None" RowHeaderWidth="0"  RowBackground="Transparent"
                    CanUserResizeRows="False" IsReadOnly="True" Background="Transparent" LayoutUpdated="Students_LayoutUpdated">
            <DataGrid.GroupStyle>
                <GroupStyle>
                    <GroupStyle.ContainerStyle>
                        <Style TargetType="{x:Type GroupItem}">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="{x:Type GroupItem}">
                                        <Expander Header="{Binding}">
                                            <ItemsPresenter />
                                        </Expander>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </GroupStyle.ContainerStyle>
                </GroupStyle>
            </DataGrid.GroupStyle>
            <DataGrid.Columns>
                <DataGridTextColumn Header="First Name" MinWidth="100" Binding="{Binding FirstName}"/>
                <DataGridTextColumn Header="Last Name"  MinWidth="100" Binding="{Binding LastName}"/>
                <DataGridTextColumn Header="Age"        MinWidth="100" Binding="{Binding Age}"/>
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Window>

代码背后:

private void Students_LayoutUpdated(object sender, EventArgs e)
{
    Rect0.Width = DataGridStudents.Columns[0].ActualWidth+3;
    Rect1.Width = DataGridStudents.Columns[1].ActualWidth+0;
    Rect2.Width = DataGridStudents.Columns[2].ActualWidth+1;
}

【问题讨论】:

    标签: wpf xaml datagrid wpfdatagrid


    【解决方案1】:

    这不是一个优雅的解决方案,但它可以为您提供所需的视图。

    1. 使 DataGrid 的背景“透明”。
    2. 将 DataGrid 的 RowBackground 设为“透明”。
    3. 将 DataGrid 置于网格中。
    4. 在 Grid 中创建与 DataGrid 中的列一样多的 ColumnDefinition。
    5. 创建与列一样多的矩形。将它们放在每列的网格中。使他们的水平对齐“左”。用“填充”为它们着色。
    6. 对于 DataGrid,添加一个 LayoutChanged 事件。
    7. 在 LayoutChanged 事件的代码中,更新矩形的宽度。例如:

      rectangle.Width = dataGrid.Columns[0].Width.DesiredValue;

    8. 由于 DataGrid 样式,给第一个矩形的边距 (7,0,0,0)。

    【讨论】:

    • 谢谢你;这让我大部分时间都在那里。这个解决方案确实有几个问题,我在对原始问题的更新中详细说明了这些问题。如有任何反馈,我将不胜感激。
    • 我在网格中放置了一个 StackPanel 并将矩形放入该 StackPanel(方向 = 水平),它消除了 * 大小问题。我没有相同的 DataGrid.GroupStyle 问题。如果您仍然使用 StackPanel,请告诉我。
    • StackPanel 似乎没有直接帮助。单击扩展器后,列会不断增长。将 DataGrid 的 Width 绑定到 Windows 的 ActualWidth 会限制这种行为。但是,在此模式下,当初始窗口大小大于组合的列最小宽度时,列不会填充 (*)。如果窗口大小减小到列组合大小,然后重新展开,则列将填满。此外,最后一个行为不会发生(星号大小从一开始就起作用)组的扩展器被删除。 Expander 似乎会以某种方式影响初始布局。
    猜你喜欢
    • 1970-01-01
    • 2011-04-21
    • 2011-06-15
    • 1970-01-01
    • 1970-01-01
    • 2011-05-23
    • 2012-06-04
    • 1970-01-01
    • 2010-11-26
    相关资源
    最近更新 更多