Click here to Skip to main content
11,575,925 members (57,860 online)
Click here to Skip to main content

Silverlight Control to Crop Images

, 30 Apr 2012 CPOL 16.5K 2K 8
Rate this:
Please Sign up or sign in to vote.
This is an alternative for "Silverlight Extended Canvas Control to Crop Images"

Introduction   

I was looking for a crop control in Silverlight when I found article  Silverlight Extended Canvas Control to Crop Images.  The control described in it impressed me by its simplicity and usefullness. Because I needed a crop control with movable edges I started to write my own version.

Main features are: 

  1. Sizable/movable crop area 
  2. Loaded image is fitted to the  dimensions of the container control 
  3. The crop function crops the original image, preserving the resolution of the original image 
  4. Possible to set aspect ratio 
  5. Possible to set minimal crop area size   
  6. Image Source and Aspect Ratio are  dependency objects, they are bindable.  

 

In this picture the aspect ratio was set to 4:3.  

How It Works    

In the article mentioned above the dimensions of the clip area are kept in a Rectangle UI element. Because I needed pointers to indicate the places where the crop field can be modified I decided to store crop field dimensions in a custom object called ClipRect (it it almost the same as Rect, but the Right and Bottom properties are not readonly, and contains some additional features) and added four images to visualize the crop pointers. At first I used a fifth image to visualize the crop area move functionality, but later I decided to solve it with a Cursor.Hand pointer. To emphasize the part of the image that is selected to crop I added two instances of the croppable image to the control, one as an inverse mask to the background, and one as a foreground. Then I bound the dimensions of the Clip of the foreground image to imitate a crop behaviour. The control is able to maintain predefined aspect ratios as well. In this case the horizontal change of crop field width is calculated from the vertical shift of the cursor. 

Using the code

Simply place a CropControl control to your XAML: 

<c:CropControl x:Name="cropControl" Width="500" Height="390" MinimalCropSize="60.0" 
                       AspectRatio="None" />   

Set the source property (it can be bound as well):  

BitmapImage bmp = new BitmapImage();
FileStream fs = imgOpenFileDialog.File.OpenRead();
bmp.SetSource(fs);
cropControl.Source = LoadFromBitmapImage(bmp);

And crop the image:  

imgCropped.Source = cropControl.CropImage();

Points of Interest

I found an article about Making Value Converters More Accessible in Markup that I found very helpful.

I struggled a lot with Data Binding in xaml code. Finally I realized that the functionality I missed is called Multibinding, which exists in WPF but not in Silverlight. 

I also had a lot of problem from the fact that ActualWidth/Height  of the image is only calculated  sometimes after the ImageOpened event, and I needed this value to position the crop pointers, so I decided to set the image dimensions from codebehind and not to let the framework to calculate it.

Any suggestions to make the code better appretiated.   

   

Reference  

Two pictures in the library are from Wikipedia:
Budapest from Gellert Hill
Budapest Montage 

History 

  • v. 1.1: 04/27/2012. Open File Dialog added to test project  
  • v. 1.0: 04/27/2012.  

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Arpad Pandy
Web Developer
United States United States
No Biography provided

You may also be interested in...

Comments and Discussions

 
QuestionGetting a WebCamImage into your CropControl Pin
Marc Vandeputte3-Aug-12 6:41
memberMarc Vandeputte3-Aug-12 6:41 
AnswerRe: Getting a WebCamImage into your CropControl Pin
Marc Vandeputte3-Aug-12 17:37
memberMarc Vandeputte3-Aug-12 17:37 
AnswerRe: Getting a WebCamImage into your CropControl Pin
marcs1234-Sep-12 15:47
membermarcs1234-Sep-12 15:47 
GeneralRe: Getting a WebCamImage into your CropControl Pin
marcs1234-Sep-12 15:54
membermarcs1234-Sep-12 15:54 
GeneralRe: Getting a WebCamImage into your CropControl Pin
Marc Vandeputte13-Sep-12 6:37
memberMarc Vandeputte13-Sep-12 6:37 
QuestionAbsolutely brilliant, thank you Pin
Member 766176926-Jul-12 13:16
memberMember 766176926-Jul-12 13:16 
QuestionSaving cropped image Pin
pwhermanb4-Jul-12 18:22
memberpwhermanb4-Jul-12 18:22 
AnswerRe: Saving cropped image Pin
Eleasar30-Jan-13 22:51
memberEleasar30-Jan-13 22:51 
BugClipRect not correctly initialized Pin
Benoit Potty8-May-12 21:13
memberBenoit Potty8-May-12 21:13 
GeneralRe: ClipRect not correctly initialized Pin
Member 993129011-Sep-14 5:40
memberMember 993129011-Sep-14 5:40 
QuestionToo Short Pin
Vivek Krishnamurthy27-Apr-12 10:02
memberVivek Krishnamurthy27-Apr-12 10:02 
AnswerRe: Too Short Pin
Dewey27-Apr-12 17:40
memberDewey27-Apr-12 17:40 
GeneralRe: Too Short Pin
Arpad Pandy28-Apr-12 10:28
memberArpad Pandy28-Apr-12 10:28 
GeneralRe: Too Short Pin
Dewey30-Apr-12 10:09
memberDewey30-Apr-12 10:09 
AnswerRe: Too Short Pin
Arpad Pandy28-Apr-12 10:47
memberArpad Pandy28-Apr-12 10:47 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150603.1 | Last Updated 30 Apr 2012
Article Copyright 2012 by Arpad Pandy
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid