wpf - ScaleTransform and CenterX

Question

I have the following code

<Canvas Width="800" Height="600">
    ...
    <local:UpgradeLandDialog x:Name="upgradeDialog" Canvas.Left="250" Canvas.Top="200" HorizontalAlignment="Center" VerticalAlignment="Center" Opacity="0">
        <local:UpgradeLandDialog.LayoutTransform>
            <ScaleTransform ScaleX="0" ScaleY="0" CenterX="400" CenterY="300"/>
        </local:UpgradeLandDialog.LayoutTransform>
    </local:UpgradeLandDialog>
</Canvas>

In the UserControl I animate the ScaleTranform to 1. I want UserControl to "grow" from its center, but it "grows" from the upper left corner of it. The values in CenterX and CenterY do nothing. How can I make it Scale as I want?

score 18 · Accepted Answer

18

您可以RenderTransformOrigin="0.5,0.5"在要设置动画的控件上使用。

于 2011-05-20T09:42:48.757 回答

score 3 · Accepted Answer

您可以像这样更改代码：

<Canvas Width="800" Height="600" RenderTransformOrigin="0.5,0.5">
    <local:UpgradeLandDialog x:Name="upgradeDialog" Canvas.Left="250" Canvas.Top="200" HorizontalAlignment="Center" VerticalAlignment="Center" Opacity="0">
        <local:UpgradeLandDialog.LayoutTransform>
            <ScaleTransform ScaleX="0" ScaleY="0"/>
        </local:UpgradeLandDialog.LayoutTransform>
    </local:UpgradeLandDialog>
</Canvas>

删除(CenterX="400" CenterY="300")并添加(RenderTransformOrigin="0.5,0.5")到画布。这样，如果您有一个具有动态宽度和高度的容器，它就可以毫无问题地从中心缩放。

score 1 · Accepted Answer

To make it grow from its center, you'll have to animate its margins as well (at half the rate at which you animate the width and height).

score 0 · Accepted Answer

I ran into this problem not too long ago as well. I ended up repositioning the user control at every layout update to simulate a custom point based growth.

score 0 · Accepted Answer

这对我有用。我错过了什么？

<Rectangle StrokeThickness="1" Stroke="Black" Width="200" Height="200">    
  <Rectangle.RenderTransform>
    <ScaleTransform 
       ScaleX="{Binding ElementName=slider, Path=Value}" 
       ScaleY="{Binding ElementName=slider, Path=Value}"
       CenterX ="100" CenterY="100"/>
  </Rectangle.RenderTransform>
</Rectangle>

score 0 · Accepted Answer

尽管这是一篇旧帖子，但我想我会分享我的发现，因为我花了很长时间才弄清楚这个相当简单的解决方案。

翻转 y 轴很容易，但我无法让 CenterX 和 CenterY 工作。我真的需要能够将原点设置在我想要的任何位置。

解决方案：嵌套画布。

<Canvas HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
    <Canvas Canvas.Left="{Binding MyOriginLeft}" Canvas.Bottom="{Binding MyOriginBottom}">
        <Canvas.LayoutTransform>
            <ScaleTransform ScaleX="1" ScaleY="-1"/>
        </Canvas.LayoutTransform>

        <!-- This now does what you expect it to do, independent of position of origin -->
        <Line X1="10" Y1="20" X2="30" Y2="40" Stroke="Black" StrokeThickness="1"/>
    </Canvas>
</Canvas>

wpf - ScaleTransform and CenterX

6 回答 6

Related

Reference