Blog
Using Line Joins with XAML
By Ken Getz | January 22, 2013
In a recent article we discussed line caps, which alter the way you can draw lines. XAML provides one more alteration- line joins. All the shape classes except Line allow you to alter how their corners appear, using the StrokeLineJoin property. The property takes its value from the PenLineJoin enumeration, and can take on any of these values:
- Miter uses sharp edges.
- Bevel cuts off the pointed edge.
- Round gently rounds out the corner.
The Figure below shows the sample page, LineJoin.xaml. This page displays fourversions of the same Polyline shape, changing only the StrokeLineJoin property for each.
In the Figure above, each item in the left column shows one of the StrokeLineJoinproperty values. As you can see, Miter, the default value, simply joins the lines. Bevel truncates the pointed edge, and Round rounds out the corners. The >markup for each Polyline looks like the following:
<Polyline Points="20,0 60,100 100,50 200,50"Stroke="Black"StrokeThickness="20"StrokeLineJoin="Miter" />As shown in the first example, when you're using mitered joins and the linesare thick with tight angles, the "point" on the corner can be extreme. To avoid this problem, you can also set the StrokeMiterLimit property. This property defines a limit on the ratio of the miter length (that is, the length of the "point") to the half of the stroke thickness. This value must always be a positivenumber greater than or equal to 1. The larger the value, the longer the point can be. By default, there is no limit on this ratio;in the right-hand example in the first row in the Figure above, the markup sets the value to 1. Given a value of 1, the corner can only extend half the thickness of the line, giving the bottom corner a better look.
This post is an excerpt from the online courseware for our Windows 8 Using XAML: Bindings, Shapes, and Animation course written by expert Ken Getz.
