DataGrid 样式 - 在背景中添加视觉模式

Question

我正在尝试在我拥有的一些DataGrids 中添加一些样式。

我目前正在开发一个应用程序，该应用程序旨在显示大量财务数据（数字矩阵），并使用许多可视化工具来检测好数据、错误数据......并在需要时通过将它们与目标值进行比较来纠正它们

现在，我有一个颜色代码，基本上是：

• 白色背景：当前值很好
• 红色背景：当前值低于目标值！
• 绿色背景：当前值高于目标值！

如果有点接近良好的价值，我会使用透明度来设置背景清晰，否则强烈。

现在我想添加另一个可视化工具：某种可视化模式，以通知用户此值是正确还是错误，但存在潜在风险（正如我之前所说，它是财务数据，所以它是主要衡量金钱损失风险）。

当前的应用程序是用 VBA 编写的，它使用了一种技巧，即在单元格中添加一个空注释，这样一角就会出现一个红色的小三角形。

我想找到一种方法将它添加到我的 XAML 样式中，我想出的最好的方法是添加视觉模式。

这是我想要达到的目标的示例：

在左栏中，您可以看到“正常显示”。 在右边，我添加了“danger-styles”，它的意思应该是“警告，这个值有问题”。 第一行显示了在 Excel 上执行此操作的旧方法：使用虚假注释，在右上角添加一个红色三角形。

您对如何实现这一目标有任何想法吗？ Adorner 能解决问题吗？

顺便说一句，网格是可编辑的，所以我显然不想放弃可编辑的方面，所以这让我怀疑可能Adorner...

这是当前的 XAML Style，它被应用为 CellStyle：

<Style x:Key="DynamicCellStyle" TargetType="{x:Type DataGridCell}">
    <Style.Triggers>
        <Trigger Property="IsSelected" Value="True">
            <Setter Property="Background" Value="#FF316AC5" />
        </Trigger>
        <Trigger Property="IsSelected" Value="False">
            <Setter Property="Background">
                <Setter.Value>
                    <MultiBinding Converter="{StaticResource CellToColorConverter}">
                        <!-- Some bindings for the converter to compute the actual color -->
                    </MultiBinding>
                </Setter.Value>
            </Setter>
        </Trigger>
    </Style.Triggers>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type DataGridCell}">
                <Grid Background="{TemplateBinding Background}">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>

    </Setter>

这里有什么想法吗？

非常感谢！

Answer 1

这对于某些人的口味来说可能有点老套，但作为一种解决方法，我做过的一件事是使用 VisualBrush 或 DrawingBrush 作为背景。您可以拥有一组带有红色、绿色、白色和橙色的视觉刷，并带有哈希线图案作为叠加层。您可以使用 DrawingBrushes 做同样的事情。

或者，大声思考，您可以使用绘图笔作为不透明蒙版覆盖您的颜色。这样你只需要一个带有哈希模式的刷子。

[查看我的 WPF 书籍后...]

最简单的可能是一个 LinearGradientBrush 与 SpreadMethod 设置为重复。使用起点和终点值来获得条带效果。这是书中的一个例子：

<LinearGradientBrush StartPoint=".45,.45" EndPoint=".55,.55" SpreadMethod="Repeat">
<GradientStop Offset="0" Color="Blue"/>
<GradientStop Offset="1" Color="Red"/>
</LinearGradientBrush>

Answer 2

好的，我找到了一个非常合适的方法，使用DrawingBrush

                                            <DrawingBrush TileMode="Tile"
                                                      ViewportUnits="RelativeToBoundingBox"
                                                      Viewport="0,0,0.20,1">
                                                <DrawingBrush.Drawing>
                                                    <DrawingGroup>
                                                        <GeometryDrawing>
                                                            <GeometryDrawing.Pen>
                                                                <Pen Brush="Red" Thickness="0.83"/>
                                                            </GeometryDrawing.Pen>
                                                            <GeometryDrawing.Geometry>
                                                                <RectangleGeometry Rect="0.3,0.4,0.3,0.21" RadiusX="0" RadiusY="0"/>
                                                            </GeometryDrawing.Geometry>
                                                        </GeometryDrawing>
                                                        <GeometryDrawing>
                                                            <GeometryDrawing.Pen>
                                                                <Pen Brush="Black" Thickness="0.05"/>
                                                            </GeometryDrawing.Pen>
                                                            <GeometryDrawing.Geometry>
                                                                <LineGeometry StartPoint="0,1" EndPoint="1,0" />
                                                            </GeometryDrawing.Geometry>
                                                        </GeometryDrawing>
                                                    </DrawingGroup>
                                                </DrawingBrush.Drawing>
                                            </DrawingBrush>

基本上你会画一个红色的矩形（当然你可以改变颜色），它会填充单元格，所以可以作为背景，并在 5 条对角线上方绘制。 您可以通过在此处切换 x 数字来在线更改数字：Viewport="0,0,x,1"。在我的例子中，它是0.20，这意味着20% 的总表面，例如Geometry 将被绘制五次，每一次占据可用宽度的 20%。

使用这个画笔作为任何DataGridCell的背景，你会得到如下结果：

这几乎正是我想要的（并且比来自 dex3703 的 GradientBrush 的想法好一点）