Prevent image clipping during rotation Windows Phone

Question

I am using the WriteableBitmapEx extension method to rotate a WriteableBitmap. bi in the code is a WritableBitmap. The RotateFree method rotates the bitmap in any degree and returns a new rotated WritableBitmap. My code:

    private void rotate()
    {
        degree += 1;
        var rotate = bi.RotateFree(degree);
        ImageControl.Source = rotate;
    }

My problem is since the ImageControl size is fixed, it causes the rotated bitmap to be clipped. So what is the best way to prevent this? I guess I am looking for a way to resize the ImageControl during rotation to prevent clipping. Any suggestions?

UPDATE

Based on this useful info Calculate rotated rectangle size from known bounding box coordinates I think I managed to calculate the bounding box width (bx) and height(by) and resize it accordingly during the rotation

double radian = (degree / 180.0) * Math.PI;
double bx = rotate.PixelWidth * Math.Cos(radian) + rotate.PixelHeight * Math.Sin(radian);
double by = rotate.PixelWidth * Math.Sin(radian) + rotate.PixelHeight * Math.Cos(radian);

While it appears that the ImageControl width and height increases/decreases during rotation, the image is still being clipped.

UPDATE 2

Based on @Rene suggestion, I managed to prevent the clipping. Combined with the ImageControl Width/Height calculation, the image size is retained during rotation by also setting its stretch property to NONE.

The issue now is to make sure the ImageControl resize from its center so that it does not appear moving. I can include a sample project if anyone interested

UPDATE 3

For those who might be interested the final solution. This is how I do it. The result is, the image is rotated without clipping and its size is retained during rotation. In addition, the rotation appears to originate from the center.

To adjust the ImageControl position as it's resizing so that the rotation appears to originated from center, I use this code.

var translationDelta = new Point((ImageControl.ActualWidth - bx) / 2.0, (ImageControl.ActualHeight - by) / 2.0);           
UpdateImagePosition(translationDelta);
ApplyPosition();

   // This code update the ImageControl position on the canvas
    public void UpdateImagePosition(Point delta)
    {
        var newPosition = new Point(ImagePosition.X + delta.X, ImagePosition.Y + delta.Y);
        ImagePosition = newPosition;            
    }

    //This apply the new position to make the ImageControl rotate from center
    public void ApplyPosition()
    {
        ObjComposite.TranslateX = ImagePosition.X;
        ObjComposite.TranslateY = ImagePosition.Y;
    }

Answer 1

Use RotateFree with the crop parameter set to false: RotateFree(degree, false). Also set the ImageControl Stretch property to Uniform: Stretch="Uniform".

• rene