17

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?

enter image description here

Vahid
  • 5,144
  • 13
  • 70
  • 146

2 Answers2

30

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

enter image description here

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.

StillLearnin
  • 1,391
  • 15
  • 41
Anatoliy Nikolaev
  • 22,370
  • 15
  • 69
  • 68
  • Thanks Anatoliy, how expensive is this? I'm going to use it on like 100 rectangles. – Vahid Apr 07 '14 at 18:07
  • @Vahid Make it a template and re-use it that way instead of individually for each instance. – Chris W. Apr 07 '14 at 18:12
  • 1
    @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`](http://www.codeproject.com/Articles/22716/Graphic-in-XAML-and-WPF). – Anatoliy Nikolaev Apr 07 '14 at 18:17
  • Thanks a lot. I think I got my answer and lots of stuff to read for the night. – Vahid Apr 07 '14 at 18:22
9

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>
Drew Noakes
  • 300,895
  • 165
  • 679
  • 742
  • I think `Data="M 0 5 L 5 0"` is all thats needed to produce the above pattern. – maxp Jan 10 '19 at 15:13
  • @maxp 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). – Drew Noakes Jan 18 '19 at 14:00
  • 1
    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. – Phil Jollans Jun 28 '19 at 12:57