Clip Property

Article
11/08/2007

Gets or sets the Geometry used to define the outline of the contents of an element.

XAML	<object ...> <object.Clip> <Geometry.../> </object.Clip> </object ...>
Scripting	value = object.Clip object.Clip = value

XAML Values

Geometry

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

Geometry

The geometry to be used for clipping area sizing.

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

Remarks

Elements 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 (not clipped) is the area of the geometry that would otherwise have a Fill if the geometry were used as data for a Path rather than 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 by itself would result in total clipping, because the line by itself has no dimension. EllipseGeometry, GeometryGroup, or RectangleGeometry are probably the simplest to use, but it is possible to use a PathGeometry for more complex results.

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.

Examples

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

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 if you clip 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 above 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>

<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>

Applies To

Canvas, Ellipse, Glyphs, Image, InkPresenter, Line, MediaElement, Path, Polygon, Polyline, Rectangle, TextBlock

Share via