平滑调整 UIElement 的大小

Question

我的 Canvas 上有一组 Ellipse。

对于每个椭圆上的 MouseEnter 事件，我想调整元素的大小，以提供放大的外观和感觉。

为了使其更具吸引力，我想让变化逐渐进行（平滑/动画的感觉）。任何提示表示赞赏。

Answer 1

尝试这样的事情：

    <Style x:Key="ScaleStyle" TargetType="{x:Type FrameworkElement}">
        <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
        <Setter Property="RenderTransform">
            <Setter.Value>
                <ScaleTransform />
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <EventTrigger RoutedEvent="MouseEnter">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation To="1.2" Duration="0:0:0.2"
                                         Storyboard.TargetProperty="RenderTransform.ScaleX" />
                        <DoubleAnimation To="1.2" Duration="0:0:0.2"
                                         Storyboard.TargetProperty="RenderTransform.ScaleY" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
            <EventTrigger RoutedEvent="MouseLeave">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation To="1.0" Duration="0:0:0.1"
                                         Storyboard.TargetProperty="RenderTransform.ScaleX" />
                        <DoubleAnimation To="1.0" Duration="0:0:0.1"
                                         Storyboard.TargetProperty="RenderTransform.ScaleY" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Style.Triggers>
    </Style>
</Window.Resources>
<Canvas>
    <Ellipse Style="{StaticResource ScaleStyle}" Canvas.Left="100" Canvas.Top="100"
             Width="200" Height="100" Stroke="Black" StrokeThickness="2" Fill="Transparent" />
</Canvas>