Border around a rotating image

Question

Basically I'm trying to do something whereby a WPF image is inside a WPF border, and periodically I rotate the image by changing the RotateTransform Angle property.

The problem is, when I rotate the image, the border doesn't rotate, or attempt to change to fit the new shape of the picture. I've tried setting it's Alignment properties to stretch, and even binding the height/width of the border to that of the image, but no luck. I suspect the problem is that, when I rotate the image, it doesn't actually change the height or width of the Image object, so of course the border doesn't know what to do.

Is there a better way to rotate the image that would allow the border to resize, or if not, how do I get the border to resize correctly, given that I'm changing the RotateTransform Angle.

Thanks!

Answer 1

You can use the LayoutTransform instead of RenderTransform for this. If you try changing the angle of rotation you'll see the border changes size to accommodate it. (Think this is what you're asking? If you actually want the border to rotate then you can just rotate that instead of the image)

<Window x:Class="rotate.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Border VerticalAlignment="Center" HorizontalAlignment="Center" BorderBrush="Black" BorderThickness="1">
            <Grid Background="Blue" Width="80" Height="80">
                <Grid.LayoutTransform>
                    <RotateTransform Angle="10"/>
                </Grid.LayoutTransform>                
            </Grid>
        </Border>
    </Grid>
</Window>

Answer 2

Use LayoutTransform instead of RenderTranform .

RenderTransform only does a visual transformation of the control and is applied after measuring and arranging Controls. Therefore it doesn't affect the size seen by other controls.

LayoutTransform really affects the layout of the object. It's applied before measuring and arranging control, so the other control see a change in the size.

Caution: LayoutTransform is much slower and won't usually give a smooth animation.

<Border BorderThickness="5" BorderBrush="Red" HorizontalAlignment="Center" VerticalAlignment="Center">
    <Image Width="50" Height="50">
        <Image.LayoutTransform>
            <RotateTransform Angle="45" />
        </Image.LayoutTransform>
    </Image>
</Border>