Плавно изменить размер элемента UIElement - PullRequest
Новая
       4

Плавно изменить размер элемента UIElement

4 голосов
/ 15 февраля 2012

У меня есть набор Ellipse s на моем Canvas.

Для события MouseEnter на каждом из эллипсов я хотел бы изменить размер элемента, чтобы придать увеличительный види чувствую.

Чтобы сделать его более привлекательным, я хочу, чтобы изменение было постепенным (плавное / анимированное чувство).Любые советы приветствуются.

1 Ответ

4 голосов
/ 15 февраля 2012

Попробуйте что-то вроде этого: 

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