流畅地调整UI元素的大小

Question

我在我的Canvas上有一组Ellipse。

对于每个椭圆形的MouseEnter事件，我想重新调整元素大小，以使其具有放大的外观和感觉。

为了使它更有吸引力，我希望使变化逐渐进行（平滑/动画感）。任何提示都将不胜感激。

- olix20

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>

- Clemens

---

谢谢@Clemens。您能指导如何以编程方式实现吗？ - olix20

好的，我在XAML中定义了样式。然后通过UIElement.Style = (Style)FindResource("ScaleStyleStyle");应用它。 - olix20