Windows Store app: UIElement not rendered completly when using RenderTransform

Question

I would like to place a UIElement within another where the inner Element uses a RenderTransform to adjust its size. The problem is, that the inner element is not rendered completely. Only the part that original fit into the outer element is visible.

Example: The outer Element is a Grid with a Size of 100 x 200 pixels. The inner element is also a Grid with a Size of 200 x 200 pixels. If no transform is used only the upper half of the inner grid is visible because the lower part lies outside the bounds of the outer grid. This is not surprising.

If RenderTransform is applied to the inner Grid with a 0.5 scale the actual size should be 100 x 100 pixels. But only the upper half of 100 x 50 pixels is dawn. It looks like the lower part is ignored because it was not visible before applying the transform. This does not make a lot of sense: When I use a transformation to scale a larger element to fit into a smaller element I expect the complete element to be visible.

 <Grid Background="Green" Width="200" Height="100">
     <Grid Background="Yellow" Width="200" Height="200">
         <Grid.RenderTransform>
             <CompositeTransform ScaleX="0.5" ScaleY="0.5"/>
         </Grid.RenderTransform>
     </Grid>
 </Grid>

How can this be solved?

Answer 1

As is described in the name, "RenderTransform" applies to how the UIElement is rendered, i.e. how it is drawn. I believe what you have to do in this case is use a Viewbox. The Viewbox renders the content separately and then scales it to the size given.