Wpf 如何在XAML中使一个项目在其大小增长或收缩时保持在画布上的同一点上?

Wpf 如何在XAML中使一个项目在其大小增长或收缩时保持在画布上的同一点上?,wpf,silverlight,xaml,triggers,eventtrigger,Wpf,Silverlight,Xaml,Triggers,Eventtrigger,我有下面的xaml,它演示了一个大小有变有变的圆。当动画运行时,我希望我的圆的中心点保持在画布上 <Window.Triggers> <EventTrigger RoutedEvent="Window.Loaded"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard>

我有下面的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"/> 

您可以轻松地在RenderTransform中设置ScaleTransform动画,并将RenderTransformMorigin设置为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>

你需要将你的生长分成两半,加上宽度/高度,再从左/上减去它。

下面是一个按钮的例子,它正好做到了这一点。请注意RenderTransferMorigin属性

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

这将使其居中,但会更改圆的外观。椭圆的笔划随着圆的尺寸增大而变粗。我希望笔划保持不变。这将使笔划居中,但会改变圆的外观。椭圆的笔划随着圆的尺寸增大而变粗。我希望笔划保持不变。