c# – 为DataGrid列提供不同的色调

我有一个 WPF DataGrid,我想要一些列有不同的颜色.

<DataGrid>
   <DataGrid.Columns>
      <DataGridTextColumn Header="Name" Binding="{Binding Name}" />

      <DataGridTemplateColumn Header="Weight">
         <DataGridTemplateColumn.CellTemplate>
            <DataTemplate>
               <TextBlock Text="{Binding Path=Weight}" />
            </DataTemplate>
         </DataGridTemplateColumn.CellTemplate>
         <DataGridTemplateColumn.CellEditingTemplate>
            <DataTemplate>
               <TextBox Text="{Binding Path=Weight}" />
            </DataTemplate>
         </DataGridTemplateColumn.CellEditingTemplate>
      </DataGridTemplateColumn>

      <DataGridTextColumn Header="Created At" Binding="{Binding CreatedAt}" />
   </DataGrid.Columns>
</DataGrid>

我发现有关设置背景的帖子,但我想要更顺利的东西.它应该适合鼠标悬停和选择动作和颜色相应但不同的色调.

我想使“默认”列,重要列和“只读”列的视觉差异.

像上面的东西不同颜色的列,但是如果选择行,则仍然会更改颜色.
但是怎么样

解决方法

一个解决方案是在自动生成列时设置适当的CellStyle.
在以下Xaml中,我为DataGridCell的默认状态提供了一种风格,它响应鼠标悬停,焦点,选择等.其他状态(例如只读,扩展,…)可以以相同的方式设置颜色稍有变化.

<Window.Resources>
    <Style x:Key='CellDefaultStyle' targettype="{x:Type DataGridCell}" >
        <Setter Property="Foreground" Value="Black" />
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        <Setter Property="VerticalContentAlignment" Value="Stretch" />
        <Setter Property="Cursor" Value="Arrow" />
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="Padding" Value="2 5 2 5" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate targettype="{x:Type DataGridCell}">
                    <Grid x:Name="Root" Background="{TemplateBinding Background}">
                        <Grid.ColumnDeFinitions>
                            <ColumnDeFinition Width="*" />
                            <ColumnDeFinition Width="Auto" />
                        </Grid.ColumnDeFinitions>
                        <Rectangle x:Name="RightGridLine" VerticalAlignment="Stretch" 
                                   Width="1" Grid.Column="1" />
                        <Rectangle HorizontalAlignment="Stretch" x:Name="FocusVisual" 
                                   VerticalAlignment="Stretch" IsHitTestVisible="false" 
                                   Opacity="0" Fill="Green" stroke="DarkGreen" 
                                   strokeThickness="1" Grid.Column="0" />
                        <Rectangle x:Name="BackgroundRectangle" Grid.Column="0" 
                                   Fill="LightSteelBlue" Opacity="0.25" />
                        <Rectangle x:Name="SelectedRectangle" Opacity="0" 
                                   Fill="Blue" Grid.Column="0"  />
                        <Rectangle x:Name="HoverRectangle" 
                                   Fill="LightBlue" Opacity="0" Grid.Column="0"  />
                        <ContentPresenter Grid.Column="0" Margin="{TemplateBinding Padding}" 
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
                                          Content="{TemplateBinding Content}" 
                                          ContentTemplate="{TemplateBinding ContentTemplate}" 
                                          Cursor="{TemplateBinding Cursor}"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter Property='Opacity' TargetName='FocusVisual' Value='0.8' />
                        </Trigger>
                        <Trigger Property="IsMouSEOver" Value="True">
                            <Trigger.Enteractions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" 
                                                                       Storyboard.TargetName="HoverRectangle" 
                                                                       Storyboard.TargetProperty="(UIElement.Opacity)">
                                            <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.Enteractions>
                            <Trigger.Exitactions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" 
                                                                       Storyboard.TargetName="HoverRectangle" 
                                                                       Storyboard.TargetProperty="(UIElement.Opacity)">
                                            <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.Exitactions>
                        </Trigger>
                        <Trigger Property="IsSelected" Value="True">
                            <Trigger.Enteractions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="SelectedRectangle" Storyboard.TargetProperty="(UIElement.Opacity)">
                                            <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.Enteractions>
                            <Trigger.Exitactions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="SelectedRectangle" Storyboard.TargetProperty="(UIElement.Opacity)">
                                            <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.Exitactions>
                        </Trigger>
                        <MultiTrigger >
                            <MultiTrigger.Conditions>
                                <Condition Property="IsMouSEOver" Value="True" />
                                <Condition Property="IsSelected" Value="True" />
                            </MultiTrigger.Conditions>
                            <MultiTrigger.Enteractions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="HoverRectangle" Storyboard.TargetProperty="(UIElement.Opacity)">
                                            <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.5" />
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="SelectedRectangle" Storyboard.TargetProperty="(UIElement.Opacity)">
                                            <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </BeginStoryboard>
                            </MultiTrigger.Enteractions>
                            <MultiTrigger.Exitactions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="HoverRectangle" Storyboard.TargetProperty="(UIElement.Opacity)">
                                            <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="SelectedRectangle" Storyboard.TargetProperty="(UIElement.Opacity)">
                                            <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </BeginStoryboard>
                            </MultiTrigger.Exitactions>
                        </MultiTrigger>
                        <MultiTrigger >
                            <MultiTrigger.Conditions>
                                <Condition Property="IsMouSEOver" Value="True" />
                                <Condition Property="IsSelected" Value="False" />
                            </MultiTrigger.Conditions>
                            <MultiTrigger.Enteractions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="HoverRectangle" Storyboard.TargetProperty="(UIElement.Opacity)">
                                            <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1" />
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="SelectedRectangle" Storyboard.TargetProperty="(UIElement.Opacity)">
                                            <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </BeginStoryboard>
                            </MultiTrigger.Enteractions>
                            <MultiTrigger.Exitactions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="HoverRectangle" Storyboard.TargetProperty="(UIElement.Opacity)">
                                            <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="SelectedRectangle" Storyboard.TargetProperty="(UIElement.Opacity)">
                                            <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </BeginStoryboard>
                            </MultiTrigger.Exitactions>
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="True" />
                                <Condition Property="IsFocused" Value="False" />
                            </MultiTrigger.Conditions>
                            <MultiTrigger.Enteractions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="SelectedRectangle" Storyboard.TargetProperty="(UIElement.Opacity)">
                                            <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.6" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </BeginStoryboard>
                            </MultiTrigger.Enteractions>
                            <MultiTrigger.Exitactions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="SelectedRectangle" Storyboard.TargetProperty="(UIElement.Opacity)">
                                            <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </BeginStoryboard>
                            </MultiTrigger.Exitactions>
                        </MultiTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="IsSelected" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=DataGridRow},Path=IsSelected,Mode=OneWayToSource,UpdateSourceTrigger=PropertyChanged}" />
    </Style>
    <Style x:Key='CellReadOnlyStyle' targettype="{x:Type DataGridCell}" >
         <based on CellDefaultStyle with some minor change in colors ...>
    </Style>
</Window.Resources>

这是一个具有自动列生成的DataGrid的示例.

<Window>
    <Grid>
        <DataGrid ItemsSource="{Binding MyItems}" 
                  AutoGeneratingColumn="DataGrid_AutoGeneratingColumn"/>
    </Grid>
</Window>

这就是列生成时如何为不同的状态选择样式：

private void DataGrid_AutoGeneratingColumn(object sender,DataGridAutoGeneratingColumnEventArgs e)
    {
        if (e.Column.IsReadOnly)
        {
            e.Column.CellStyle = (Style)Resources["CellReadOnlyStyle"];
        }
        else if (other states)
        {
            e.Column.CellStyle = (Style)Resources["CellOtherStyle"];
        }
        else
        {
            e.Column.CellStyle = (Style)Resources["CellDefaultStyle"];
        }
    }

更新：

如果AutoGeneratingColumns设置为False,由于DataGridTemplateColumn和DataGridBoundColumn(例如DataGridTextColumn)都具有CellStyle属性,因此可以手动设置每个列的适当样式：

<DataGrid ItemsSource="{Binding viewmodel.MyList}" 
              AutoGenerateColumns="False">
        <DataGrid.Columns>
            <DataGridTextColumn Header="Name" Binding="{Binding Name}" CellStyle="{StaticResource CellDefaultStyle}" />
            <DataGridTemplateColumn Header="Weight" 
                                    CellStyle="{StaticResource CellDefaultStyle}">
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Path=Weight}" />
                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
                <DataGridTemplateColumn.CellEditingTemplate>
                    <DataTemplate>
                        <TextBox Text="{Binding Path=Weight}" />
                    </DataTemplate>
                </DataGridTemplateColumn.CellEditingTemplate>
            </DataGridTemplateColumn>
            <DataGridTextColumn Header="Created At" Binding="{Binding CreatedAt}" CellStyle="{StaticResource CellReadOnlyStyle}"/>
        </DataGrid.Columns>
    </DataGrid>

此屏幕截图显示了样式完成后列的外观.