How to: Crop an Image

 

This example shows how to crop an image using CroppedBitmap.

CroppedBitmap is primarily used when encoding a cropped version of an image to save out to a file. To crop an image for display purposes see the Create a Clip Region topic.

The following Extensible Application Markup Language (XAML) defines resources used within the samples below.

<Page.Resources>
   <!-- Define some image resources, for use as the image element source. -->
   <BitmapImage x:Key="masterImage" UriSource="/sampleImages/gecko.jpg" />
   <CroppedBitmap x:Key="croppedImage" 
      Source="{StaticResource masterImage}" SourceRect="30 20 105 50"/>
</Page.Resources>

The following example creates an image using a CroppedBitmap as its source.

         <!-- Use the cropped image resource as the images source -->
         <Image Width="200" Source="{StaticResource croppedImage}" 
            Margin="5" Grid.Column="0" Grid.Row="1" />

            ' Create an Image element.
            Dim croppedImage As New Image()
            croppedImage.Width = 200
            croppedImage.Margin = New Thickness(5)

            ' Create a CroppedBitmap based off of a xaml defined resource.
            Dim cb As New CroppedBitmap(CType(Me.Resources("masterImage"), BitmapSource), New Int32Rect(30, 20, 105, 50))
            'select region rect
            croppedImage.Source = cb 'set image source to cropped

The CroppedBitmap can also be used as the source of another CroppedBitmap, chaining the cropping. Note that the SourceRect uses values that are relative to the source cropped bitmap and not the initial image.

         <!-- Chain a cropped bitmap off a previosly defined cropped image -->
         <Image Width="200" Grid.Column="0" Grid.Row="3" Margin="5">
            <Image.Source>
               <CroppedBitmap Source="{StaticResource croppedImage}" 
                  SourceRect="30 0 75 50"/>
            </Image.Source>
         </Image>

            ' Create an Image element.
            Dim chainImage As New Image()
            chainImage.Width = 200
            chainImage.Margin = New Thickness(5)

            ' Create the cropped image based on previous CroppedBitmap.
            Dim chained As New CroppedBitmap(cb, New Int32Rect(30, 0, CType(cb.Width, Integer) - 30, CType(cb.Height, Integer)))
            ' Set the image's source.
            chainImage.Source = chained

Create a Clip Region

Show: