Smoothly resize an UIElement

Question

I have a set of Ellipses on my Canvas.

For the MouseEnter event on each of the ellipses, I would like to resize the element so as to give a magnifying look and feel.

To make it more attractive, I want to make the change gradual (smooth/animated feeling). Any hints are appreciated.

Answer 1

Try something like this:

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