3

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
Abin
  • 2,868
  • 1
  • 23
  • 59
KingSora
  • 39
  • 1
  • 6
  • `RenderTransformOrigin="0.5,0.5" ` are you sure this change the position ? – Abin Aug 20 '15 at 13:20
  • 2
    A example: I have a button( Height = 100, Width = 100 ): The current RenderTransformOrigin is set at (0, 0). Now I am applying a RotationTransform with the Angle of 90. The visual Position of the Button shifts (X -100, Y 0) because of the Rotation. In the next step I am changing the RenderTransformOrigin To (0.5, 0.5), and the whole buttons shifts to its old position (X 0, Y 0). And Exactly this shift is what I dont want, because the old Transformation is lost. – KingSora Aug 20 '15 at 13:45

1 Answers1

0

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.

Abin
  • 2,868
  • 1
  • 23
  • 59
  • I've posted a comment on my first post... maybe this is a good example! – KingSora Aug 20 '15 at 13:46
  • can you check your `ScaleTransform` `X` and `Y` to 1 – Abin Aug 20 '15 at 13:54
  • I am never applying a ScaleTransform? – KingSora Aug 20 '15 at 13:57
  • This cant work, because you are applying a LayoutTransform. I searching for a solution for RenderTransform. – KingSora Aug 20 '15 at 14:11
  • Now change the RenderTransformOrigin to anything else (i.e. 0.5, 0.5) and you will see the buttons shifts back. – KingSora Aug 20 '15 at 14:16
  • @KingSora keep your RenderTransformOrigin to `RenderTransformOrigin="0.5,0.5"` so you wont view any change to the location. – Abin Aug 20 '15 at 14:20
  • This is not what I want to achieve. The first shift is correct, but the scond is wrong because this shift is done by the RenderTransformOrigin change. – KingSora Aug 20 '15 at 14:22
  • @KingSora Check my edit. and please share what kind of behavior you are looking so that we can have a look. location change is showing for you because of RenderTransformOrigin to help further need your expectation on behavior. – Abin Aug 20 '15 at 14:30