Silverlight Tips provides simple and useful tutorials and tips with real life examples, live demos and sample codes to download.
About authors:
Damon Serji
Damon Serji,
Silverlight developer working at Metia in London.
Gavin Wignall
Gavin Wignall,
Interactive Design Lead, working in design for over 10 years, the last 3 being in Silverlight.
Allan Muller
Allan Muller,
Developer, working on various types of Silverlight and WCF projects.

Sometimes you need to cut a shape out from your canvas to produce a special effect by showing another object from behind the canvas appearing in the clipped area. This mainly is used in making animations to for instance display a text appearing in the clipped area.

In order to achieve this all you need is a canvas, another object inside the canvas, i.e. text or a rectangular to work as a color panel, and a path in your desired shape:

1. Add a canvas to your page

2. Add a rectangular inside the Canvas and fill it with a color

3. Draw a path

make sure you clicked on the LayoutRoot level before drawing the path, so your path doesn’t appear inside the canvas. You can draw a path using Pen tool. Select the Pen tool from tools panel and click on different places on the page to see the shape been drawn, to end the path click on the start point.

4. Clipping the path out from the canvas
you can choose which object to be clipped from the other by the order of selecting them. In this case we want our shape which we created using path method to be clipped from the canvas. Therefore, we need to click and select our path first, and then holding the Ctrl button on the keyboard click on the canvas.

We should now have both our path and canvas selected. Go to ‘Object’ menu in Blend and from ‘Path’ click on ‘Make Clipping Path’ (shortcut key is Ctrl + 7).

Now your canvas should have a hole in the shape you draw earlier using the Pen. So by moving the rectangular inside the canvas you will be able to notice the clipped area appearing when the rectangular or text is on the same position and disappearing when we move the rectangular or text to outside the clipped area.

Posted by Gavin Wignall on 30. December 2009 11:33 under: Intermediate
 with 2 Comments

Comments

Silverlight Preloader

Silverlight Preloader

Posted 12/30/2009 9:30:43 AM

wow..its so helpful site

Posted 2/17/2010 5:00:27 AM

Add comment


(Will show your Gravatar icon)

biuquote
  • Comment
  • Preview