ScaleTransform和CenterX

Question

我有以下代码

<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>

在UserControl中，我将ScaleTranform设置为1.我希望UserControl从其中心“增长”，但它从它的左上角“增长”。 CenterX和CenterY中的值不执行任何操作。我怎样才能按照我的要求进行缩放？

Answer 1

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

Answer 2

您可以像这样更改代码：

<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")添加到Canvas。这样，如果您有一个具有动态宽度和高度的容器，它可以从中心扩展而没有问题。

Answer 3

要使其从中心生长，您还必须为其边距设置动画（以您设置宽度和高度动画的速度的一半）。

Answer 4

我不久前也遇到过这个问题。我最终在每次布局更新时重新定位用户控件，以模拟基于自定义点的增长。

Answer 5

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

<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>

Answer 6

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

翻转 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>