在WPF中创建一个填充图案

Question

我能够在WPF中创建条纹图案，但是如何在XAML中创建这样的图案？WPF中是否有类似的默认画刷？

- Vahid

Answer 1

你可以使用 VisualBrush 在 XAML 中完成。你只需要为 Path 指定数据值，例如：

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>

输出

要将Image转换为矢量图形（Path），请使用免费且非常有用的Inkscape。有关更多信息，请参见此链接：

使用Potrace和Inkscape将位图矢量化为XAML

编辑

为了获得更好的性能，您可以通过PresentationOptions的帮助来Freeze()您的Brushes，就像这样：

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

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

来自MSDN的引用：

当你不再需要修改一个可冻结对象时，将其冻结可以提供性能上的好处。如果在这个示例中冻结了画刷，则图形系统将不再需要监视它是否发生变化。图形系统还可以进行其他优化，因为它知道画刷不会改变。

- Anatoliy Nikolaev

---

谢谢Anatoliy，这个多贵啊？我要在大约100个矩形上使用它。 - Vahid

@Vahid 把它变成一个模板并以这种方式重复使用，而不是为每个实例单独使用。 - Chris W.

@Vahid: 我认为你应该首先尝试以XAML的利益为主，而不是花费太多时间。原则上，WPF被优化为与矢量图形一起工作，因此可以使用PresentationOptions来冻结您的 VisualBrush，例如：PresentationOptions:Freeze="True"。有关更多信息，请参见此链接。 - Anatoliy Nikolaev

非常感谢。我想我已经得到了答案，还有很多东西可以在晚上阅读。 - Vahid

Answer 2

这里是另一种用不同方式进行填充的方法：

<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

---

我认为 Data="M 0 5 L 5 0" 就足以生成上述图案。 - maxp

@maxp 这将在行之间产生更多的空间。我不记得为什么在方框内使用了三行。你可以通过使用单行和缩小的视口/框（例如3x3而不是5x5）来实现相同的效果。 - Drew Noakes

三行方法更好。它在瓷砖的角落处创建了单一线条的效果。否则，您可以看到瓷砖的角落，而没有线条咬入线条。在我的情况下，UI元素位于ViewBox中。如果我放大窗口，我可以清楚地看到效果，因为ViewBox会缩放UI元素。 - Phil Jollans