WPF中的线条效果

Question

我正在使用WPF。是否有任何方法可以获得像这样的效果：

LineEffect

基本上是在渐变色的基础上添加了多条线。线条数量应该根据元素的宽度/高度增加。

- user2003551

---

如果这是你想要的答案，请标记一下。谢谢！ - Aleksandar Toplek

Answer 1

我建议使用两个图层，第一个是背景层，第二个与之重叠。

<!-- Background gradient -->
<Rectangle Width="200" Height="100">
    <Rectangle.Fill>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FF5B5B5B" Offset="0.008"/>
            <GradientStop Color="#FFA6A6A6" Offset="1"/>
        </LinearGradientBrush>
    </Rectangle.Fill>    
</Rectangle>

<!-- Lines layer -->
<Rectangle Width="200" Height="100">
    <Rectangle.Fill>
        <VisualBrush
                TileMode="Tile"
                Viewport="0,0,7,7"
                ViewportUnits="Absolute"
                Viewbox="0,0,7,7"
                ViewboxUnits="Absolute" >
            <VisualBrush.Visual>
                <Line X1="7" X2="0" Y1="0" Y2="7" Stroke="Gray" />
            </VisualBrush.Visual>
        </VisualBrush>
    </Rectangle.Fill>
</Rectangle>

回复@Shlomo

你可以将brush更改为包含两行而不是一行，以消除放大时的间距。 解决方案可能如下所示：

<VisualBrush.Visual>
    <Grid>
        <Line X1="10" X2="0" Y1="0" Y2="10" Stroke="Gray" />
        <Line X1="4" X2="-1" Y1="-1" Y2="4" Stroke="Gray" />
    </Grid>
</VisualBrush.Visual>

以这种方式，我们就不需要那些丑陋的近似数字了。

- Aleksandar Toplek

---

感谢 @Aleksandar-Toplek 和 @Shlomo 两位！这正是我在寻找的答案。 - user2003551

Answer 2

在 Aleksander 的解决方案基础上工作。它修复了线条在放大时看起来像香肠一样的缺陷。

<!-- Background gradient -->
<Rectangle Width="200" Height="100">
    <Rectangle.Fill>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FF5B5B5B" Offset="0.008"/>
            <GradientStop Color="#FFA6A6A6" Offset="1"/>
        </LinearGradientBrush>
    </Rectangle.Fill>    
</Rectangle>

<!-- Lines layer -->
<Rectangle Width="200" Height="100">
    <Rectangle.Fill>
        <VisualBrush
                TileMode="Tile"
                Viewport="0,0,10,10"
                ViewportUnits="Absolute"
                Viewbox="0,0,10,10"
                ViewboxUnits="Absolute" >
            <VisualBrush.Visual>
                <Grid>
                    <Line Fill="#777" X1="0" X2="10" Y1="10" Y2="0" Stroke="Gray" StrokeThickness="1" />
                    <Line Fill="#777" X1="0" X2="0.35355339059327376220042218105242" Y1="0" Y2="0.35355339059327376220042218105242" Stroke="Gray" />
                    <Line Fill="#777" X1="9.6464466094067262377995778189476" X2="10" Y1="9.6464466094067262377995778189476" Y2="10" Stroke="Gray" />
                </Grid>
            </VisualBrush.Visual>
        </VisualBrush>
    </Rectangle.Fill>
</Rectangle>

- Shlomo

---

我已经移除了那些丑陋的近似数字，现在请查看我的回复... 你是怎么得到那些数字的，暴力破解吗？ :D - Aleksandar Toplek

直角等腰三角形是由对角线和正方形视口的角落创建的。由于笔画粗细为1，两侧各为0.5，因此长度需要为根号（0.25 + 0.25）/ 2 => 0.35355... 另一个数字是10减去这个数。 - Shlomo

毋庸置疑，你的答案更加优雅。 - Shlomo

Answer 3

这里有一个例子，应该适合你的需求。

    <Rectangle Width="200" Height="100">
        <Rectangle.Fill>
            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                <GradientStop Color="Yellow" Offset="0.0" />
                <GradientStop Color="Red" Offset="0.25" />
                <GradientStop Color="Blue" Offset="0.75" />
                <GradientStop Color="LimeGreen" Offset="1.0" />
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>

- Jerry

---

我不是在寻找一个线性渐变。我更感兴趣的是在渐变之上的一条线。 - user2003551