Clever Geek Handbook

Line effect in WPF

I am using WPF. Is there a way to get an effect like this:

enter image description here

LineEffect

So basically a gradient with a few lines on top. Numeric lines should grow based on the element's width / height.

+3


source to share


3 answers


I would use two layers, the first rectangle is the background and the second is the overlap

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

In response to @Shlomo



Ultimately you can change the brush to two lines instead of one to get rid of the spacing as you zoom in. The solution will look something like this:

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

This way we don't need those ugly approximated numbers.

+4


source


Working out Alexander's solution. It captures the imperfections that the lines look like a line of sausages if you enlarge them.



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


source


Here's an example that should work for you.

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


source






More articles:


All Articles