C# WPF 如何更改 RenderTransformOrigin 但保留位置？

Question

我想知道如何在不更改其位置的情况下更改元素的RenderTransformOrigin。我注意到更改RenderTransformOrigin 会影响元素位置。

如何计算更改RenderTransformOrigin前后元素位置之间的X和Y值？

XAML

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

Answer 1

RenderTransformOrigin

MSDN 说， 获取或设置 System.Windows.UIElement.RenderTransform 声明的任何可能的渲染变换的中心点，相对于元素的边界。这是一个依赖属性。

所以肯定不会对位置产生任何影响。位置可以根据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>

在 ViewModel 中将 X 和 Y 设置为 1 即：X = Y = 1;

我试过这对更改RenderTransformOrigin的位置没有影响

MSDN

RenderTransformOrigin 对 Point 结构值的使用有点不标准，因为 Point 不代表坐标系中的绝对位置。相反，0 到 1 之间的值被解释为每个 x,y 轴中当前元素范围的一个因子。例如，(0.5,0.5) 将导致渲染变换以元素为中心，或者 (1,1) 将渲染变换放置在元素的右下角。 NaN 不是一个可接受的值。 超过 0 和 1 的值也被接受，并且会产生更多非常规的变换效果。例如，如果您将 RenderTransformOrigin 设置为 (5,5)，然后应用 RotateTransform，则旋转点将远远超出元素本身的边界。 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.

负点值类似，这些将超出左上边界。 Render transforms do not affect layout, and are typically used to animate or apply a temporary effect to an element.