How to create and apply a clip in a Silverlight application?

[Tweaker]

The clips can define a path through or geometric areas display an item. In the case of Silverlight it is possible to attach clips to XAML elements. Typically, a "Canvas," a "Rectangle >,... may be assigned to the Clip property and all its content, which tends to exceed a defined area is not visible. See example below, the "Canvas" is red. Expression Blend is the solution of simplicity. Using the software Expression Blend Clip the problem can be solved very easily without worrying about the technique used.

1. Create a "Canvas> background color (background) red. Create a "TextBlock> color (foreground) is a white child <canvas>.
   
   
   
2. Create a <Rectangle> at the same level as you <Canvas> XAML in the tree. This rectangle represents the visible area of your "canvas."
   
   
   
3. Select the item <Canvas> and the <Rectangle> as shown in the image above. In the menu bar at the top of the window: "Object> Path", click on Make Clipping Path. The result is rather convincing looking more ready how it actually works.

[Tweaker]

On the XAML view it is interesting to watch how Blend addressed the issue. Looking at the XAML tab, you can view the following code :

<Canvas Background = "# FFFF0000" 
Clip = "M0.5, 0.5 L332.5, L332.5 0.5, L0.5 67.5, 67.5 z"> 
</ Canvas>

Blend combines a Path object to the Clip property. The Path object is very interesting but can very quickly become very difficult to decipher especially when people start to use tools like the pen "Pen (P key) in Blend to make more complex shapes than the rectangle. There is therefore a more accessible and declarative: the use of the Geometry object which is to draw geometric shapes. The Geometry object can thus be used for the clips and can be translated as a Path. A clip may thus be a EllipseGeometry a RectangleGeometry a GeometryGroup, a LineGeometry or PathGeometry. Below is an example of using <GeometryGroup>.

  1: <Canvas 
  2: xmlns = "http://schemas.microsoft.com/client/2007" 
  3: xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml" 
 4: x: Name = "Scene" 
  5: Width = "450" Height = "325" Background = "# ff000000"> 
  6: <Canvas Width = "396" Height = "250" Canvas. Left = "26" Canvas. Top = "38" Background = "# FFFF0000"> 
  7: <Canvas.Clip> 
  8: <GeometryGroup> 
 9: <EllipseGeometry Center = "50.100" RadiusX = "50" RadiusY = "50" /> 
  10: <EllipseGeometry Center = "150.190" RadiusX = "40" RadiusY = "40" /> 
  11: <EllipseGeometry Center = "220.20" RadiusX = "30" RadiusY = "30" /> 
  12: <EllipseGeometry Center = "205.110" RadiusX = "30" RadiusY = "30" /> 
 13: <EllipseGeometry Center = "269.155" RadiusX = "20" RadiusY = "20" /> 
  14: <EllipseGeometry Center = "360.90" RadiusX = "10" RadiusY = "10" /> 
  15: </ GeometryGroup> 
  16: </ Canvas.Clip> 
  17: "Image Width =" 396 "Height =" 343 "Source =" Garden.jpg "Stretch =" Fill "/> 
 18: </ Canvas> 
  19: </ Canvas>

[Tweaker]

To animate a clip must animate the clip property that is either a Path, a Geometry. Animating a Path quickly became archaic ... the choice will very quickly on the animation of geometric shapes. However, the animations have their limits too. In silverlight there are three types of animations: DoubleAnimation, PointAnimation, ColorAnimation you will not have the possibility (unlike WPF example) to animate rectangleGeometry. It simply means that to achieve a Collapse / Expand panel using LineGeometry and PointAnimation be prescribed.

1: <Canvas Width = "326" Height = "192" Canvas. Left = "56296" Canvas. Top = "75"> 
  2: <Canvas.Clip> 
  3: <PathGeometry> 
  4: <PathFigure> 
  5: <LineSegment x: Name = "rctLineSeg1" Point = "0.0" /> 
 6: <LineSegment x: Name = "rctLineSeg2" Point = "326.0" /> 
  7: <LineSegment x: Name = "rctLineSeg3" Point = "326.192" /> 
  8: <LineSegment x: Name = "rctLineSeg4" Point = "0.192" /> 
  9: </ PathFigure> 
  10: </ PathGeometry> 
  11: </ Canvas.Clip> 
  12: <TextBlock ... /> 
 13: </ Canvas>

The subtlety is to animate LineSegment via a "Storyboard> when MouseLeftButtonUp.

Closing Panel: 
  1: <PointAnimationUsingKeyFrames BeginTime = "00:00:00" Storyboard. TargetName = "rctLineSeg3" Storyboard. TargetProperty = "Item"> 
  2: <SplinePointKeyFrame keySplines = "0,0.4,0.6,1" keytimer = "00:00:00.45" Value = "326.0" /> 
  3: </ PointAnimationUsingKeyFrames> 
  4: <PointAnimationUsingKeyFrames BeginTime = "00:00:00" Storyboard. TargetName = "rctLineSeg4" Storyboard. TargetProperty = "Item"> 
  5: <SplinePointKeyFrame keySplines = "0,0.4,0.6,1" keytimer = "00:00:00.45" Value = "0.0" /> 
  6: </ PointAnimationUsingKeyFrames> 

Opening Panel: 
  1: <= PointAnimationUsingKeyFrames BeginTime "00:00:00" Storyboard. TargetName = "rctLineSeg3" Storyboard. TargetProperty = "Item"> 
 2: <SplinePointKeyFrame keySplines = "0,0.4,0.6,1" keytimer = "00:00:00.45" Value = "326.192" /> 
  3: </ PointAnimationUsingKeyFrames> 
  4: <PointAnimationUsingKeyFrames BeginTime = "00:00:00" Storyboard. TargetName = "rctLineSeg4" Storyboard. TargetProperty = "Item"> 
  5: <SplinePointKeyFrame keySplines = "0,0.4,0.6,1" keytimer = "00:00:00.45" Value = "0.192" /> 
  6: </ PointAnimationUsingKeyFrames>

This task, which at first seems very simple is far more complicated than it seems. We can therefore hope that the version of Silverlight 2 will bring some novelties in the field of clipping and will enrich the animation engine already present in the plugin 1.0.