Clipping or Cropping Images in WPF

Clipping a region is a process of displaying partial area of a region by setting the outline of a region. In WPF, the clipping has been extended to all elements that are inherited from UIElement that includes controls, images, panels, Windows, and Pages.  The UIElement class has a Clip property that is a Geometry type and based on the given Geometry, an element can be clipped. For example, the code snippet below clips a Window by defining an EllipseGeometry.

 

<Window.Clip>

        <EllipseGeometry Center="150,160" RadiusX="120" RadiusY="120" />

</Window.Clip>

 

The following code snippet clips or crops an image to an ellipse.

 

<Image Source="Garden.jpg">

    <Image.Clip>

        <EllipseGeometry Center="150,160" RadiusX="120" RadiusY="120" />

    </Image.Clip>

</Image>

 

The clipped image looks like Figure 48.

 

Figure 48

Listing 44 creates a BitmapImage and then creates an Image and sets it Source property to BitmapImage. After that, the Clip property is set to Image property to an EllipseGeometry. Listing 44 generates output as Figure 48.

 

private void ClipImage()

{        

    // Create a BitmapImage

    BitmapImage bmpImage = new BitmapImage();

    bmpImage.BeginInit();

    bmpImage.UriSource = new Uri(@"C:\Images\Garden.jpg", UriKind.RelativeOrAbsolute);

    bmpImage.EndInit();

 

    // Clipped Image

    Image clippedImage = new Image();

    clippedImage.Source = bmpImage;

    EllipseGeometry clipGeometry = new EllipseGeometry(new Point(150, 160), 120, 120);

    clippedImage.Clip = clipGeometry;

 

    LayoutRoot.Children.Add(clippedImage);

}

Listing 44