CODEWITHSUNDEEP
wpf
Jamie Nordmeyer
Jamie Nordmeyer

Reputation: 157

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

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>

Upvotes: 9

Views: 8014

Answers (3)

Chris Zahrobsky
Chris Zahrobsky

Reputation: 31

  • 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>

Upvotes: 2

C&#233;dric Bignon
C&#233;dric Bignon

Reputation: 13022

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>

Upvotes: 27

Jamie Nordmeyer
Jamie Nordmeyer

Reputation: 157

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.

Upvotes: 1

Related Questions