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
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.
StripeMaker-usage.mp4
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.
| Command | Description |
|---|---|
| M 0,0 | Start drawing a trapezoid from (0,0) |
| L 65.88,79.76 L 65.88,36.55 L 35.69,0 | Draw line to (65.88,79.76), to (65.88,36.55), to (35.69,0) |
| z | Close drawing |
| M 0,79.76 | Start drawing a triangle from (0,79.76) |
| L 35.69,79.76 L 0,36.55 | Draw line to (35.69,79.76), to (0,36.55) |
| z | Close drawing |
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
- emoacht (emotom[atmark]pobox.com)