Stripe Maker is a design tool to create the tile visuals for striped background. It enables the user to try and see the elements of visuals for stripes with interactive live preview.

(Microsoft Store version)

• Windows 10 or newer
• .NET Framework 4.8

💾 Latest release

The visuals for stripes can be defined by 3 elements:

• Offset from the origin (left-top corner) to cross line in the middle
• Width of tile
• Height of tile

You can adjust the offset (top slider), width (bottom slider) and height (left slider) to change the angle, thickness and distance of stripes. The change will be instantly reflected to preview area. In Microsoft Store version, you can change and swap colors, and change direction.

Once you get a satisfactory combination of elements, you can copy its path data usable for XAML and SVG. Let's say you want to fill an area of 300x240 with rotationally symmetric stripes and adjust elements as shown below.

The path data would be something like below.

M 0,0 L 65.88,79.76 L 65.88,36.55 L 35.69,0 z M 0,79.76 L 35.69,79.76 L 0,36.55 z

This is in Path Markup Syntax for XAML and it works for SVG as well.

You can use this data for VisualBrush to fill the background of a window. Set this data to Data property of Path for VisualBrush's Visual property and make the width and height of VisualBrush's Viewport property to match those of this data.

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" SizeToContent="WidthAndHeight">
    <Grid Width="300" Height="240">
        <Grid.Background>
            <VisualBrush TileMode="Tile" Stretch="Fill"
                         Viewport="0,0,65.88,79.76" ViewportUnits="Absolute">
                <VisualBrush.Visual>
                    <Path Data="M 0,0 L 65.88,79.76 L 65.88,36.55 L 35.69,0 z M 0,79.76 L 35.69,79.76 L 0,36.55 z"
                          Fill="SkyBlue"/>
                </VisualBrush.Visual>
            </VisualBrush>
        </Grid.Background>
    </Grid>
</Window>

Then this window will look like as follows:

You can use this data for pattern to fill rect.

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="stripe"
             width="65.88" height="79.76" patternUnits="userSpaceOnUse">
      <path d="M 0,0 L 65.88,79.76 L 65.88,36.55 L 35.69,0 z M 0,79.76 L 35.69,79.76 L 0,36.55 z"
            fill="skyblue"/>
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#stripe)"/>
</svg>

This SVG will produce the same background as shown above.

FYI, each pair of numbers delimited by a comma (In fact, it can be a space.) represents (x,y) coordinates and this data draws two simple shapes as described below.

Additionally, in Microsoft Store version, you can save the tile image to a file in PNG format.

v1.2 2023-1-8

• Enable to change direction

v1.1 2022-3-27

• Enable to directly change angle

v1.0 2022-2-20

• Initial release

• MIT License

• XamlBehaviors for WPF
• PixiEditor ColorPicker

• emoacht (emotom[atmark]pobox.com)