CODEWITHSUNDEEP
c#wpfxamleffects
user2003551
user2003551

Reputation:

Line Effect in WPF

I'm using WPF. Is there any way to get an effect like this one:

enter image description here

LineEffect

So basically a gradient with multiple lines on top. The number lines should increase based on the width/height of the element.

Upvotes: 3

Views: 1268

Answers (3)

Aleksandar Toplek
Aleksandar Toplek

Reputation: 2821

I would use two layers, first rect is background and second is that are overlapping

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

You could eventually change brush to contain two lines instead of one to get rid of spacing when zoomed-in. The solution would 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>

In this way we don't need those ugly approximated numbers.

Upvotes: 4

Shlomo
Shlomo

Reputation: 14350

Working off of Aleksander's solution. It fixes up the flaws that the lines look like a line of sausages if you zoom in on 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>

Upvotes: 1

Jerry
Jerry

Reputation: 6557

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

Upvotes: 0

Related Questions