WPF DataGrid交替列颜色

时间:2012-06-06 01:24:55

标签: wpf xaml datagrid wpfdatagrid

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

Simplified Example WPF DataGrid with Alternating Column Colors

<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. 列背景应扩展到透明的Expander标头下。我相信,如果(1)得到满足,这也会有效。

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

    有什么想法吗?谢谢!

    注意:这个问题类似且没有答案: WPF Datagrid Template column edit event and alternating column color


    更新

    此更新基于@LeslieDavies的建议答案,它让我大部分都在那里。这个解决方案有两个问题:

    1. 我无法星号 DataGrid列。如果我尝试星号,那么这些列会不受限制地连续增长。

    2. 如果我从XAML中删除DataGrid.GroupStyle,则调整大小将无法正常工作。矩形正确生长,但缩小列时,Rectangle缩小但Grid列不能正确收缩。

    3. 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;
      }
      

      DataGrid With Alternating Column Colors Updated

1 个答案:

答案 0 :(得分:2)

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

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

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

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