Rotate also resizes?

Question

I have this xaml

    <Image Width="240" Height="240">                
        <Image.Source>                    
            <DrawingImage>
                <DrawingImage.Drawing>
                    <DrawingGroup>
                        <DrawingGroup>
                            <DrawingGroup>
                                <DrawingGroup.Transform>
                                    <TransformGroup>
                                        <RotateTransform Angle="-15" CenterX="120" CenterY="120" />
                                        <TranslateTransform Y="-20" />
                                    </TransformGroup>
                                </DrawingGroup.Transform>

                                <ImageDrawing ImageSource="Images\pNxVK.png" Rect="0,0,240,240" />
                            </DrawingGroup>

                            <DrawingGroup.ClipGeometry>
                                <EllipseGeometry Center="120,120" RadiusX="60" RadiusY="60" />
                            </DrawingGroup.ClipGeometry>
                        </DrawingGroup>

                        <DrawingGroup>
                            <DrawingGroup>
                                <!--<DrawingGroup.Transform>
                                    <RotateTransform Angle="-15" CenterX="120" CenterY="120" />
                                </DrawingGroup.Transform>-->
                                <ImageDrawing ImageSource="Images\zUr8D.png" Rect="0,0,240,240" />
                            </DrawingGroup>                                        
                            <ImageDrawing ImageSource="Images\XPZW9.png" Rect="0,0,240,240" />
                        </DrawingGroup>                                
                    </DrawingGroup>
                </DrawingImage.Drawing>
            </DrawingImage>
        </Image.Source>
    </Image>

The result of that xaml is (Correct size)

If I uncomment the rotate transform in the xaml above i get this (Wrong size)

Answer 1

The drawings are rectangles. And a rotated rectangle has bigger bounding box than a non-rotated one, so it has to be scaled to fit the original boundaries.

You can resolve this by specifying ClipGeometry of the outermost DrawingGroup - just clip it to the original bounds.

<DrawingGroup.ClipGeometry>
    <RectangleGeometry Rect="0 0 240 240" />
</DrawingGroup.ClipGeometry>

Answer 2

If its not working when we do it in xaml, maybe it will work from code:

Xaml:

<Window x:Class="Test.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:Test"
        Title="MainWindow" Height="350" Width="525">
  <StackPanel>
    <TextBlock Text="Rotate:" />
    <Slider Minimum="-360" Maximum="360" Value="{Binding ElementName=CrossHair, Path=Rotate, Mode=TwoWay}" />
    <TextBlock Text="TranslateX:" />
    <Slider Minimum="-200" Maximum="200" Value="{Binding ElementName=CrossHair, Path=TranslateX, Mode=TwoWay}" />
    <TextBlock Text="TranslateY:" />
    <Slider Minimum="-200" Maximum="200" Value="{Binding ElementName=CrossHair, Path=TranslateY, Mode=TwoWay}" />

    <local:CrossHair Width="240" Height="240" x:Name="CrossHair" />
  </StackPanel>
</Window>

Code-behind:

namespace Test
{
  public partial class MainWindow : Window
  {
    public MainWindow()
    {
      InitializeComponent();
    }
  }

  public class CrossHair : FrameworkElement
  {
    public double TranslateX
    {
      get { return (double)GetValue(TranslateXProperty); }
      set { SetValue(TranslateXProperty, value); }
    }

    public static readonly DependencyProperty TranslateXProperty = DependencyProperty.Register("TranslateX", typeof(double), typeof(CrossHair), new UIPropertyMetadata(0.0, PropertyChangedCallback));

    public double TranslateY
    {
      get { return (double)GetValue(TranslateYProperty); }
      set { SetValue(TranslateYProperty, value); }
    }

    public static readonly DependencyProperty TranslateYProperty = DependencyProperty.Register("TranslateY", typeof(double), typeof(CrossHair), new UIPropertyMetadata(-20.0, PropertyChangedCallback));

    public double Rotate
    {
      get { return (double)GetValue(RotateProperty); }
      set { SetValue(RotateProperty, value); }
    }

    // This will result in an OnRender call.
    public static void PropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
      FrameworkElement element = d as FrameworkElement;
      if (element != null)
        element.InvalidateVisual();
    }

    public static readonly DependencyProperty RotateProperty = DependencyProperty.Register("Rotate", typeof(double), typeof(CrossHair), new UIPropertyMetadata(-15.0, PropertyChangedCallback));

    protected override void OnRender(DrawingContext ctx)
    {
      base.OnRender(ctx);

      double renderWidht = this.ActualWidth;
      double renderHeight = this.ActualHeight;

      //Debug Rectangle, you should comment it.
      //ctx.DrawRectangle(Brushes.Black, new Pen(Brushes.Black, 1), new Rect(0, 0, renderWidht, renderHeight));

      // First Layer: clipped background.
      ctx.PushClip(new EllipseGeometry(new Point(renderWidht / 2.0, renderHeight / 2.0), renderWidht / 4.0, renderHeight / 4.0));
      ctx.PushTransform(new TransformGroup()
                            {
                              Children = new TransformCollection(2)
                                {
                                  new TranslateTransform(TranslateX, TranslateY),
                                  new RotateTransform(Rotate, renderWidht / 2.0, renderHeight / 2.0)
                                }
                            });

      ctx.DrawImage(new BitmapImage(new Uri("pack://application:,,,/Images/pNxVK.png")), new Rect(0, 0, renderWidht, renderHeight));
      ctx.Pop();// Pop the clipping
      ctx.Pop();// Pop the translate

      // 2nd Layer:
      ctx.DrawImage(new BitmapImage(new Uri("pack://application:,,,/Images/XPZW9.png")), new Rect(0, 0, renderWidht, renderHeight));
      // 3rd Layer:
      ctx.DrawImage(new BitmapImage(new Uri("pack://application:,,,/Images/zUr8D.png")), new Rect(0, 0, renderWidht, renderHeight));
    }
  }
}