locked
How to draw on a bitmap with a Windows Store application using C#

    Question

  • I cannot figure out how to draw on a bitmap in a Windows Store (RT) application.

    I want to draw pixel by pixel, setting the color.

    It looks like I need a WriteableBitmap, but I am unsure how to get the pixel format correct.

    All the examples I have found seem to read a bitmap from file and extract the pixel format from there. I am not starting from file. I am starting from a blank bitmap.

    Does anybody have a simple example of just image on a form, draw pixels on bitmap in the image?

    Saturday, February 28, 2015 7:25 PM

Answers

  • The core APIs only give you access to the Pixels array on the WriteableBitmap, see: https://msdn.microsoft.com/en-us/library/system.windows.media.imaging.writeablebitmap.pixels%28v=vs.95%29.aspx?f=255&MSPPError=-2147217396

    One integer (32 bits) gives you one pixel in ARGB format.

    So basically setting the value to 255 will give you a blue pixel. Setting it to 65280 will give you a green pixel and lastly setting it to 16711680 will give you a red pixel. The first 8 bits are for the alpha value and I guess you won't need them.

    Bascially you will have to shift the R value by 16 bits and the G value by 8 bits and can set the B value directly (or rather: use an OR operation to arrive at the final color).

    // To ARGB
    int intColor = (color.A << 24) | (color.R << 16) | (color.G << 8) | color.B;

    If you set it to 65280 and it turns out to be a red pixel instead of a green one the documentation would be wrong and the pixel format would be BGRA (I believe it's the standard for regular Bitmaps).

    Unless you are using C++ I'd however still suggest to simply use WriteableBitmapEx - I used it in most of my projects so far.

    Tuesday, March 3, 2015 2:47 PM

All replies

  • Hi Wayne,

    Sounds like you want to manipluate the pixel on the image, see this blog for a quite detail explanation: http://www.charlespetzold.com/blog/2012/08/WriteableBitmap-Pixel-Arrays-in-CSharp-and-CPlusPlus.html

    --James

    This  response contains a reference to a third party World Wide Web site. Microsoft is  providing this information as a convenience to you. Microsoft does not control  these sites and has not tested any software or information found on these sites;  therefore, Microsoft cannot make any representations regarding the quality,  safety, or suitability of any software or information found there. There are  inherent dangers in the use of any software found on the Internet, and Microsoft  cautions you to make sure that you completely understand the risk before  retrieving any software from the Internet


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Monday, March 2, 2015 2:37 AM
    Moderator
  • The easiest way to go about this is to use a WriteableBitmap and use the WriteableBitmapEx Nuget package to get access to have a straightforward way of manipulating the Bitmap.

    E.g. you can use the FillRectangle extension method to set the background color easily to a specific color and you won't have to care about the PixelFormat as WBEx already deals with all that.

    Monday, March 2, 2015 8:56 AM
  • Thanks for the reference, but I already read that article.

    Petzold's example takes a bitmap from file and loads it via "BitmapDecoder.CreateAsync(fileStream)" and then gets the pixel data via "await frame.GetPixelDataAsync()"

    That will not work for me because I am trying to make a new bitmap. I am trying to make the size of the bitmap variable based on user input, so I really cannot just load from a blank bitmap file.

    It is the pixel data part that has me stuck. I can write to the bitmap array, but getting the data format correct is a nuisance.

    Tuesday, March 3, 2015 1:29 PM
  • So, not anything built into the core APIs?

    Tuesday, March 3, 2015 1:32 PM
  • The core APIs only give you access to the Pixels array on the WriteableBitmap, see: https://msdn.microsoft.com/en-us/library/system.windows.media.imaging.writeablebitmap.pixels%28v=vs.95%29.aspx?f=255&MSPPError=-2147217396

    One integer (32 bits) gives you one pixel in ARGB format.

    So basically setting the value to 255 will give you a blue pixel. Setting it to 65280 will give you a green pixel and lastly setting it to 16711680 will give you a red pixel. The first 8 bits are for the alpha value and I guess you won't need them.

    Bascially you will have to shift the R value by 16 bits and the G value by 8 bits and can set the B value directly (or rather: use an OR operation to arrive at the final color).

    // To ARGB
    int intColor = (color.A << 24) | (color.R << 16) | (color.G << 8) | color.B;

    If you set it to 65280 and it turns out to be a red pixel instead of a green one the documentation would be wrong and the pixel format would be BGRA (I believe it's the standard for regular Bitmaps).

    Unless you are using C++ I'd however still suggest to simply use WriteableBitmapEx - I used it in most of my projects so far.

    Tuesday, March 3, 2015 2:47 PM
  • Thanks.

    The article referenced is one of those unfortunate instances where there is no code example, but your examples will help.

    It feels like such a step backward. Maybe I don't yearn enough for the old days, but I prefer abstractions that hide specifics like that.

    Tuesday, March 3, 2015 5:12 PM