Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

XAML Image Fit to Parent After Rotation

Tags:

rotation

wpf

xaml

I've got a control which allows the user to rotate an image - here's a simplified version of the XAML:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <Border Grid.Row="0" Margin="5"
            BorderBrush="Black" BorderThickness="2"
            Background="#ddd">
        <Viewbox>
            <Image Source="image.jpg" RenderTransformOrigin="0.5, 0.5">
                <Image.RenderTransform>
                    <RotateTransform Angle="{Binding ElementName=Slider, Path=Value}"/>
                </Image.RenderTransform>
            </Image>
        </Viewbox>
    </Border>

    <Slider x:Name="Slider" 
            Grid.Row="1" Margin="5"
            Minimum="-180" Maximum="180"
            Value="0"/>
</Grid>

The problem I'm having is that the image can span beyond the boundaries of the containing rectangle when rotated whereas I need it to be resized so that it fits. I could calculate the best fit on the ViewModel and bind that up, but I'm fairly sure I might just be missing a trick in the XAML to get this to happen for me. I thought that Viewbox might have done the trick but either that's not the case or I'm using it incorrectly...

like image 765
CatBusStop Avatar asked Aug 19 '13 15:08

CatBusStop


1 Answers

Fixed! I knew it would be simple :)

I switched RenderTransform over to LayoutTransform and worked like a charm!

like image 94
CatBusStop Avatar answered Nov 15 '22 07:11

CatBusStop