c# - WPF のライン効果

Question

私はWPFを使用しています。このような効果を得る方法はありますか:

LineEffect

つまり、基本的に複数の線が上にあるグラデーションです。行数は、要素の幅/高さに基づいて増加する必要があります。

Answer 1

私は2つのレイヤーを使用します。最初の長方形は背景で、2番目は重なり合っています

<!-- 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への返信

最終的には、ブラシを変更して 1 本ではなく 2 本の線を含むようにして、ズームインしたときに間隔を空けることができます。解決策は次のようになります。

<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>

このようにして、これらの醜い概数は必要ありません。

Answer 2

アレクサンダーのソリューションの作業。線を拡大すると、線がソーセージの線のように見えるという欠点が修正されます。

<!-- 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>