Share via

How to: Crop an Object in Silverlight

  • Article

You can crop an object by clipping out an area of the object's display. This is done by using the Clip property. You set this property to a Geometry, which means that you can cut out a variety of geometric shapes (for example, ellipse, line, or complex path) from your object. See Geometry Overview for more information about creating geometries.

Note   An alternate way to create a cropping effect is to apply an OpacityMask by using a gradient. Because you are using the Opacity property, you are able to create a "blurry edge" to your cropping. See OpacityMask for more information.

The Clip property applies to the following objects:

The following example shows how to clip out an elliptical (circular) area out of a rectangle. To conceptualize this example, consider the rectangle in the illustration.

A rectangle

A rectangle

The following illustration shows an ellipse with a radius of 50 centered at the position 200, 100.

An ellipse centered at 200, 100

An ellipse centered at 200, 100

The following illustration shows how the two shapes overlap.

The shapes overlapping

The shapes overlapping

The following illustration shows the results of clipping the rectangle with the ellipse as the clipping geometry.

Shape resulting from the clip

Shape resulting from the clip

The following code shows how to create the shape in the previous illustration by using the Clip property.

XAML 
<Canvas 
  xmlns="https://schemas.microsoft.com/client/2007" 
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">  
                   
  <Rectangle
    Fill="Yellow"
    Height="100"
    Width="200"
    StrokeThickness="2"
    Stroke="Black">
    <Rectangle.Clip>
      <EllipseGeometry Center="200,100" RadiusX="50" RadiusY="50" />
    </Rectangle.Clip>
  </Rectangle>
</Canvas>

See Also

Imaging Overview
Geometry Overview
Overviews and How-to Topics