当项目尺寸增大或缩小时，如何在 XAML 中将项目保持在 Canvas 上的同一点？

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

您可以轻松地在 RenderTransform 内设置 ScaleTransform 动画并设置 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>

您需要将增长分成两半并将其添加到宽度/高度并从左/顶部中减去它。