Как сохранить элемент в той же точке на холсте в 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

Вот пример кнопки, которая делает именно это. Обратите внимание на свойство 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>

Answer 2

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

- РЕДАКТИРОВАТЬ -

Затем измените раскадровку следующим образом:

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