Drawing text, shapes, gradients, another image etc on WritableBitmap in C++ for Metro app?


  • So for, I have figured out how to load an image from a file into a WriteableBitmap and read/write individual pixels. So, I can do basic image processing and display it in a XAML Image control that I have created in the UI.

    Now I am looking for some APIs to draw text on the image buffer that I have (with WriteableBitmap) and also other things like another image on top of it with different blending modes, some shapes, gradients etc. And I want to use C++/CX for that. But I am not familiar with Direct2D. Are there easier ways to do these things without the pain of learning Direct2D?

    If not, can anyone please point me to some good example of a regular C++/CX Metro application with mostly XAML UI and some small amount Direct2D use?

    Monday, July 23, 2012 3:27 AM


All replies

  • Going through different threads, it appears that Direct2D is the way to go. In my app, this is what all I need...

    1. Initially I have a buffer 32 bit pixels of an image, which I got from WriteableBitmap.

    2. Use Direct2D to draw objects/other images etc. on this raw buffer.

    3. Display it on a XAML Image UI through the WriteableBitmap again.

    So, I only need Direct2D for processing the image off-screen, and not for displaying anything. Any suggestions on how to go about it? BTW I have never used Direct2D in the past.

    • Edited by pragos Monday, July 23, 2012 6:33 AM
    Monday, July 23, 2012 6:29 AM
  • Apparently I can use IWICBitmap and use Direct2D to draw stuff on the bitmap. I think I am able to do that now. But how do I render the IWICBitmap on screen? For example on a rectangle object in XAML?
    Monday, July 23, 2012 1:52 PM
  • Hi,

    I have develeped a image processing application using Direct2D.
    In which i  have performed all image processing on a bitmap given and
    returnd the imagestream  as InMemoryRandomAccessStream and set this
    stream to the control later.

    I have implemented all Direct2D processing in a seperate WinRT component.
    So I can use this component from c# and C++.

    Used the following proto:

    InMemoryRandomAccessStream^  BlurImage(Platform::String ^imagepath)

    Set this returned stream to the XAML image control

    Hope this helps you to implement your requirement.

    If you want to draw both Direct2D and XAML rendering on the same control.
    You can use SurefaceImageSource.

    Please have a look at the following link


    • Edited by BhashTech Monday, July 23, 2012 2:34 PM
    • Marked as answer by Jesse Jiang Tuesday, July 24, 2012 8:19 AM
    Monday, July 23, 2012 2:33 PM
  • Thanks Bhash! I think SurfaceImage is what I am looking for.
    Tuesday, July 24, 2012 4:26 AM