Question

I am trying to add some styles in some DataGrids I have.

I am currently working on an application designed to show huge amounts of financial data (matrices of numbers) with many visual tools to detect good data, wrong data… and correct them if needed, by comparing them to a target value

For now, I have a color-code which is basically:

• White background: the current value is fine
• Red background: the current value is under the target value!
• Green background: the current value is above the target value!

And I play with transparency to set the background clear if kinda close to the good value, strong otherwise.

Now I’d like to add another visual tool: some sort of visual pattern, to notify the user that this value, while being correct or wrong, presents a potential risk (as I said earlier it is financial data, so it’s mostly measuring money-loss risks).

The current application, programmed in VBA, uses a trick that adds an empty comment to a cell so a small red triangle will appear on corner.

I’d like to find a way to add it to my XAML style, the nicest thing I came up with was to add a visual pattern.

Here is an example on what I’m trying to achieve:

On the left column, you can see “normal display”.
On the right one, I added the “danger-styles”, which are supposed to mean “warning, there is something wrong with this value”.
The first line shows the old way of doing it on Excel: with a fake comment, which adds a red triangle on the top-right corner.

Would you have any idea on how to achieve that? Would an Adorner do the trick?

By the way, the grid is editable so I obviously don’t want to loose the editable aspect, so that makes me doubt of a possible Adorner…

Here is the current XAML Style, which is applied as a 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>

Any idea here?

Thanks a lot!

Answer 1

Okay, I found a very proper way to do it, using a 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>

Basically you’d draw a red Rectangle (you can change the color of course) which will fill the cell, so act as a background, and also draw above 5 diagonal lines.
You can change the numer online by switching the x number here: Viewport="0,0,x,1". In my case it is 0.20 which means 20% of the total surface, eg the Geometry will be drawn five times, each one occupying 20% of the available width.

Use this brush as a background for any DataGridCell , and you’ll get the following result:

Which is almost exactly what I wanted (and renders a bit better than the GradientBrush idea from dex3703 )