ScaleTransform in LayoutTransform not working but works with RenderTransform

Question

I am trying to do two things in my application.

1. Zoom Image

Able to do with RenderTransform. but need to achieve in LayoutTransform to enable Scrollviewer.

xaml

working.

 <Image.RenderTransform>
      <ScaleTransform ScaleX="{Binding ScaleX}" ScaleY="{Binding ScaleY}" />
 </Image.RenderTransform>

Not Working

<Image.LayoutTransform>
     <ScaleTransform ScaleX="{Binding ScaleX}" ScaleY="{Binding ScaleY}" />
</Image.LayoutTransform>

2. Rotate Image

works with both ScaleTransform and RenderTransform but need it with ScaleTransform to obtain ScrollViewer

Problem is in ScaleTransform with LayoutTransform

<Image.LayoutTransform>
    <TransformGroup> 
       <ScaleTransform ScaleX="{Binding ScaleX}" ScaleY="{Binding ScaleY}" />
       <RotateTransform Angle="{Binding RotateAngle}"/>
    </TransformGroup>
</Image.LayoutTransform>

Not able too achieve both ScaleTransform and RotateTransform with ScrollViewer

I have tried with Canvas

xaml

<Canvas.LayoutTransform>
   <TransformGroup> 
      <ScaleTransform ScaleX="{Binding ScaleX}" ScaleY="{Binding ScaleY}" />
      <RotateTransform Angle="{Binding RotateAngle}"/>
   </TransformGroup>
</Canvas.LayoutTransform>

Different behavior of rotate but able to achieve both functionality working but ScrollViewer not scrolling.

Rotate Behavior for canvas

-

Tried doing the same with ViewBox

rotate works with ScrollViewer Zoom not working.

Full Code below

<ScrollViewer>
    <Viewbox  RenderTransformOrigin="0.5,0.5" Height="Auto" Width="Auto" ScrollViewer.CanContentScroll="True">
         <Viewbox.LayoutTransform>
                <TransformGroup> 
                    <ScaleTransform ScaleX="{Binding ScaleX}" ScaleY="{Binding ScaleY}" />
                    <RotateTransform Angle="{Binding RotateAngle}"/>
                </TransformGroup>
            </Viewbox.LayoutTransform>
        <Image RenderTransformOrigin="0.5,0.5" >               
            <Image.Source>                    
                <BitmapImage UriSource="{Binding ImagePath}" ScrollViewer.CanContentScroll="True"></BitmapImage>
            </Image.Source>
        </Image>
    </Viewbox>
 </ScrollViewer>

Anyone can help me with suggestions.

Worked solution for me suggested by 'GazTheDestroyer'

XAML

<Image RenderTransformOrigin="0.5,0.5" Stretch="None" >
            <Image.LayoutTransform>
                <TransformGroup>
                  <ScaleTransform ScaleX="{Binding ScaleX}" ScaleY="{Binding ScaleY}" />
                  <RotateTransform Angle="{Binding RotateAngle}"/>
               </TransformGroup>
           </Image.LayoutTransform>
         <Image.Source>                    
           <BitmapImage UriSource="{Binding ImagePath}" ScrollViewer.CanContentScroll="True"></BitmapImage>
         </Image.Source>
 </Image>

Answer 1

Try adding Stretch="None" to your Image tag, or failing that supply an explicit height and width.

In certain panels WPF will automatically stretch the image to the available space in the panel, which will make your scale transform redundant when it's part of the layout process.