RenderTargetBitmap width and height are incorrect

Question

Hello

I am using RenderTargetBitmap in WinRT 8.1 to draw a canvas , now my canvas width and height 500 X 500 , and I added it to visual tree , but if I add Rectangle to the canvas with size larger than canvas size say(600 X 600) , then render the canvas using RenderTargetBitmap  the size of RenderTargetBitmap  will be 600 X 600 not 500 X 500 , which causes a lot of problems to me.

I this behavior wrong ?, if no why the RenderTargetBitmap  doesn't take canvas width and height?.

Answer 1

Hi Shaker,

yes, it's in fact a different behavior in Windows Store Apps compared to WPF or Windows Phone. It looks like a bug to me, because even if you're using the Clip-Property and clip it to 500x500, the RenderTargetBitmap still contains the 600x600. :-)

I came across this bug when I developed the Womanizer-Windows 8.1-App using the RenderTargetBitmap with content on it. :-)

So, what's the solution? :-) The solution is to add an additional element to the Visual Tree.

If I'm right, you now how something like this:

  <Canvas x:Name="elementToRender" Width="500" Height="500">
        <Rectangle Width="600" Height="600" Fill="Black"/>
      </Canvas>

If you render the elementToRender  with RenderTargetBitmap, the bitmap get's a Size of 600x600 (in Windows Store Apps, in WPF it would have now a correct size of 500x500).

My first trial was to clip the elementToRender like this:

<Canvas x:Name="elementToRender" Width="500" Height="500">
  <Canvas.Clip>
    <RectangleGeometry Rect="0 0 500 500"/>
  </Canvas.Clip>
  <Rectangle Width="600" Height="600" Fill="Black"/>
</Canvas>

It gives you still a size of 600x600 for a RenderTargetBitmap. Ok, that's weird. Now the solution is to add another element as container to the Visual Tree like this:

<Grid x:Name="elementToRender" Width="500" Height="500">
  <Canvas Width="500" Height="500">
    <Canvas.Clip>
      <RectangleGeometry Rect="0 0 500 500"/>
    </Canvas.Clip>
    <Rectangle Width="600" Height="600" Fill="Black"/>
  </Canvas>
</Grid>

Tada, now the RenderTargetBitmap will have a rendered size of 500x500 and you're fine. :-)

---

Thomas Claudius Huber

"If you can´t make your app run faster, make it at least look & feel extremly fast"

twitter: @thomasclaudiush
homepage: www.thomasclaudiushuber.com
author of: ultimate Windows Store Apps handbook | ultimate WPF handbook | ultimate Silverlight handbook

Answer 2

big thank to you Thomas.

thats exactly what I want , you solved big problem for me

Thanks,

shaker