Create a hatch pattern in WPF

Question

I was able to create stripe patterns in WPF, but how can I create a pattern like this in XAML? Is there a default similar brush for this in WPF?

Chlorobenzene

Answer 1

You can do it in XAML using VisualBrush. You only need to specify Data values for the Path, for example:

XAML

<Window.Resources>
    <VisualBrush x:Key="MyVisualBrush" TileMode="Tile" Viewport="0,0,15,15" ViewportUnits="Absolute" Viewbox="0,0,15,15" ViewboxUnits="Absolute">
        <VisualBrush.Visual>
            <Grid Background="Black">
                <Path Data="M 0 15 L 15 0" Stroke="Gray" />
                <Path Data="M 0 0 L 15 15" Stroke="Gray" />
            </Grid>
        </VisualBrush.Visual>
    </VisualBrush>
</Window.Resources>

<Grid Background="{StaticResource MyVisualBrush}">
    <Label Content="TEST" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>

Output

For converting Image to Vector graphics (Path) use Inkscape, which is free and very useful. For more information see this link:

Vectorize Bitmaps to XAML using Potrace and Inkscape

Edit

For better performance, you may Freeze() you Brushes with help of PresentationOptions like this:

<Window x:Class="MyNamespace.MainWindow"
        xmlns:PresentationOptions="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options" ...>

    <VisualBrush x:Key="MyVisualBrush" PresentationOptions:Freeze="True" ... />

Quote from MSDN:

When you no longer need to modify a freezable, freezing it provides performance benefits. If you were to freeze the brush in this example, the graphics system would no longer need to monitor it for changes. The graphics system can also make other optimizations, because it knows the brush won't change.

Rager

Thanks Anatoliy, how expensive is this? I'm going to use it on like 100 rectangles. – Chlorobenzene

@Chlorobenzene Make it a template and re-use it that way instead of individually for each instance. – Parrakeet

@Vahid: I think you should first of all to try to do this in the benefit of XAML not be much time. In principle, WPF is optimized to work with vector graphics, so you can freeze your VisualBrush with help of PresentationOptions, like this: PresentationOptions:Freeze="True". For more info see this link. – Rager

Thanks a lot. I think I got my answer and lots of stuff to read for the night. – Chlorobenzene

Answer 2

Here's another approach, for a different style of hatching:

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:po="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
  Background="Black">

  <Page.Resources>

    <VisualBrush x:Key="HatchBrush" TileMode="Tile"
                 Viewport="0,0,5,5" ViewportUnits="Absolute"
                 Viewbox="0,0,5,5" ViewboxUnits="Absolute"
                 po:Freeze="True">
      <VisualBrush.Visual>
        <Path Data="M 0 5 L 5 0 M -2 2 L 2 -2 M 3 7 L 7 3"
              Stroke="#80ffffff" StrokeEndLineCap="Square"
              RenderOptions.EdgeMode="Aliased" />
      </VisualBrush.Visual>
    </VisualBrush>

  </Page.Resources>

  <Grid Background="{StaticResource HatchBrush}" />

</Page>

Arianearianie

I think Data="M 0 5 L 5 0" is all thats needed to produce the above pattern. – Ping

@Ping that will produce more space between lines. I don't remember why I used three lines within the square. You might achieve the same result with a single line and reduced viewport/box (e.g. 3x3 rather than 5x5). – Arianearianie

The three line method is better. It creates the effect of a single line across the corners of the tiles. Otherwise you can see the corners of tiles without the line biting into line. In my case the UI elements are in ViewBox. If I enlarge the Window, I see the effect clearly, as the ViewBox scales the UI elements. – Vizzone