wpf - Rounded corners for path

Question

I'm creating my own checkbox style. I have found the code on the internet I like and I'm not so confident in WPF drawing. I need to make these corners rounded. How to make these corners soft?

<Path Name="InnerPath"
      Data="M31,5 L19.5,5 19.5,19.5 34.5,19.5 34.5,11.75"
      Stretch="Fill"
      Stroke="#808080" />

Answer 1

At first the path markups can seem pretty confusing. The main markups you need to be concerned with regarding your question is M,Q,L, and Z.

M is the starting point for a new path. As your image contains 2 elements (paths), you will be using 2 M markups - One for the check mark, the other for the box.

Q designates a Quadratic bezier curve. It needs two points. The first determines where to pull the line to and the second is it's end point. It is important to note that the previous set point marks the beginning of the curve.

L is for a straight line. This is critical after the bezier curve otherwise it will throw an error. Evidently the parser sees the Q, handles the first two set of numbers, then sees a third that isn't tied to a markup and BOOM. In your case, the L is used since we are making a line. We could, however, use another Q to make a wavy line.

Z will close a path and connect it to the starting point.

Looking at your original image, The only markups needed are M and Z. Your path data property value would be:

M 263,99 263,115 87,115 87,340 311,340 311,221 327,221 327,355 73,355 73,99 Z M 186,323 105,238 143,195 186,240,351,68 391,112 Z

Hopefully this image will help explain the above numbers: Outline Image

The only addition would be to add a FILL property to the Path and use the same value as your stroke (#808080). This gives you the same image as your original. Don't be concerned that these are large numbers. As vector based graphics they will scale down to fit their container!

(For those curious about how I came up with these numbers, I took the above image into photoshop, expanded the canvas to make is square, then simply noted each points X,Y in photoshop and used those numbers.)

Regarding the curves...

This is where the Q markup comes in as well as the L. Hopefully the following illustrations will help. Here we have a simple 90 degree angle:

RightAngle

To throw a curve into this, we need to use the Q markup. If you want to make a perfect curve, you would use the point where the 2 lines would intersect. As this is a 90 degree angle, that is pretty easy to figure out. That will be the point the curve is pulled to. In our example above, this would be point 0,0. We next need to know where we want the curve to start and end.The further from the anchor point, the bigger the curve. In the following illustration I used 50:

CurvedAngle

In plain language M 100,0 50,0 Q 0,0 0,50 L 0,100 translates to: Staring at point 100,0, draw to point 50,0, from there begin a curve being pulled to point 0,0 and ending at point 0,50. Now draw a line to 0,100.

Hopefully this explains how to make curves in a path. It's actually pretty easy once you get the hang of it. With a little creativity, you really can do a lot with paths.

With the above in mind, the markup I think you are looking for is (DON'T FORGET TO ADD THE FILL PROPERTY!):

Data="M 263,99 263,115 113,115 Q 87,115 87,139 L 87,315 Q 87,340 113,340 L 287,340 Q 311,340 311,315 L 311,221 327,221 327,315 Q 327,355 287,355 L 113,355 Q 73,355 73,315 L 73,139 Q 73,99 113,99
Z M 186,323 105,238 143,195 186,240,351,68 391,112 Z"

The above markup gives you: CurvedCheckBox

Here's a link to the markup commands: MarkupCommands

Here are some examples of making shapes: MakingShapes