How to draw a two color line in Silverlight


I (or You) want to draw two line segments with a fill color inside them, where the line segments are one color, and the fill is another.

My observation:

It took me some time to understand the LinearGradientBrush in Silverlight. It is a brush that is well suited to help with the above scenario. Here’s how I accomplished this.

According to the silverlight documentation, a line shape cannot have a fill, period. However, a line can have a stroke thickness and using the lineargradientbrush you can realize the above requirement. This is one way I created the line, but it might not be the only way.

LinearGradientBrush in this situation by default adds a gradient axis along the top left and bottom right points. Regardless of the length or width of the line, the range of values for describing these points are between 0 and 1. Toolkit designers though have provided you the developer the ability to change that axis.

Another interesting property of LinearGradientBrush is its collection of GradientStops. GradientStops usually contain double values between 0.00 and 1.00 for their offset and you have the ability to assign these stops a unique color. Using thes stops, you typically would tell the plugin to draw a spectrum of colors on your axis between the offsets. So by extension if two gradientstops have the same color, that’ll pretty much invalidate the spectrum part and result in a solid fill color. In my code, that would be between GradientStops 0.11 to 0.89

Key to remember is the gradient stops that come in handy while specifying any color.

I don’t currently have a publicly accessible windows server or else I could have shown you what the line looks like.

Silverlight is really neat in that it allows you to bind data from one visual control to another. So I went ahead and added little slider that contains values 0 through 180 using which you can rotate the line shape around to see how the plugin renders it.

The Silverlight toolkit has all the tools you need to draw any type of visual elements. I felt there was a need to present a simple example like this one to complement the out of the box demonstrations provided by Microsoft.



<Grid x:Name="testGrid"
    <Line x:Name="testLine"

            <LinearGradientBrush x:Name="testLGBrush"
                <GradientStop Color="Red" Offset="0.09"/>
                <GradientStop Color="Blue" Offset="0.11"/>
                <GradientStop Color="Blue" Offset="0.89"/>
                <GradientStop Color="Red" Offset="0.90"/>
                Angle="{Binding ElementName=testLineRotate, Path=Value}"
                CenterX="250" CenterY="100">
    <Slider x:Name="testLineRotate"


Line testLine = new Line()
    X1 = 100,
    Y1 = 100,
    X2 = 400,
    Y2 = 100

myLine2.Name = "testLine";
myLine2.StrokeThickness = 20;
LinearGradientBrush lgb = new LinearGradientBrush(
    new GradientStopCollection() {
        new GradientStop() { Color = Colors.Red, Offset = 0.09d },
        new GradientStop() { Color = Colors.Blue, Offset = 0.11d },
        new GradientStop() { Color = Colors.Blue, Offset = 0.89d },
        new GradientStop() { Color = Colors.Red, Offset = 0.90d }
    GetAngle(startPoint, pt)
myLine2.Stroke = lgb;