如何在WPF中创建重复的对角线作为背景？

Question

好的，我已经想尽办法在Google和stackoverflow上寻找答案，但是仍然无法完全弄清楚。我正在尝试使用DrawingGroup的DrawingBrush来完成对WPF应用程序（最新版本）背景的两个操作。一、我想使用RadialGradientBrush在我的背景中添加一个微妙的渐变。这部分工作非常好。我试图实现的第二部分是，我还想将重复的对角线作为背景的一部分。我知道我可以使用图像来做到这一点，但我更愿意使用几何形状，因为我正在尝试学习和掌握WPF。以下是我目前的进展情况。放射状看起来很好，但线条不行。任何帮助将不胜感激。

<Style x:Key="WindowBackground" TargetType="Grid">
        <Setter Property="Background">
            <Setter.Value>
                <DrawingBrush>
                    <DrawingBrush.Drawing>
                        <DrawingGroup>
                            <GeometryDrawing>
                                <GeometryDrawing.Brush>
                                    <RadialGradientBrush GradientOrigin="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
                                        <GradientStop Color="#EE9D40" Offset="0"/>
                                        <GradientStop Color="#BF8230" Offset="1"/>
                                    </RadialGradientBrush>
                                </GeometryDrawing.Brush>
                                <GeometryDrawing.Geometry>
                                    <RectangleGeometry Rect="0,0,1,1"/>
                                </GeometryDrawing.Geometry>
                            </GeometryDrawing>
                            <GeometryDrawing>
                                <GeometryDrawing.Brush>
                                    <DrawingBrush TileMode="Tile" Stretch="None" Viewbox="0,0,1,1" Viewport="0,0,25,25" ViewportUnits="Absolute">
                                        <DrawingBrush.RelativeTransform>
                                            <TranslateTransform X="0" Y="0" />
                                        </DrawingBrush.RelativeTransform>
                                        <DrawingBrush.Drawing>
                                            <GeometryDrawing Brush="#20FFFFFF" Geometry="M10,0 22,0 12,25 0,22 Z" />
                                        </DrawingBrush.Drawing>
                                    </DrawingBrush>
                                </GeometryDrawing.Brush>
                                <GeometryDrawing.Geometry>
                                    <RectangleGeometry Rect="0,0,1,1"/>
                                </GeometryDrawing.Geometry>
                            </GeometryDrawing>
                        </DrawingGroup>
                    </DrawingBrush.Drawing>
                </DrawingBrush>
            </Setter.Value>
        </Setter>
    </Style>

- Jamie Nordmeyer

---

请查看我在这里的回答（https://dev59.com/Gmw15IYBdhLWcg3wu-I9#6434964）。我们在那里绘制了一个网格，但您可以应用相同的概念。 - Jeff Mercado

它对我来说不太好用，但我看出你的意图，所以我正在努力解决它。谢谢回复！你也是，塞德里克。我会告诉你的。 - Jamie Nordmeyer

Answer 1

这个技巧应该有效。

<LinearGradientBrush EndPoint="0,0" StartPoint="8,8" 
                     MappingMode="Absolute" SpreadMethod="Repeat">
    <GradientStop Color="Black" Offset="0" />
    <GradientStop Color="Black" Offset="0.1" />
    <GradientStop Color="White" Offset="0.1" />
    <GradientStop Color="White" Offset="1" />
</LinearGradientBrush>

- Cédric Bignon

---

值得一提的是，如果你想要更宽的条纹（就像我一样），只需增加两个“0.1”偏移值。例如，“0.5”将给您等宽的交替条纹。 - Andrew Stephens

Answer 2

• Try rotating a horizontal line brush to avoid the corner gaps:

  <VisualBrush TileMode="Tile" 
   Viewport="0,0,5,5" ViewportUnits="Absolute" 
   Viewbox="0,0,5,5"  ViewboxUnits="Absolute">
   <VisualBrush.Visual>
      <Grid Background="White" Height="5">
          <Path Stroke="Black" Data="M 0 3 l 8 0" />
      </Grid>
   </VisualBrush.Visual>
   <VisualBrush.RelativeTransform>
       <RotateTransform CenterX="0.5" CenterY="0.5" Angle="45" />
   </VisualBrush.RelativeTransform>
  </VisualBrush>
  

- Chris Zahrobsky

Answer 3

我终于让它能够工作了，但不是像我想要的那样使用单个复合画笔。我使用了以下样式：

<Style x:Key="WindowBackground" TargetType="Grid">
            <Setter Property="Background">
                <Setter.Value>
                    <RadialGradientBrush GradientOrigin="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
                        <GradientStop Color="#EAA659" Offset="0"/>
                        <GradientStop Color="#BF8230" Offset="1"/>
                    </RadialGradientBrush>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="HatchOverlay" TargetType="Rectangle">
            <Setter Property="Fill">
                <Setter.Value>
                    <VisualBrush Opacity=".1" TileMode="Tile" Viewport="0,0,10,20" ViewportUnits="Absolute">
                        <VisualBrush.Visual>
                            <Canvas>
                                <Path Stroke="#825821" Data="M 0 0 l 10 20" />
                            </Canvas>
                        </VisualBrush.Visual>
                    </VisualBrush>
                </Setter.Value>
            </Setter>
        </Style>

然后，在运行时启用它，我将一个矩形作为我的网格的第一个子元素添加，如下所示：

<Grid Style="{StaticResource WindowBackground}">
    <Rectangle Style="{StaticResource HatchOverlay}"/>...

这个使我达到了想要的效果。感谢您的帮助；我会为你们每个人点赞。

- Jamie Nordmeyer