Pattern Brushes in WPF

Question

I am struggling with creating various brushes to fill in various shapes or as a background. Here are some patterns I am struggling with creating:

1. <<<<>>>>
2. <|<|<|<|>|>|>|>
3. ////////
4. \\\\
5. ||||||||

I've been able to create the \\\, //////, and |||||| with a linear gradient, but the first two are causing me issues. BTW, the second one is a triangle.

Any suggestions or help would be greatly appreciated.

Answer 1

You need to use a TileBrush. Define the pattern of one tile with a Drawing or an image, and repeat it with a DrawingBrush or ImageBrush. The documentation is quite extensive on this subject, the examples should give you some ideas

Answer 2

You can create composite gradients using a drawing brush. For example, here is a diamond gradient that you can paste into a window for testing:

<Window.Background>
    <DrawingBrush>
        <DrawingBrush.Drawing>
            <DrawingGroup>
                <DrawingGroup.Children>
                    <GeometryDrawing>
                        <GeometryDrawing.Geometry>
                            <RectangleGeometry Rect="0,0,100,100"/>
                        </GeometryDrawing.Geometry>
                        <GeometryDrawing.Brush>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                                <GradientStop Offset="0.0" Color="Black" />
                                <GradientStop Offset="1.0" Color="White" />
                            </LinearGradientBrush>
                        </GeometryDrawing.Brush>
                    </GeometryDrawing>
                    <GeometryDrawing>
                        <GeometryDrawing.Geometry>
                            <RectangleGeometry Rect="100,0,100,100"/>
                        </GeometryDrawing.Geometry>
                        <GeometryDrawing.Brush>
                            <LinearGradientBrush StartPoint="1,0" EndPoint="0,1">
                                <GradientStop Offset="0.0" Color="Black" />
                                <GradientStop Offset="1.0" Color="White" />
                            </LinearGradientBrush>
                        </GeometryDrawing.Brush>
                    </GeometryDrawing>
                    <GeometryDrawing>
                        <GeometryDrawing.Geometry>
                            <RectangleGeometry Rect="0,100,100,100"/>
                        </GeometryDrawing.Geometry>
                        <GeometryDrawing.Brush>
                            <LinearGradientBrush StartPoint="0,1" EndPoint="1,0">
                                <GradientStop Offset="0.0" Color="Black" />
                                <GradientStop Offset="1.0" Color="White" />
                            </LinearGradientBrush>
                        </GeometryDrawing.Brush>
                    </GeometryDrawing>
                    <GeometryDrawing>
                        <GeometryDrawing.Geometry>
                            <RectangleGeometry Rect="100,100,100,100"/>
                        </GeometryDrawing.Geometry>
                        <GeometryDrawing.Brush>
                            <LinearGradientBrush StartPoint="1,1" EndPoint="0,0">
                                <GradientStop Offset="0.0" Color="Black" />
                                <GradientStop Offset="1.0" Color="White" />
                            </LinearGradientBrush>
                        </GeometryDrawing.Brush>
                    </GeometryDrawing>
                </DrawingGroup.Children>
            </DrawingGroup>
        </DrawingBrush.Drawing>
    </DrawingBrush>
</Window.Background>

ASCII graphics aren't expressive enough but maybe this is what you meant by <<<>>>: