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 ничего не делают. Как я могу сделать это Scale, как я хочу?

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") к холсту. Таким образом, если у вас есть контейнер с динамической шириной и высотой, он может без проблем масштабироваться от центра.

Answer 3

Чтобы заставить его расти из центра, вам также нужно будет анимировать его поля (вдвое меньше, чем при анимации ширины и высоты).

Answer 4

Это работает для меня.Я что-то пропустил?

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

Я тоже столкнулся с этой проблемой не так давно.Я заканчивал тем, что перемещал пользовательский элемент управления при каждом обновлении макета, чтобы имитировать рост на основе пользовательских точек.