How to draw a two color line in Silverlight

Scenario:

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.

 

XAML:

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

C#:

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

Silverlight

I felt like writing up about silverlight as I’m using it at the moment.

Link-roll:

Silverlight is a pretty decent platform to write an application in. It’s proprietary I understand. But in the free software world, there are no plugin systems or development tools that compare.
At my latest project that I’m working on – a graphical tool within Silverlight, I started to study the runtime a bit and have to say that Microsoft has a defined methodology that they have developed keeping the future in mind.
Mostly to get going with Silverlight you need the following:
  • text editor (visual one like Visual Studio is better)
  • Silverlight plugin in the browser
  • Some sort of backend that you’ll be communicating with to store your information