How to Crop an Image using the WriteableBitmap class?

Some time we need to crop an image uploaded by user in Silverlight or Windows Phone applications. Sometime we also need to do a rotate transform or skew transform to the image before saving it. So, how to achieve it?


This blog post will cover the code with details using the WriteableBitmap class that comes with the SDK. Continue reading to know more about it.


The WriteableBitmap class inherited from BitmapSource is present in the System.Windows.Media.Imaging namespace and provides the user a BitmapSource that can be written to and updated. Using this WriteableBitmap class, you can crop your images easily in your Silverlight or Windows Phone applications. Let’s write the code to implement the cropping functionality.


To crop an image, we will need an image source, the (x, y) co-ordinates of the image and the height & width of the cropped image. The API will crop the original image from the (x, y) co-ordinates to the dimension specified.


Here is the C# Code implementation:

private static WriteableBitmap CropImage(WriteableBitmap source, 
                                                         int xOffset, int yOffset, 
                                                         int width, int height)
    // Get the width of the source image
    var sourceWidth = source.PixelWidth;
    // Get the resultant image as WriteableBitmap with specified size
    var result = new WriteableBitmap(width, height);
    // Create the array of bytes
    for (var x = 0; x <= height - 1; x++)
        var sourceIndex = xOffset + (yOffset + x) * sourceWidth;
        var destinationIndex = x * width;
        Array.Copy(source.Pixels, sourceIndex, result.Pixels, destinationIndex, width);
    return result;



Here is the VB.Net Code implementation:

Private Shared Function CropImage(source As WriteableBitmap, 
                                  xOffset As Integer, yOffset As Integer,
                                  width As Integer, height As Integer) As WriteableBitmap
    ' Get the width of the source image
    Dim sourceWidth = source.PixelWidth
    ' Get the resultant image as WriteableBitmap with specified size
    Dim result = New WriteableBitmap(width, height)
    ' Create the array of bytes
    For x As var = 0 To height - 1
        Dim sourceIndex = xOffset + (yOffset + x) * sourceWidth
        Dim destinationIndex = x * width
        Array.Copy(source.Pixels, sourceIndex, result.Pixels, destinationIndex, width)
    Return result
End Function



The above code implementation will return you a cropped image based on the size specified. As it will return an WriteableBitmap instance, you can directly bind it to an image control or create image stream to save it in disk.


To know more about saving to an image stream, read this post: How to create Image Stream of XAML Page using Telerik’s ExportExtension method?


Now, we will need a XAML page to design our sample application where we will have two image controls and a button as shown below. You will be very easily able to create the XAML page and hence I am not sharing the whole code here.


Original Image


The sample application consists of one large image (Original Image) at the left side and one small image (Cropped Image will show here) at the right side. Our implementation will be to crop a specified dimension of the original image and show it at the second image control on click of the button control.


To do this, first we will need to create a WriteableBitmap instance from the original image control and in case we need to do an transform operation on top of the image, we need to specify here, else we can put a “null” as the second parameter to it. Then call the CropImage() method with the required parameters to get the crop version of the original image as shown below.


Here is the C# version of the Code implementation:

// Create an instance of WriteableBitmap from the original image.
// If you want to Skew or Rotate the cropped image, specify it as the second parameter.
// Just pass "null" if you want to use the original image directly.
var writeableBitmap = new WriteableBitmap(OriginalImage, null);
// Crop and set the new WriteableBitmap as the image source
CroppedImage.Source = CropImage(writeableBitmap, X, Y, WIDTH, HEIGHT);


Here is the VB.Net version of the Code implementation:

' Create an instance of WriteableBitmap from the original image.
' If you want to Skew or Rotate the cropped image, specify it as the second parameter.
' Just pass "null" if you want to use the original image directly.
Dim writeableBitmap = New WriteableBitmap(OriginalImage, Nothing)
' Crop and set the new WriteableBitmap as the image source
CroppedImage.Source = CropImage(writeableBitmap, X, Y, WIDTH, HEIGHT)



Now once you click the Crop button, you will notice that the second image at the right side has been changed with a cropped version of the image based on the size specified as the parameter to the CropImage() method. Here is the screenshot of the same:


After Crop Operation


I hope that, this post will help you to understand the use of WriteableBitmap and how to use this class to crop an image to specified dimension. If you have further queries on this, drop a line below and I will try to answer you as soon as I can.


In the mean time, don’t forget to connect with me on Twitter, Facebook and Google+. Also subscribe to my blog’s RSS Feed and Email Newsletter to get update on recently published articles directly delivered to your inbox. Cheers. Happy coding.

If you have come this far, it means that you liked what you are reading. Why not reach little more and connect with me directly on Twitter, Facebook, Google+ and LinkedIn. I would love to hear your thoughts and opinions on my articles directly.

Also, don't forget to share your views and/or feedback in the comment section below.


  1. Hi
    Your sample seems to be good, but its not working for me, ie. writableImage is in windows.ui.xaml.imaging.

    I have a game and use what I call an image strip, a successive set of images used that I crop out and load into game objects as needed. So, then load each image into a byte buffer array. When a new object is created, set the source to one of the images in the array.

    I have recently loaded Win 8 and VS Express for doing App Store development. I cant seem to get this to work. Microsoft has moved and changed stuff so much that every example that I have found fails for one reason or another. I found one complete function in VB, but cant get the decoder coded correctly to pass it in as a parm. The Reversi sample does it, but it is in C# and uses MVVM.

    I have the code written in an older version of VB. There is a lot of code that I don't want to re-do in c#, or I guess MS is pushing javascript now.

    So, is there a chance that you can do a blog with this as the topic (or a link to a good sample). By the time you do it, hopefully I will have figured it out. Still, a lot of people want to do a game and there are still a lot of VB coders out there. This should be helpful.

    And include imports. Almost no one includes imports or using statements in the samples.

    Keith [email protected]

  2. Thak u Very Much :)... helped me a lot
    Deepak B S

    1. You can send me the sample project is not? thank you

  3. I was needing to modify another developer's code and I'm not familiar with Silverlight or image processing, but this article addressed exactly what I needed.

    I was able to dig into the existing code base and apply your cropping function seamlessly. Thank you!

  4. This is much is true, but what some customers don't realize is that you can help reduce your total bill by doing some services on your own. Narrow down your choices to a maximum of three companies based on their answers to your questions and your
    gut feeling. If you do not seal your items effectively then there is a prospect of breakage.

    Also visit my website Moving Services columbus Ohio

  5. A levy allows the IRS to legally seize and sell any type of property you own or
    have interest in including houses, cars, or boats.

    Accounting software will automate your transactions, which helps eliminate a
    chance for error caused due to manual data-entry mistakes.
    Here you can talk about the past job experiences, skills and

    Here is my website: attraction real estate

  6. This shithole doesn't works


© 2008-2018 Kunal-Chowdhury.com | Designed by Kunal Chowdhury
Back to top