Question

How can I create a brush (DrawingBrush) for stripes as shown in the blog:

http://blog.pixelingene.com/2008/09/quick-tip-to-get-a-striped-background/

I can’t use it because it uses scale transform, which means if the UI element is small, the stripes are pretty much not visible or too close together.

I can’t use image brush because I need to bind the colors.

Answer 1

Creates downward 45 degree angle stripe pattern.
Alter viewport to change size of stripes

<DrawingBrush Stretch="UniformToFill" ViewportUnits="Absolute" Viewport="0,0,10,10" TileMode="Tile">
    <DrawingBrush.Drawing>
        <DrawingGroup>
            <DrawingGroup.Children>
                <GeometryDrawing Brush="Black">
                    <GeometryDrawing.Geometry>
                        <GeometryGroup FillRule="Nonzero">
                            <PathGeometry>
                                <PathFigure StartPoint="0,0">
                                    <LineSegment  Point="100,0"/>
                                    <LineSegment  Point="100,100"/>
                                    <LineSegment  Point="0,100"/>
                                </PathFigure>
                            </PathGeometry>
                        </GeometryGroup>
                    </GeometryDrawing.Geometry>
                </GeometryDrawing>
                <GeometryDrawing Brush="#FF404040">
                    <GeometryDrawing.Geometry>
                        <GeometryGroup FillRule="Nonzero">
                            <PathGeometry>
                                <PathFigure StartPoint="0,0">
                                    <LineSegment  Point="25,0"/>
                                    <LineSegment  Point="100,75"/>
                                    <LineSegment  Point="100,100"/>
                                    <LineSegment  Point="75,100"/>
                                    <LineSegment  Point="0,25"/>
                                    <LineSegment  Point="0,0"/>
                                </PathFigure>
                                <PathFigure StartPoint="75,0">
                                    <LineSegment  Point="100,25"/>
                                    <LineSegment  Point="100,0"/>
                                </PathFigure>
                                <PathFigure StartPoint="0,75">
                                    <LineSegment  Point="25,100"/>
                                    <LineSegment  Point="0,100"/>
                                </PathFigure>
                            </PathGeometry>
                        </GeometryGroup>
                    </GeometryDrawing.Geometry>
                </GeometryDrawing>
            </DrawingGroup.Children>
        </DrawingGroup>
    </DrawingBrush.Drawing>
</DrawingBrush>

Alternatively you could bind the scale transform to the height and width of the control using multibinding. Then with a converter, you alter the scale to the max of height or width, then the stripes will remain the same size.