Clipping: Crop Images in Expression Blend (Windows & WindowsPhone)

Yesterday I was developing an application and I came across an issue of cropping the image in Universal App. Here is the solution I used to crop the image.

Selection an Image

Step one is to select the Image chosen from your library and put it into Expression Blend. Now place the image onto the workspace.



Now you see the image in the Expression Blend workspace, we need to crop the image. To crop the image we need a clipping path that we would use to crop the image to that shape. For that, I have used a rectangle.

Clipping Mask

To crop the image we need a clipping path that we would use to crop the image to that shape. For that, I have used a rectangle.



Now here you see the rectangle that I used to crop. I want the rectangle area to fill my image and to remove the other parts of the image (make transparent). First of all I need to make the rectangle's color empty so that I can see the image in the background.



As you see in the image that the rectangle is transparent now.

Cropping | Making Clipping Path

Now the next task is to make the clipping path and crop the image. To dop that you need to use the following image.



After you follow the image and you make a Clipping path (Shortcut Ctrl + 7) you will have your image cropped.



Wolaa! So now you have your cropped image, you can use an ellipse as your clipping mask to make the image round or for the profile pictures of various clipping masks.

Conclusion

Clipping or cropping is a very required thing in application development. You can use the power of Blend to make these clipping paths and crop the images. I hope you find this article interesting. Provide your suggestion in the following comments.

Personal Blog: Blend Unleashed.