UI 요소의 크기를 부드럽게 조정

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>