Skip to main content
 

Gets or sets the geometry used to define the outline of the contents of an element. This is a dependency property.

Namespace:   System.Windows
Assembly:  PresentationCore (in PresentationCore.dll)

Syntax
public Geometry Clip { get; set; }
public:
property Geometry^ Clip {
	Geometry^ get();
	void set(Geometry^ value);
}
member Clip : Geometry with get, set
Public Property Clip As Geometry

Property Value

Type:

The geometry to be used for clipping area sizing. The default is a null Geometry.

Remarks

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

Dependency Property Information

Identifier field

ClipProperty

Metadata properties set to true

None

Examples

This example shows how to define a framework element'sregion. To define a clip, use a Geometry (for example, an EllipseGeometryto set the element's property. Only the area that is within the region of the geometry will be visible.

The following example shows an Imageelement without a defined clip region. Because no clip region is defined, the entire image is displayed.

<Image Source="sampleImages\Waterlilies.jpg" 
  Width="200" Height="150" HorizontalAlignment="Left" />
An object before applying a clip region

Image with No Clip Region

In the next example, an identical Image is created, except that it has a defined clip region. Only the part of the image that is within the area the EllipseGeometrywill be displayed.

<Image 
  Source="sampleImages\Waterlilies.jpg" 
  Width="200" Height="150" HorizontalAlignment="Left">
  <Image.Clip>
    <EllipseGeometry
      RadiusX="100"
      RadiusY="75"
      Center="100,75"/>
  </Image.Clip>
</Image>
A clipped object

Image with an Elliptical Clip Region

The following example shows how animate a framework element's region. In this example, an EllipseGeometry is used to define an elliptical clip region for an Image element. A PointAnimation animates the ellipse geometry's property from (0, 0) to (200, 150). The animation starts playing after the image is loaded and repeats indefinitely.

<Image
  Source="sampleImages\Waterlilies.jpg" 
  Width="200" Height="150" HorizontalAlignment="Left">
  <Image.Clip>
    <EllipseGeometry x:Name="MyEllipseGeometry1"
      RadiusX="100"
      RadiusY="75"
      Center="100,75"/>
  </Image.Clip>
  <Image.Triggers>
    <EventTrigger RoutedEvent="Image.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <PointAnimation 
            Storyboard.TargetName="MyEllipseGeometry1" 
            Storyboard.TargetProperty="(EllipseGeometry.Center)"
            From="0,0" To="200,150" Duration="0:0:3" RepeatBehavior="Forever" 
            AutoReverse="True" />
          </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Image.Triggers>
</Image> 

For the full sample, see the Clip Region Sample.

Version Information
.NET Framework
Available since 3.0
Silverlight
Available since 2.0
Windows Phone Silverlight
Available since 7.0
Return to top