How to: Clip a Drawing

This example shows how to define a clip region for a Drawing.

Use a DrawingGroup to define a clip for a Drawing. The DrawingGroup class is the only type of Drawing object that enables you to define your own clip region.

Use a Geometry to describe the clip and apply it to the ClipGeometry property of the DrawingGroup object.

Example

The illustration shows the DrawingGroup before and after the elliptical clip is applied.

👁 DrawingGroup with a defined clip region

The following example uses a DrawingGroup to apply a ClipGeometry to several GeometryDrawing objects.

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SDKSample
{
 /// <summary> 
 /// Shows how to define a clip region for a DrawingGroup. 
 /// </summary> 
 public class ClipExample : Page
 {
 public ClipExample()
 {

 // 
 // Create several GeometryDrawing objects. 
 // 

 // Create a rectangle.
 GeometryDrawing drawing1 = new GeometryDrawing(
 Brushes.Pink,
 null, 
 new RectangleGeometry(new Rect(0,0,50,85))
 );

 // 
 // Create a polygon. 
 //
 PathFigure pLineFigure = new PathFigure();
 pLineFigure.StartPoint = new Point(25, 25);
 PolyLineSegment pLineSegment = new PolyLineSegment();
 pLineSegment.Points.Add(new Point(0, 50));
 pLineSegment.Points.Add(new Point(25, 75));
 pLineSegment.Points.Add(new Point(50, 50));
 pLineSegment.Points.Add(new Point(25, 25));
 pLineSegment.Points.Add(new Point(25, 0));
 pLineFigure.Segments.Add(pLineSegment);
 PathGeometry pGeometry = new PathGeometry();
 pGeometry.Figures.Add(pLineFigure);

 GeometryDrawing drawing2 = new GeometryDrawing(
 Brushes.Lime,
 new Pen(Brushes.Black, 10),
 pGeometry
 );

 // 
 // Create a circle. 
 //
 GeometryDrawing drawing3 = new GeometryDrawing(
 Brushes.Lime,
 new Pen(Brushes.Black, 2),
 new EllipseGeometry(new Point(10, 10), 5, 5)
 );

 // Create the DrawingGroup and add the 
 // geometry drawings.
 DrawingGroup aDrawingGroup = new DrawingGroup();
 aDrawingGroup.Children.Add(drawing1);
 aDrawingGroup.Children.Add(drawing2);
 aDrawingGroup.Children.Add(drawing3);

 // 
 // Create an EllipseGeometry and use it to 
 // clip the DrawingGroup. 
 //
 EllipseGeometry clipGeometry = 
 new EllipseGeometry(new Point(25,50), 25, 50);
 aDrawingGroup.ClipGeometry = clipGeometry;


 // Use an Image control and a DrawingImage to 
 // display the drawing.
 DrawingImage aDrawingImage = new DrawingImage(aDrawingGroup);

 // Freeze the DrawingImage for performance benefits.
 aDrawingImage.Freeze();

 Image anImage = new Image();
 anImage.Source = aDrawingImage;
 anImage.Stretch = Stretch.None;
 anImage.HorizontalAlignment = HorizontalAlignment.Left;

 // Create a border around the images and add it to the 
 // page.
 Border imageBorder = new Border();
 imageBorder.BorderBrush = Brushes.Gray;
 imageBorder.BorderThickness = new Thickness(1);
 imageBorder.VerticalAlignment = VerticalAlignment.Top;
 imageBorder.HorizontalAlignment = HorizontalAlignment.Left;
 imageBorder.Margin = new Thickness(20);
 imageBorder.Child = anImage;

 this.Background = Brushes.White;
 this.Margin = new Thickness(20);
 this.Content = imageBorder;

 }
 }
}

<Page 
 xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:PresentationOptions="https://schemas.microsoft.com/winfx/2006/xaml/presentation/options" 
 xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"
 mc:Ignorable="PresentationOptions"
 Background="White" Margin="20">

 <Border BorderBrush="Gray" BorderThickness="1" 
 HorizontalAlignment="Left" VerticalAlignment="Top"
 Margin="20">
 <Image Stretch="None" HorizontalAlignment="Left">
 <Image.Source>
 <DrawingImage PresentationOptions:Freeze="True">
 <DrawingImage.Drawing>

 <!-- A DrawingGeometry with an elliptical clip region. -->
 <DrawingGroup>
 <GeometryDrawing Brush="Pink">
 <GeometryDrawing.Geometry>
 <RectangleGeometry Rect="0,0,50,85" />
 </GeometryDrawing.Geometry>
 </GeometryDrawing>
 <GeometryDrawing Brush="Lime" 
 Geometry="M 25,25 L 0,50 25,75 50,50 25,25 25,0">
 <GeometryDrawing.Pen>
 <Pen Thickness="10" Brush="Black" />
 </GeometryDrawing.Pen>
 </GeometryDrawing>
 <GeometryDrawing Brush="Lime">
 <GeometryDrawing.Geometry>
 <EllipseGeometry Center="10,10" RadiusX="5" RadiusY="5" />
 </GeometryDrawing.Geometry>
 <GeometryDrawing.Pen>
 <Pen Thickness="2" Brush="Black" />
 </GeometryDrawing.Pen>
 </GeometryDrawing>

 <DrawingGroup.ClipGeometry>
 <EllipseGeometry Center="25,50" RadiusX="25" RadiusY="50" />
 </DrawingGroup.ClipGeometry>
 </DrawingGroup>
 </DrawingImage.Drawing>
 </DrawingImage>
 </Image.Source>
 </Image>
 </Border>


</Page>

See Also

Concepts

Drawing Objects Overview

Geometry Overview

Reference

Geometry

Freeze

PresentationOptions:Freeze Attribute