How to fit the image to to border after rotation in WPF

Question

I have one border inside which am having an image. on button click am rotating that image to 90 degrees. this is my original image

The below is after rotation

As you can after rotation my image doesn't fit into the border. I need it to be fill the border completely. What is am missing here?

Answer 1

I think, you are using RenderTransform to rotate the image.

Instead, use LayoutTransform.

See the sample:

<StackPanel>
    <Border Width="500" Height="300" BorderBrush="Black" BorderThickness="1">
        <Image Source="sombrero.jpg" Stretch="Fill" x:Name="img" HorizontalAlignment="Center" VerticalAlignment="Center">
        </Image>
    </Border>
    
    <Button Content="Rotate" Click="ButtonBase_OnClick"></Button>
</StackPanel>

Codebehind:

private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
    {
        img.LayoutTransform = new RotateTransform(90);
    }

Before:

After:

Hope this helps.