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.
  • 4811

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.

ClipImg.jpg
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 Sub ClipImage()
        ' Create a BitmapImage
        Dim bmpImage As New BitmapImage()
        bmpImage.BeginInit()
        bmpImage.UriSource = New Uri("C:\Images\Garden.jpg", UriKind.RelativeOrAbsolute)
        bmpImage.EndInit()
        ' Clipped Image
        Dim clippedImage As New Image()
        clippedImage.Source = bmpImage
        Dim clipGeometry As New EllipseGeometry(New Point(150, 160), 120, 120)
        clippedImage.Clip = clipGeometry\
        LayoutRoot.Children.Add(clippedImage)
    End Sub

Listing 44

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.