ScaleTransform 和 CenterX

发布于 2024-09-02 08:01:31 字数 635 浏览 7 评论 0原文

我在 UserControl 中有以下代码，

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

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

原文

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

任谁 2024-09-09 08:01:31

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

回复收藏 0 原文

赠佳期 2024-09-09 08:01:31

您可以像这样更改代码：

<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") 添加到画布。这样，如果您有一个具有动态宽度和高度的容器，它可以毫无问题地从中心缩放。

You can change your code like this:

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

Remove (CenterX="400" CenterY="300") and add (RenderTransformOrigin="0.5,0.5") to the Canvas. This way if you have a container with dynamic width and height, it can scale from the center without problem.

回复收藏 0 原文

傻比既视感 2024-09-09 08:01:31

为了使其从中心开始增长，您还必须为其边缘设置动画（宽度和高度动画速率的一半）。

回复收藏 0 原文

谁人与我共长歌 2024-09-09 08:01:31

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

回复收藏 0 原文

倾城月光淡如水﹏ 2024-09-09 08:01:31

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

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

This does work for me. Did I miss something?

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

回复收藏 0 原文

万人眼中万个我 2024-09-09 08:01:31

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

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

Even though this is an old post, I thought I'd share my findings, since it took me way too long to figure out this fairly simple solution.

Flipping the y-axis was easy, but I couldn't get CenterX and CenterY working. I really needed to be able to set the origin at any position I wanted.

Solution: nested canvasses.

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

回复收藏 0 原文

~没有更多了~