Use the Path class and the PathGeometry classes to build intricate lines and shapes.
- [Instructor] Use the path class when you want to create the most sophisticated shapes including things like Bezier curves and arcs. Here's an example of a path. First thing you want to notice about it is that it is a shape so it support all the properties that we've already discussed like Stroke and StrokeThickness. You can use framework element properties like margin. I could set a fill for this if I wanted to. I can set a fill so you can see the white background through there. In this case, I decided not to use a solid color brush for this stroke so I define a stroke here in this section as a LinearGradientBrush.
Then the next step when you're creating a path is to define the data points that are used to draw the shape. And they're inside this area. This is quite some syntax here but let's just point out the key points. On line 33 is the PathFigure. That's how I specify the starting point which is right here at this location. Then I specify a bunch of other elements to put in there. They're called Segments and they go in a collection. On my case, I have three segments in there. Two BezierSegment and an ArcSegment. Then I'm showing some of the other types of segments you could put in there.
This is not all of them but this is a sampling. Here's a LineSegment for drawing straight lines. A different kind of Bezier the curve and something called the PolyLine which is very similar to the polyline we've already seen. What I'm doing here is telling the path to use, these three items, to create this complex here. I'll simply it a bit. I'll remove this center Bezier by doing a Control + K, Control + C. Comment that up. Now it's simpler as a shape a bit. So we can concentrate what's happening here. So this defines the Bezier. Start here.
This defines the ending point for the Bezier and these are the two control points that cause the curve to take the shape like that. I've got an ArcSegment which is for drawing a portion of a circle and/or an ellipse. This is the ending point for the ArcSegment. Then this specifies the size of the arc. Now this is a proportional sizing here. So if I make this two, it's saying change the proportions of the arc.
Put that back to five. So this one to two. Now you see I've got a deep arc. Put that back to five. I can also control, it's called the SweetDirection, and some other properties. Also this one to counterclockwise and it flips it on its axis. Don't do that. So for the next example, I'll use this second tab. This one here. And this is the complex shape that we've seen some of the other examples in this course.
This consists of four paths. Two of the paths are used to draw the circle. Now I could have done that with an ellipse class but in this example I'm using the path to show you they can also recreate any other items you're used to. Then two other paths are used to draw the check mark. Now let's see what's inside this area. I'll ignore the Viewbox and the Canvas for this demo and concentrate just on the four paths here. They are CircleBackPath. Here's GradientCirclePath, theCheckOutlinePath and the CheckPath.
Now, just look at the last one. The only thing I really want to talk about is on line 140. This is an additional syntax or an ultimate syntax to the previous way of creating all those segments. This is called the Geometry mini-language and some more compact way of expressing what's happening here. Now it's less readable but it's more compact. In the previous example, you can see we're instantiating a ArcSegment. Here it's hard to tell what the arc segment is. But, if you know how to read the language, you can get some clues like this M here.
That stands for create new path figure and that indicates the starting point that creates the path figure itself. Then you'll see here is a letter C and that indicates create a Bezier. Basically, it has different letters and then after that are the defining points. So here's the points for the Bezier. Then there's another letter C here and that means I'm defining another Bezier here, and then there's another one here, and so on. Then Z indicates that I'm ending the current path figure.
Now let's see what it looks like. Here's the first path. Here's the second path. I've implemented some code in these check boxes so that you can turn on and off the different parts, each of the paths. So each of these check box is tied to one path. So that will turn off the background outline. This turns off the gradient. This turns off the outline around the check mark. And this turns off the check itself. Then you click it out again to re-enable them.
I'm also doing something else. You notice here when I click on the check mark or uncheck it, my code is going out and it's reading the information in that data property. It's pulling that many language out and parsing it and making it a little bit easier to read. So rather than having to look at the M, I say that's the start point and here's the two values. There's the line that's defined. There's a straight line drawn here in the check mark. Then this Bezier define and then a line and a Bezier. So as you click on these, you can see the mini-language in a slightly more readable format.
Speaking of mini-language, you're not going to want to write this. So in the next video, I'll show you how to use a tool to draw these paths with your mouse, or with touch, or with the tablet pen. You can draw on your screen and then that will automatically generate the path data.
- Interactions and controls
- UIElement family
- FrameworkElement family
- Shape family
- Decorator Family
- Control Fundamentals
- Button family
- Text Editor family