CODEWITHSUNDEEP
wpfxamlgradient
Tjaart
Tjaart

Reputation: 4129

Solid transparent line in WPF gradient

I am trying to draw a transparent line in a solid block using a gradient:

<Grid>
    <Border Margin="-102,-27,102,27">
        <Border.Background>
            <LinearGradientBrush EndPoint="517,160" StartPoint="0,160" MappingMode="Absolute">
                <GradientStop Color="#FF2DBCF2" Offset="0"/>
                <GradientStop Color="#FF2DBCF2" Offset="1"/>
                <GradientStop Color="#002DBCF2" Offset="0.0091" />
                <GradientStop Color="#FF2DBCF2" Offset="0.009"/>
                <GradientStop Color="#002DBCF2" Offset="0.015"/>

                <GradientStop Color="#FF2DBCF2" Offset="0.0151"/>

            </LinearGradientBrush>
        </Border.Background>
    </Border>
</Grid>

The problem is that on the edges of the gap in the solid colour block there is a faint fading effect which makes the edge slightly less than crisp. Is there a way to get rid of this faint fading? I just can't seem to find a way around it.

Gradient Zoomed in

Upvotes: 1

Views: 1162

Answers (2)

Clemens
Clemens

Reputation: 128076

You may use something like the following DrawingBrush for the background:

<Border Margin="-102,-27,102,27">
    <Border.Background>
        <DrawingBrush>
            <DrawingBrush.Drawing>
                <GeometryDrawing Brush="#FF2DBCF2">
                    <GeometryDrawing.Geometry>
                        <GeometryGroup>
                            <RectangleGeometry Rect="0,0,0.01,1"/>
                            <RectangleGeometry Rect="0.015,0,0.985,1"/>
                        </GeometryGroup>
                    </GeometryDrawing.Geometry>
                </GeometryDrawing>
            </DrawingBrush.Drawing>
        </DrawingBrush>
    </Border.Background>
</Border>

Upvotes: 2

Timothy Groote
Timothy Groote

Reputation: 8653

The only way to get a sharp line in the background is to use an ImageBrush or DrawingBrush as background instead of a LinearGradientBrush

I can't work out a complete example right now, but this should get you started on how to implement a DrawingBrush as background.

<Border.Background>
    <DrawingBrush TileMode="Tile" Stretch="None" Viewport="0,0,20,20" ViewportUnits="Absolute">
        <DrawingBrush.Drawing>
            <GeometryDrawing>
                <GeometryDrawing.Pen>
                    <Pen Brush="White"/>
                </GeometryDrawing.Pen>
                <GeometryDrawing.Geometry>
                    <LineGeometry StartPoint="0.3,0"
                                  EndPoint="0.3,20"/>
                </GeometryDrawing.Geometry>
            </GeometryDrawing>
        </DrawingBrush.Drawing>
    </DrawingBrush>
<Border.Background>

Upvotes: 1

Related Questions