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 How to: Create a Clip Region topic.
Example
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
// Create an Image element.
Image croppedImage = new Image();
croppedImage.Width = 200;
croppedImage.Margin = new Thickness(5);
// Create a CroppedBitmap based off of a xaml defined resource.
CroppedBitmap cb = new CroppedBitmap(
(BitmapSource)this.Resources["masterImage"],
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 an Image element.
Image chainImage = new Image();
chainImage.Width = 200;
chainImage.Margin = new Thickness(5);
// Create the cropped image based on previous CroppedBitmap.
CroppedBitmap chained = new CroppedBitmap(cb,
new Int32Rect(30, 0, (int)cb.Width-30, (int)cb.Height));
// Set the image's source.
chainImage.Source = chained;
For the complete sample, see Image Element Sample.