C# · 12月 29, 2021

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> <Text@R_671_2419@ 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> <Text@R_671_2419@ Text=”{Binding Path=Weight}” /> </DataTemplate> </DataGridTemplateColumn.CellEditingTemplate> </DataGridTemplateColumn> <DataGridTextColumn Header=”Created At” Binding=”{Binding CreatedAt}” CellStyle=”{StaticResource CellReadOnlyStyle}”/> </DataGrid.Columns> </DataGrid>

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