Edit

ImageCropper

  • Article

The ImageCropper Control allows user to freely crop an image.

Try it in the sample app

Syntax

<Page ...
     xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"/>
    <controls:ImageCropper x:Name="ImageCropper" />
</Page>

Sample Output

ImageCropper animation

Properties

Property Type Description
MinCroppedPixelLength double Gets or sets the minimum cropped length(in pixel).
MinSelectedLength double Gets or sets the minimum selectable length.
CroppedRegion Rect Gets the current cropped region.
Source WriteableBitmap Gets or sets the source of the cropped image.
AspectRatio double? Gets or sets the aspect ratio of the cropped image, the default value is null.
CropShape CropShape Gets or sets the shape to use when cropping.
Mask Brush Gets or sets the mask on the cropped image.
PrimaryThumbStyle Style Gets or sets a value for the style to use for the primary thumbs of the ImageCropper.
SecondaryThumbStyle Style Gets or sets a value for the style to use for the secondary thumbs of the ImageCropper.
ThumbPlacement ThumbPlacement Gets or sets a value for thumb placement.

Methods

Methods Return Type Description
LoadImageFromFile(StorageFile) Task Load an image from a file.
SaveAsync(IRandomAccessStream,BitmapFileFormat,bool) Task Saves the cropped image to a stream with the specified format. Setting the boolean argument to True will save pixel values to the extent of the cropped area regardless of the crop shape, otherwise transparent or black pixels will fill the uncropped area depending on file format.
Reset() void Reset the cropped area.
TrySetCroppedRegion(Rect rect) bool Tries to set a new value for the cropped region, returns true if it succeeded, false if the region is invalid

Examples

Use ImageCropper

You can set the cropped image source by using the LoadImageFromFile(StorageFile) method or setting the Source property.

//Load an image.
await ImageCropper.LoadImageFromFile(file);

//Another way to load an image.
ImageCropper.Source = writeableBitmap;

//Saves the cropped image to a stream.
using (var fileStream = await someFile.OpenAsync(FileAccessMode.ReadWrite, StorageOpenOptions.None))
{
    await _imageCropper.SaveAsync(fileStream, BitmapFileFormat.Png);
}

' Load an image.
Await ImageCropper.LoadImageFromFile(file)

' Another way to load an image.
ImageCropper.Source = writeableBitmap

' Saves the cropped image to a stream.
Using fileStream = Await someFile.OpenAsync(FileAccessMode.ReadWrite, StorageOpenOptions.None)
    Await _imageCropper.SaveAsync(fileStream, BitmapFileFormat.Png)
End Using

Use Circular ImageCropper

You can set CropShape property to use the circular ImageCropper.

ImageCropper.CropShape = CropShape.Circular;

ImageCropper.CropShape = CropShape.Circular

Change Aspect Ratio

You can set AspectRatio property to change the aspect ratio of the cropped image.

ImageCropper.AspectRatio = 16d / 9d;

ImageCropper.AspectRatio = 16R / 9R

Or you can crop image without aspect ratio.

ImageCropper.AspectRatio = null;

ImageCropper.AspectRatio = Nothing

Sample Project

ImageCropper Sample Page Source. You can see this in action in the Windows Community Toolkit Sample App.

Default Template

ImageCropper XAML File is the XAML template used in the toolkit for the default styling.

Requirements

Device family Universal, 10.0.16299.0 or higher
Namespace Microsoft.Toolkit.Uwp.UI.Controls
NuGet package Microsoft.Toolkit.Uwp.UI.Controls

API