Draw symmetric compound lines in WPF and C#

[symmetric compound lines]

I’ve often said that WPF’s unofficial slogan should be, “Twice as flexible and only 10 times as hard.” Drawing compound lines is one of the few places where WPF isn’t twice as flexible. A compound line is one that is striped lengthwise as shown in the picture on the right. This is relatively easy to do in Windows Forms but practically impossible in WPF.


[symmetric compound lines]
The one exception is the one shown here where you want to draw symmetric compound lines. In other words, the amounts of blue and white in the lines are symmetric with respect to the center of the lines. Figure 1 shows a cross section of this example’s lines. You can see from the figure that each part on one side of the line has a corresponding part on the other.


[symmetric compound lines]
The trick in this example is to build up the line with a sequence of lines of different thicknesses all centered over the original line. The bottom of Figure 2 shows the sequence of lines for this example. The program starts with a thick blue line, places a thinner white line over that one, then the places an even thinner blue line on top. The result is the striped line shown at the top of the post.

The following code shows how the program produces the striped star.

// Draw the star.
private void Window_Loaded(object sender, RoutedEventArgs e)
{
    // Make the star points.
    double wid = Math.Min(
        grdMain.ActualWidth - 60,
        grdMain.ActualHeight - 40);
    Rect rect = new Rect(30, 40, wid, wid);
    Point[] points = MakeStarPoints(-Math.PI / 2, 5, 2, rect);

    // Polygon stroke thicknesses and colors.
    double[] thicknesses = { 15, 10, 6 };
    Brush[] brushes = { Brushes.Blue, Brushes.White, Brushes.Blue };

    // Create polygons.
    for (int i = 0; i < thicknesses.Length; i++)
    {
        // Make a polygon with thickness i and color i.
        Polygon polygon = new Polygon();
        polygon.Points = new PointCollection(points);
        polygon.StrokeThickness = thicknesses[i];
        polygon.Stroke = brushes[i];
        grdMain.Children.Add(polygon);
    }
}

The code starts by calculating a good width for the star so it will fill the window nicely. It makes a Rect to indicate where the star should be placed and then calls MakeStarPoints to generate the points that make up the star. For a description of the MakeStarPoints method, see the post Draw a star with a given number of points in C#.

Next the code defines two arrays holding the thicknesses and brushes for the layered lines. In this example, the bottom blue line has thickness 15, the white line has thickness 10, and the top blue line has thickness 6.

The code loops through the thicknesses and brushes. For each thickness/brush pair, it creates a new Polygon object, initializes it to use the generated star points, sets the polygon’s StrokeThickness and Stroke properties, and adds the Polygon to the program’s main Grid control.

Drawing more general non-symmetric compound lines in WPF is much harder, but it can be done with enough hard work. In my next couple of posts I’ll describe one method.


Download Example   Follow me on Twitter   RSS feed   Donate




About RodStephens

Rod Stephens is a software consultant and author who has written more than 30 books and 250 magazine articles covering C#, Visual Basic, Visual Basic for Applications, Delphi, and Java.
This entry was posted in algorithms, drawing, graphics and tagged , , , , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *