C# WPF How to change RenderTransformOrigin but keep location?

5.4k Views Asked by At

I would like to know how to change RenderTransformOrigin of an element without changing its location. I've noticed that changing the RenderTransformOrigin will affect the element location.

How can I calculate the X and Y Value between the element location before and after changing the RenderTransformOrigin?

XAML

<Button 
   Content="Button" 
   Height="100" 
   Width="100" 
   RenderTransformOrigin="0, 0"> 
          <Button.RenderTransform> 
                 <TransformGroup> 
                        <ScaleTransform/> 
                        <SkewTransform/> 
                        <RotateTransform Angle="90"/> 
                        <TranslateTransform/> 
                 </TransformGroup> 
          </Button.RenderTransform> 
   </Button
1

There are 1 best solutions below

8
On

RenderTransformOrigin

MSDN says, Gets or sets the center point of any possible render transform declared by System.Windows.UIElement.RenderTransform, relative to the bounds of the element. This is a dependency property.

so for sure there wont be any effect on location. location can be affected based on TranslateTransform

<TranslateTransform  X="{Binding LX}" Y="{Binding LY}" />


<Button Content="Hello" Width="100" Height="100" RenderTransformOrigin=".5,.5" BorderThickness="2" BorderBrush="Black">
    <Button.LayoutTransform>
        <TransformGroup>
            <ScaleTransform 
                            ScaleX="{Binding X}" 
                            ScaleY="{Binding Y}"/>
            <RotateTransform 
                            Angle="{Binding RotateAngle}"/>
        </TransformGroup>
    </Button.LayoutTransform>
</Button>

set X and Y to 1 ie: X = Y = 1; in your ViewModel

I have tried this has no effect on location changing the RenderTransformOrigin

MSDN

RenderTransformOrigin has a somewhat nonstandard use of the Point structure value, in that the Point does not represent an absolute location in a coordinate system. Instead, values between 0 and 1 are interpreted as a factor for the range of the current element in each x,y axis. For example, (0.5,0.5) will cause the render transform to be centered on the element, or (1,1) would place the render transform at the bottom right corner of the element. NaN is not an accepted value. Values beyond 0 and 1 are also accepted, and will result in more unconventional transform effects. For instance, if you set RenderTransformOrigin to be (5,5), and then apply a RotateTransform, the rotation point will be well outside the bounds of the element itself. The transform will spin your element around in a big circle that originates beyond bottom right. The origin might be somewhere inside its parent element and could possibly be possibly out of frame or view.

Negative point values are similar, these will go beyond the top left bounds. Render transforms do not affect layout, and are typically used to animate or apply a temporary effect to an element.