Wednesday, April 3, 2013

WP8 Tip: How to Create a Clipping Mask

UPDATE: You can download the project’s source code here.

Clipping masks are a handy technique to clip objects in your user interface. Many of you already know their convenience from design tools like Photoshop or Expression Design. Clipping masks can help you make an underlying object to be displayed within a certain shape, or more commonly, give you a nice tool to crop visual elements.

In this post I’ll share with you some ways to create and work with clipping masks in XAML, so you can implement them in your Windows Phone applications.

Lets start with a basic example. Clipping Masks can be created for a variety of UI Elements. Normally you will create a clip for an Image or a Rectangle element or a container like a Canvas or a Grid.

The following example demonstrates how to use a squared clipping mask to clip a rectangle. In other words, show a smaller portion (red square) of the  underlying rectangle (blue border).


Here is the XAML code for it:

  1: <Canvas HorizontalAlignment="Left"
  2:         VerticalAlignment="top">
  3:     <Canvas.Clip>
  4:         <RectangleGeometry Rect="0, 0, 200, 200"/>
  5:     </Canvas.Clip>
  7:     <Rectangle Fill="Red" 
  8:                Width="400" 
  9:                Height="400"
 10:                Margin="0,0,0,0"/>
 11: </Canvas>

Notice that I’m using a Canvas as the container of the clipping mask. By using the Canvas.Clip property, I can add a shape to create a clipping mask for the container’s content, which in this case is the red rectangle. For the Clip property you can only use a single geometry, typically a EllipseGeometry, a GeometryGroup, a LineGeometry, a PathGeometry or a RectangleGeometry.

Each geometry will have different properties that you can adjust for the clipping mask effect. In the case of the rectangle, you can modify the let and top alignment, and the width and height. imageAnother thing to notice, is that instead of having a Canvas container clipping a rectangle, I could have a single rectangle with the corresponding clipping masking itself, having less code.imageThe effect is basically the same, but the code is actually simpler:

  1: <Rectangle HorizontalAlignment="Left"
  2:            VerticalAlignment="top"
  3:            Fill="Yellow"
  4:            Height="400"
  5:            Width="400">
  6:     <Rectangle.Clip>
  7:         <RectangleGeometry Rect="150, 150, 100, 200"/>
  8:     </Rectangle.Clip>
  9: </Rectangle>

Both techniques are valid. They will serve different purposes depending on your needs.

You can also do exactly the same with an image. Just use the Clip property with a shape geometry to create the clipping mask (remember that for mobile, it is always better to have the right size images to avoid extra load when not needed!)imageHere is the code for it:

  1: <Image HorizontalAlignment="Left"
  2:        VerticalAlignment="top"
  3:        Source="/Assets/image.jpg">
  4:     <Image.Clip>
  5:         <RectangleGeometry Rect="80, 170, 300, 120"/>
  6:     </Image.Clip>
  7: </Image>

I hope you get the basic idea. Is just a matter of trying different shapes and property values. Make sure to check the MSDN documentation about the Clip property to get even more details. Also check a bit more about the cropping possibilities. You can even use triggers to kick in animations using clipping masks.

In summary, it is quite handy to understand and dominate the clipping techniques available to you in XAML. I hope that this gives you a few ideas on how to use them in your applications.

My next post will be about how to use the clipping masks when animating objects in the screen, and how to animate the clipping masks themselves in XAML and in code. Stay tuned, and please take a few seconds to leave a comment if you have something to share.

1 comment: