WPF datagrid 半透明选定单元格（如 Excel）答案

【问题标题】：WPF datagrid semi-transparent selected cells (like Excel)WPF datagrid 半透明选定单元格（如 Excel）
【发布时间】：2023-04-08 08:14:01
【问题描述】：

在 Excel 中，蓝色的背景选择颜色看起来是半透明的，因此即使选择了单元格，用户仍然可以看到真实的背景颜色。使用 WPF 数据网格如何实现相同的效果？

在我的特殊情况下，单元格的Background 颜色也绑定到视图模型。我最初的印象是在单元格样式中使用触发器：

  <Style.Triggers>
      <Trigger Property="IsSelected" Value="True">
            <Setter Property="Background" Value="????"></Setter>
      </Trigger>
  </Style.Triggers>

那么Value 应该以某种方式计算为...蓝色和未选择的Background 颜色的某种组合？我尝试使用透明蓝色的画笔，结果与之前的单元格背景颜色不融合。

【问题讨论】：

要求代码的问题必须表明对所解决问题的最低理解。包括尝试过的解决方案、它们为什么不起作用以及预期的结果。
添加了尝试的解决方案

标签： wpf datagrid selection

【解决方案1】：

你尝试过的应该确实有效。

看这个例子：

<Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource SampleDataSource}}">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="10*"/>
    </Grid.RowDefinitions>
    <Rectangle Fill="#FF0090FF"/>
    <DataGrid Grid.Row="1" ItemsSource="{Binding TestCollection}" Background="Purple">
        <DataGrid.Resources>
            <Style TargetType="DataGridRow">
                <Setter Property="Background" Value="Yellow"/>
            </Style>
            <Style TargetType="DataGridCell">
                <Style.Triggers>
                    <Trigger Property="IsSelected" Value="true">
                        <Setter Property="Background" Value="#6F0090FF"/>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </DataGrid.Resources>
    </DataGrid>
</Grid>

有蓝色矩形。将Fill 属性设置为#FF0090FF。您应该注意的是，您所称的"UnSelected Background color" 实际上是Background 的DataGridRow。

现在...所选单元格的背景颜色与该矩形的Fill (#0090FF) 完全相同。我只将Alpha 更改为大约 50%（#6F0090FF）。你所看到的就是你所期望的绿色。

更新

当您想保留Background 或DataGridCell 时，您必须选择不同的方法。我建议在您的DataGridCell's ControlTemplate 中再创建一层

这个层...我们可以称之为例如 "selectedCellVisual" 只有当单元格被选中时才可见。

所以...我们必须创建ControlTemplate，因此我们必须更改前面示例中DataGridCell 的样式。

<Style TargetType="DataGridCell" >
                <Setter Property="OverridesDefaultStyle" Value="True"/>
                <Setter Property="Background" Value="Red"/>
                <Setter Property="BorderBrush" Value="Transparent"/>
                <Setter Property="BorderThickness" Value="0"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type DataGridCell}">
                            <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                                <Grid>
                                    <Rectangle x:Name="selectedCellVisual" Fill="#6F0090FF" Visibility="Collapsed"/>
                                    <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                                </Grid>
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsSelected" Value="true">
                                    <Setter TargetName="selectedCellVisual" Property="Visibility" Value="Visible"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

现在DataGridCell 有红色Background，当它被选中时，半透明的蓝色矩形“selectedCellVisual” 可见。背景上的透明蓝色和红色是最终的紫罗兰色。

你应该注意

<Setter Property="OverridesDefaultStyle" Value="True"/>

它必须在那里...因为我们没有更改 IsSelected 属性的触发器，该属性会更改单元格的背景。它以默认样式定义。它会更改 Background 和 Foreground 属性。您可以在第一个示例中注意到这一点。前景设置为白色，单元格周围有一像素宽的蓝线。

【讨论】：

所以您是说它与DataGridRow 的Background 混合...是否可以与每个DataGridCell 的Background 混合？这是我目前的困难，单元格有不同的背景，我希望即使它们被选中也能引起注意。
@Tekito 不！那不是我要说的。我只是说，当您将背景设置为半透明颜色时，它会设置为半透明颜色。好吧，当您将 datagridcell 的背景颜色从例如红色更改为半透明蓝色时...您不能指望您会看到紫色...仅仅是因为不再有红色。所以我会更新我的答案来涵盖这个。

【解决方案2】：

基于this 的回答，我找到了一个覆盖数据网格的系统颜色的解决方案，例如为系统突出显示颜色添加一些透明度，并在突出显示期间使用常规文本颜色：

    <DataGrid>

        <DataGrid.Resources>
            <SolidColorBrush 
                x:Key="{x:Static SystemColors.HighlightBrushKey}"
                Color="{DynamicResource {x:Static SystemColors.HighlightColorKey}}" 
                Opacity="0.2"/>
            <SolidColorBrush 
                x:Key="{x:Static SystemColors.HighlightTextBrushKey}" 
                Color="{DynamicResource {x:Static SystemColors.WindowTextColorKey}}"/>
        </DataGrid.Resources>

    ...

【讨论】：