Button Rendering Incorrectly after Rotation Transformation within a Silverlight Control

Question

It looks like the width of a child silverlight control is always clipped by the width of the container. Even if the child control is rotated.

This first "chunk" of XAML will render a Button that is too large for a stack panel and is clipped, this makes sense.

<StackPanel Width="20">
    <Button Width="100" Content="Foo" />
</StackPanel>

This second chunk of XAML rotates the button 90 degrees. I would expect to see the complete button since it is now vertical.

<StackPanel Width="20">
    <Button Width="100" Content="Foo" >
        <Button.RenderTransform>
        <TransformGroup>
            <ScaleTransform/>
            <SkewTransform/>
            <RotateTransform Angle="90"/>
            <TranslateTransform/>
        </TransformGroup>
            </Button.RenderTransform>
    </Button>
</StackPanel>

In the second chunk of XAML, It seems like the button is clipped at the same point it would be if it was horizontal, I would expect to see the complete button.

This is obviously standard behavior, but is there anyway to get around this?

Answer 1

If an element in a vertical StackPanel is wider than the width of the StackPanel, it will be clipped to the width of the StackPanel. If you remove your TransformGroup you'll see you got the same clipping, just not rotated. Clipping occurs before rotation, so even if you make it tall enough to display the result, it will still be clipped because the container before rotation wasn't big enough. One way around this is to insert a Canvas in between, because Canvas elements aren't clipped, and so it should work as expected. The best way to not get other side effects would be to make your Canvas the same size as the elements it contains, otherwise you could get weird sizing behavior from your StackPanel.

So your Code would look like this:

   <StackPanel Width="20">
        <Canvas Width="100" Height="20">                
            <Button Width="100" Content="Foo" >
                <Button.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>
                        <SkewTransform/>
                        <RotateTransform Angle="90"/>
                        <TranslateTransform/>
                    </TransformGroup>
                </Button.RenderTransform>
            </Button>
        </Canvas>
    </StackPanel>