Clipping Masks

WPF gives us many freedoms for creating our designs. The rectangles of yesterday are replaced with more fluid, organic shapes. In this tutorial, we're going to take an Image, which is traditionally rectangular, and apply a clipping mask to change its shape.

This tutorial begins exactly where the previous lesson ends.

In the previous tutorial, we hid all the pieces that we weren't working with. This time, we're going to lock the pieces, since we need to be able to see them, just not move them. Click on the lock icon in the object tree next to the Ellipse, the Ellipse_Copy and the Grid. You can try to click on these elements on the artboard now, and you'll see that you can't select them.

For starters, we want to drag an ellipse to represent the spot where we want the user to show up. Use the ellipse tool, and drag an ellipse out just above and to the left of the User and Password fields.

In the property inspector, make sure the Fill brush is selected, and choose "No Brush".

Select the Stroke Brush, and change it to white, then set the StrokeThickness to 3.

Next, we need to add the Image for the person we want to work with. Add the Pat.PNG to your project by choosing Project and Add Existing Item, then navigate to the file. Double click that file to insert it into your scene.

We need to position the picture so that it will appear where our white ellipse is. The easiest way to do this, is to drag the Image so it's listed in the Object tree before the ellipse (so it will be rendered UNDER the ellipse), then lock the ellipse. By doing this, I can resize and move my picture where I want.

Now that my picture is in the right place, I want to create a clipping mask, so that the parts of the image that are outside my ellipse don't get displayed. When you create a clipping mask, the element that you use to define the geometry gets consumed, so we need to duplicate the ellipse. This will allow the copy of the ellipse to be consumed, but leave behind the original. With the Ellipse selected, Copy and Paste it. You can do this with CTRL+C and CTRL+V, or in the Edit Menu. You will need to unlock your ellipse before you can copy it though, since you can't select it while it's locked.

To make a clipping path, you need to have exactly two elements selected. The element that is going to remain, and is the element that's going to BE clipped, has to be the primary selected element (the one with the resize adorners). The other element that is selected is the element that will provide the geometry for the clipping path. In this case, the ellipse. So, select the ellipse first, and then with the CTRL key, select the Image. By doing it in this order, you make sure the Image is the primary selected element. If you selected the two elements out of order, you can just click the Image control again, and it will switch which element is the primary.

Finally, in the Object menu, select Path and Make Clipping Path.