Image can not rotate properly in LayoutTransformControl

[yll690]

Describe the bug

Put an Image control in LayoutTransformControl and set LayoutTransform to rotate 90 degree, the Image will show at a weird position.

To Reproduce

Create a new window and input these xaml.

  <Border BorderThickness="1" Width="100" Height="100" BorderBrush="Black">
    <LayoutTransformControl>
        <Image>
          <DrawingImage>
            <DrawingImage.Drawing>
              <GeometryDrawing Brush="Red" Geometry="M0,0 h10 v100 h-10 z" />
            </DrawingImage.Drawing>
          </DrawingImage>
        </Image>
      <LayoutTransformControl.LayoutTransform>
        <RotateTransform Angle="90" />
      </LayoutTransformControl.LayoutTransform>
    </LayoutTransformControl>
  </Border>

Expected behavior

The Image should be place in the vertical and horizontal center of the Border.

Avalonia version

11.2.3

OS

Windows

Additional context

Adjusting the Stretch and HorizontalAlignment affects Image's position.
Putting a Panel or other control between LayoutTransformControl and Image can solve the problem.

  <Border BorderThickness="1" Width="100" Height="100" BorderBrush="Black">
    <LayoutTransformControl>
      <Panel>
        <Image>
          <DrawingImage>
            <DrawingImage.Drawing>
              <GeometryDrawing Brush="Red" Geometry="M0,0 h10 v100 h-10 z" />
            </DrawingImage.Drawing>
          </DrawingImage>
        </Image>
      </Panel>
      <LayoutTransformControl.LayoutTransform>
        <RotateTransform Angle="90" />
      </LayoutTransformControl.LayoutTransform>
    </LayoutTransformControl>
  </Border>

[maxkatz6]

Was Transform Origin previously set?
Looks like it was transformed relatively to the top-left point (and for 45deg case it was moved bottom back into the boundaries).
Setting transform origin to center might solve the issue.

[yll690]

Hi, It's a simple demo, I didn't set other properties.
Setting RenderTransformOrigin does have effect. But it is also abnormal. I cann't find the pattern in several attempts.

[yll690]

If I set HorizontalAlignment="Left" it will become this:

[timunie]

LayoutTransform has an Origin property which you may want to set to "50%, 50%" (I think this should be acceptable syntax, havent tested it yet)

[yll690]

Unfortunately there is no Origin property in LayoutTransformControl and setting LayoutTransformControl's RenderTransformOrigin does not help. Although RotateTransform has CenterX and CenterY properties, they don't accept relative point. Setting them also makes no difference.
Anyhow, I think layout transform shouldn't calculate origin, which is a main difference between layout transform and render transform.

[timunie]

<StackPanel>
	<Slider x:Name="Rotate" Minimum="-360" Maximum="360"></Slider>
	<Border BorderThickness="1"  Width="100" Height="100" BorderBrush="Gray">
		<LayoutTransformControl HorizontalAlignment="Center">
			<Image>
				<DrawingImage>
					<DrawingImage.Drawing>
						<GeometryDrawing Brush="Red" Geometry="M0,0 h10 v100 h-10 z" />
					</DrawingImage.Drawing>
				</DrawingImage>
			</Image>
			<LayoutTransformControl.LayoutTransform>
				<RotateTransform Angle="{Binding #Rotate.Value}" />
			</LayoutTransformControl.LayoutTransform>
		</LayoutTransformControl>
	</Border>
</StackPanel>

Result:

looks okay to me.

[timunie]

Ah I see ONLY 90° is wrong, so should be a Math issue.

Tip

You may clone Avalonia and add your sample to src -> Samples -> Sandbox. From there you could debug the Math calculations. Could be a divide by zero or something.