How do you rotate an Image around its center point in a C# code-behind file for WinUI3?

Question

I have tried multiple things to rotate the Image, but it keeps ending up outside of the original bounds of the Grid (and even the Window!) that the unrotated Image takes up.

The XAML is straightforward

    <Grid
        x:Name="GridField">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
    </Grid>

I can rotate the Image like this, but it goes out of bounds

               var sourcePath = Path.GetFullPath(
               Path.Combine(
                   Path.GetDirectoryName(Assembly.GetEntryAssembly().Location),
                   fileUrl
                   )
               );
               var file = await StorageFile.GetFileFromPathAsync(sourcePath);

               using IRandomAccessStream fileStream = await file.OpenReadAsync();
               BitmapImage bitmapImage = new();
               bitmapImage.SetSource(fileStream);
               
               var image = new Image();
               image.Source = bitmapImage;
               image.Rotation = 180; 

Seeing this question wpf rotate image around center and this one UWP - Rotating an Image while keeping it aligned to the grid, using XAML only I tried this

                var sourcePath = Path.GetFullPath(
                Path.Combine(
                    Path.GetDirectoryName(Assembly.GetEntryAssembly().Location),
                    fileUrl
                    )
                );
                var file = await StorageFile.GetFileFromPathAsync(sourcePath);

                using IRandomAccessStream fileStream = await file.OpenReadAsync();
                BitmapImage bitmapImage = new();
                bitmapImage.SetSource(fileStream);
                
                var image = new Image();
                image.Source = bitmapImage;
                image.RenderTransformOrigin = new Point(0.5, 0.5);
                image.Rotation = 180;

and I got a System.UnauthorizedAccessException.

I then tried to use a RotateTransform, but it makes the Image go out of bounds too!

                var sourcePath = Path.GetFullPath(
                Path.Combine(
                    Path.GetDirectoryName(Assembly.GetEntryAssembly().Location),
                    fileUrl
                    )
                );
                var file = await StorageFile.GetFileFromPathAsync(sourcePath);

                using IRandomAccessStream fileStream = await file.OpenReadAsync();
                BitmapImage bitmapImage = new();
                bitmapImage.SetSource(fileStream);
                
                var image = new Image();
                image.Source = bitmapImage;
                image.RenderTransformOrigin = new Point(0.5, 0.5);
                RotateTransform rotateTransform = new RotateTransform()
                {
                    CenterX = image.Width / 2,
                    CenterY = image.Height / 2,
                    Angle = 180
                };
                image.RenderTransform = rotateTransform;

How do I rotate around the center?

Boarder

Answer 1

Well, no Exception here, and it works.

                var sourcePath = Path.GetFullPath(
                Path.Combine(
                    Path.GetDirectoryName(Assembly.GetEntryAssembly().Location),
                    fileUrl
                    )
                );
                var file = await StorageFile.GetFileFromPathAsync(sourcePath);

                using IRandomAccessStream fileStream = await file.OpenReadAsync();
                BitmapImage bitmapImage = new();
                bitmapImage.SetSource(fileStream);
                
                var image = new Image();
                image.Source = bitmapImage;
                image.RenderTransformOrigin = new Point(0.5, 0.5);
                RotateTransform rotateTransform = new RotateTransform()
                {
                    CenterX = image.Width / 2,
                    CenterY = image.Height / 2,
                    Angle = 180
                };
                image.RenderTransform = rotateTransform;

Boarder