How to draw a two color line in Silverlight

Scenario

I wanted 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 is between 0 and 1. Toolkit designers though have provided us developers 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 these 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.

The key to remember is gradient stops come in handy while specifying any color.

I don't currently have a publicly accessible Windows Sserver 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 a 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 element. 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"
        Background="White">
    <Line x:Name="testLine"
            X1="100"
            Y1="100"
            X2="400"
            Y2="100"
            StrokeThickness="20">
        <Line.Stroke>
            <LinearGradientBrush x:Name="testLGBrush"
                StartPoint="0.5,0"
                EndPoint="0.5,1">
                <GradientStop Color="Red" Offset="0.09"/>
                <GradientStop Color="Blue" Offset="0.11"/>
                <GradientStop Color="Blue" Offset="0.89"/>
                <GradientStop Color="Red" Offset="0.90"/>
            </LinearGradientBrush>
        </Line.Stroke>
        <Line.RenderTransform>
            <RotateTransform
                Angle="{Binding ElementName=testLineRotate, Path=Value}"
                CenterX="250" CenterY="100">
            </RotateTransform>
        </Line.RenderTransform>
    </Line>
    <Slider x:Name="testLineRotate"
            Maximum="180"
            Minimum="0"
            Value="0"
            Width="120"/>
</Grid>

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;
testGrid.Children.Add(myLine2);