Image when rotated does not respect the height and width of the parent container

Question

I have a UWP application where I am rotating an image to a 90 degree angle. I have this image and a Canvas inside a Grid because I want Canvas to be on top of the image so from the code I can create some thumb controls and do a drag an drop.

If I don't apply the rotate transform the image is aligned properly inside the Grid like shown below.

On the other hand if I specify a Rotate Transform, the image rotates but it never scales to the height and width of the container as shown below.

I saw this post here Rotating and scaling image but I don't know how to get it to work in UWP. Please help. Here is my xaml. Ultimately what I want is, after the image has been rotated it should fit to the dimensions of the Grid scaling the height and width.

Edit: Please see the solution here, that is exactly what I want in UWP. fit image height and width after rotating WPF

<Grid x:Name="gridBarImagePanel" Grid.Row="4" BorderBrush="Black" BorderThickness="2"
                      Height="476" Width="625">

                    <Image x:Name="BarCodeImage" Source="..\SampleImage\demo.png" 
                           RenderTransformOrigin="0.54,0.40" Height="476" Width="625">
                        <Image.RenderTransform>
                            <RotateTransform Angle="90"></RotateTransform>
                        </Image.RenderTransform>
                    </Image>

                    <Canvas x:Name="cnvBarCodeImage" Canvas.ZIndex="100" VerticalAlignment="Stretch">

                    </Canvas>
                </Grid>

Yes thank you Nico it works. First writing to a file and rotating it like you said works fine. — nikhil

Nico Zhu - MSFT Nico Zhu - MSFT · Accepted Answer · 2019-11-22T02:31:30

Image when rotated does not respect the height and width of the parent container

RotateTransform is used to rotate transform uwp XAML. A RotateTransform is defined by an Angle that rotates an object through an arc around the point enterX, CenterY. But a transform is typically used to fill the UIElement.RenderTransform property and keep aspect ratio. For your scenario, we need use BitmapDecoder to re-render the image and keep aspect ratio. Please refer the following code.

private async void AppBarButton_Click(object sender, RoutedEventArgs e)
{
    StorageFile file = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///Assets/test.jpg"));
    using (IRandomAccessStream fileStream = await file.OpenAsync(FileAccessMode.Read),
                                       memStream = new InMemoryRandomAccessStream())
    {
        BitmapDecoder decoder = await BitmapDecoder.CreateAsync(fileStream);
        uint originalWidth = decoder.PixelWidth;
        uint originalHeight = decoder.PixelHeight;
        BitmapEncoder encoder = await BitmapEncoder.CreateForTranscodingAsync(memStream, decoder);

        encoder.BitmapTransform.ScaledWidth = (uint)(originalHeight * 1.0);
        encoder.BitmapTransform.ScaledHeight = (uint)(originalWidth * 1.0);
        encoder.BitmapTransform.InterpolationMode = BitmapInterpolationMode.Linear;

        //Rotate 180
        encoder.BitmapTransform.Rotation = BitmapRotation.Clockwise90Degrees;
        await encoder.FlushAsync();
        memStream.Seek(0);
        fileStream.Seek(0);
        fileStream.Size = 0;
        var bitmap = new BitmapImage();
        bitmap.SetSource(memStream);
        MyImg.Source = bitmap;
    }
}

Please note: if we rotate image to 90 ° and keep aspect ratio, the image will be distortion.

Image when rotated does not respect the height and width of the parent container

1 Answers