Article
06/13/2011

Clip

Microsoft Silverlight will reach end of support after October 2021. Learn more.

Gets or sets the Geometry that is used to define the outline of the contents of an object.

<object ...>
  <object.Clip>
    singleGeometry
  </object.Clip>
</object ...>

value = object.Clip
object.Clip = value

XAML Values

Value	Description
singleGeometry	Exactly one object element for an object that derives from Geometry. This can be one of the following: EllipseGeometry, GeometryGroup, LineGeometry, PathGeometry, RectangleGeometry.

Property Value

Type: Geometry

The geometry to be used for clipping area sizing.

This property is read/write. The default value is null.

Managed Equivalent

Clip

Remarks

Elements that are outside the geometry will be visually clipped in the rendered layout. The geometry does not have to be rectangular.

The clipped area is the outside of the geometry. In other words, the content that is shown (that is not clipped) is the area of the geometry that would otherwise have a Fill if the geometry were used as data for a Path instead of being used for clipping. The clipped area is any area that falls outside the geometry overlay. For complex geometries, the areas that are clipped or not clipped are influenced by the geometry's FillRule.

Clipping with a LineGeometry would result in total clipping, because the line by itself has no dimension. EllipseGeometry, GeometryGroup, and RectangleGeometry are probably the simplest to use, but it is possible to use a PathGeometry for more complex results.

You can specify a complex geometry for Clip if you specify a single GeometryGroup as the value and populate the group with child geometries

An alternative approach for showing only part of an element is to use OpacityMask, using either a RadialGradientBrush or an ImageBrush that uses a transparency mask. If you use the OpacityMask technique, you can create "bleed" effects against the background. The Clip technique always results in hard edges where the clip is applied.

Example

The following example shows how to clip out an elliptical (circular) area out of a rectangle.

<Canvas 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  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>