How do I create repeating diagonal lines as a background in WPF? - wpf

Question

OK, I've wracked my brain, Google, and stackoverflow trying to figure this out, but just can't quite get it. I'm trying to use a DrawingBrush with a DrawingGroup to do two things to the background of my WPF application (latest version). One, I want to have a RadialGradientBrush to put a subtle gradient in my background. This part is working just fine. The second part that I'm trying to accomplish is that I want to also have repeating diagonal lines as part of that background. I know I could do it with an image, but would rather use geometries, as I'm trying to learn and master WPF. Here's what I have so far. The radial appears fine, but the lines do not. Any help would be appreciated.
<Style x:Key="WindowBackground" TargetType="Grid">
<Setter Property="Background">
<Setter.Value>
<DrawingBrush>
<DrawingBrush.Drawing>
<DrawingGroup>
<GeometryDrawing>
<GeometryDrawing.Brush>
<RadialGradientBrush GradientOrigin="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
<GradientStop Color="#EE9D40" Offset="0"/>
<GradientStop Color="#BF8230" Offset="1"/>
</RadialGradientBrush>
</GeometryDrawing.Brush>
<GeometryDrawing.Geometry>
<RectangleGeometry Rect="0,0,1,1"/>
</GeometryDrawing.Geometry>
</GeometryDrawing>
<GeometryDrawing>
<GeometryDrawing.Brush>
<DrawingBrush TileMode="Tile" Stretch="None" Viewbox="0,0,1,1" Viewport="0,0,25,25" ViewportUnits="Absolute">
<DrawingBrush.RelativeTransform>
<TranslateTransform X="0" Y="0" />
</DrawingBrush.RelativeTransform>
<DrawingBrush.Drawing>
<GeometryDrawing Brush="#20FFFFFF" Geometry="M10,0 22,0 12,25 0,22 Z" />
</DrawingBrush.Drawing>
</DrawingBrush>
</GeometryDrawing.Brush>
<GeometryDrawing.Geometry>
<RectangleGeometry Rect="0,0,1,1"/>
</GeometryDrawing.Geometry>
</GeometryDrawing>
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
</Setter.Value>
</Setter>
</Style>

Answer 1

This trick should work.
<LinearGradientBrush EndPoint="0,0" StartPoint="8,8"
MappingMode="Absolute" SpreadMethod="Repeat">
<GradientStop Color="Black" Offset="0" />
<GradientStop Color="Black" Offset="0.1" />
<GradientStop Color="White" Offset="0.1" />
<GradientStop Color="White" Offset="1" />
</LinearGradientBrush>

Answer 2

Try rotating a horizontal line brush to avoid the corner gaps:
<VisualBrush TileMode="Tile"
Viewport="0,0,5,5" ViewportUnits="Absolute"
Viewbox="0,0,5,5" ViewboxUnits="Absolute">
<VisualBrush.Visual>
<Grid Background="White" Height="5">
<Path Stroke="Black" Data="M 0 3 l 8 0" />
</Grid>
</VisualBrush.Visual>
<VisualBrush.RelativeTransform>
<RotateTransform CenterX="0.5" CenterY="0.5" Angle="45" />
</VisualBrush.RelativeTransform>
</VisualBrush>

Answer 3

I finally got it working, but not with a single composite brush like I was wanting. I used the following styles:
<Style x:Key="WindowBackground" TargetType="Grid">
<Setter Property="Background">
<Setter.Value>
<RadialGradientBrush GradientOrigin="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
<GradientStop Color="#EAA659" Offset="0"/>
<GradientStop Color="#BF8230" Offset="1"/>
</RadialGradientBrush>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="HatchOverlay" TargetType="Rectangle">
<Setter Property="Fill">
<Setter.Value>
<VisualBrush Opacity=".1" TileMode="Tile" Viewport="0,0,10,20" ViewportUnits="Absolute">
<VisualBrush.Visual>
<Canvas>
<Path Stroke="#825821" Data="M 0 0 l 10 20" />
</Canvas>
</VisualBrush.Visual>
</VisualBrush>
</Setter.Value>
</Setter>
</Style>
Then, to enable it at run time, I added a rectangle as the first child of my grid, like so:
<Grid Style="{StaticResource WindowBackground}">
<Rectangle Style="{StaticResource HatchOverlay}"/>...
This gave me the effect that I was after. Thanks for your help; I'll up-vote each of you.