Как сохранить элемент в той же точке на холсте в XAML, когда он растет или уменьшается по размеру?

Question

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

<Window.Triggers> 
     <EventTrigger RoutedEvent="Window.Loaded"> 
      <EventTrigger.Actions> 
       <BeginStoryboard> 
        <Storyboard> 
         <DoubleAnimation RepeatBehavior="Forever" AutoReverse="True" From="10" To="360" Duration="0:0:3" Storyboard.TargetName="GrowMe" Storyboard.TargetProperty="Width"/> 
         <DoubleAnimation RepeatBehavior="Forever" AutoReverse="True" From="10" To="360" Duration="0:0:3" Storyboard.TargetName="GrowMe" Storyboard.TargetProperty="Height"/> 
        </Storyboard> 
       </BeginStoryboard> 
      </EventTrigger.Actions> 
     </EventTrigger> 
    </Window.Triggers> 
<Canvas Width="640" Height="480"> 
    <Ellipse Width="10" Height="10" Stroke="Red" Canvas.Left="80" Canvas.Top="31"/> 
    <Ellipse x:Name="GrowMe" Width="10" Height="10" Stroke="Cyan" Canvas.Left="205" Canvas.Top="203"/> 

Answer 1

Вы можете сделать это легко анимировать ScaleTransform внутри RenderTransform и установить RenderTransformOrigin = "0.5, 0.5".

--EDIT--

Тогда ваши изменения раскадровки к следующему:

<Storyboard> 
    <DoubleAnimation RepeatBehavior="Forever" AutoReverse="True" From="10" To="180" Duration="0:0:3" Storyboard.TargetName="GrowMe" Storyboard.TargetProperty="Width"/> 
    <DoubleAnimation RepeatBehavior="Forever" AutoReverse="True" From="10" To="180" Duration="0:0:3" Storyboard.TargetName="GrowMe" Storyboard.TargetProperty="Height"/> 
    <DoubleAnimation RepeatBehavior="Forever" AutoReverse="True" By="-180" Duration="0:0:3" Storyboard.TargetName="GrowMe" Storyboard.TargetProperty="(Canvas.Left)"/> 
    <DoubleAnimation RepeatBehavior="Forever" AutoReverse="True" By="-180" Duration="0:0:3" Storyboard.TargetName="GrowMe" Storyboard.TargetProperty="(Canvas.Top)"/> 
</Storyboard> 

Вы должны разделите свой рост в два раза и добавить его в Width/Height и вычесть его из Left/Top.

Answer 2

Вот пример кнопки, которая выполняет именно это. Обратите внимание на свойство RenderTransformOrigin.

<Button RenderTransformOrigin="0.5,0.5" Command="{Binding ClickCommand}" Cursor="Hand"> 
    <Button.RenderTransform> 
     <ScaleTransform ScaleX="1" ScaleY="1" /> 
    </Button.RenderTransform> 

    <Button.Template> 
     <ControlTemplate> 
      <Label> 
       <Label.Background> 
        <VisualBrush Visual="{Binding Path=Shape, Converter={StaticResource myTestConv}}" /> 
       </Label.Background> 
      </Label> 
     </ControlTemplate> 
    </Button.Template> 
    <Button.Style> 
     <Style TargetType="Button"> 
      <Style.Triggers> 
       <Trigger Property="IsMouseOver" Value="true"> 
        <Trigger.EnterActions> 
         <BeginStoryboard> 
          <Storyboard> 
           <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" 
               To="1.3" Duration="0:0:0.1" AccelerationRatio="0.5"/> 
           <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" 
               To="1.3" Duration="0:0:0.1" AccelerationRatio="0.5"/> 
          </Storyboard> 
         </BeginStoryboard> 
        </Trigger.EnterActions> 
        <Trigger.ExitActions> 
         <BeginStoryboard> 
          <Storyboard> 
           <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" 
               To="1" Duration="0:0:0.5"/> 
           <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" 
               To="1" Duration="0:0:0.5"/> 
          </Storyboard> 
         </BeginStoryboard> 
        </Trigger.ExitActions> 
       </Trigger> 
      </Style.Triggers> 
     </Style> 
    </Button.Style> 
    <local:TooltipServiceEx.ToolTipEx> 
     <local:ToolTipEx 
       HideToolTipTimeout="{StaticResource TooltipTimeout}" /> 
    </local:TooltipServiceEx.ToolTipEx> 
    <ToolTipService.ToolTip> 
     <ToolTip 
       Template="{StaticResource EventTooltipStyle}" /> 
    </ToolTipService.ToolTip> 
</Button>