Совсем недавно мы поговорили о том, каким образом можно переопределить внешний вид всплывающей подсказки в Silverlight приложениях. После этого подсказка стала выглядеть более интересно. Однако, эффект появления так и остается унылым :) Давайте попробуем изменить способ появления этой подсказки путем добавления анимации.
Однако, хочу сразу оговориться о том, что задание анимации требует использования триггеров, а их, к сожалению, нельзя задать из стилей. По этой причине на этот раз откажемся от использования стилей.
Итак, самое простое что мы можем анимировать – это свойство Opacity
. Давайте сделаем это.
<Button Content="Click me!" Width="100" Height="100">
<ToolTipService.ToolTip>
<ToolTip Name="RootLayout" Width="100" Height="100" >
<ToolTip.Triggers>
<EventTrigger>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="RootLayout"
Storyboard.TargetProperty="Opacity"
From="0"
To="1"
Duration="0:0:00.2"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ToolTip.Triggers>
<TextBlock Text="123"/>
</ToolTip>
</ToolTipService.ToolTip>
</Button>
Из приведенного кода видно, что в процессе анимации изменяется прозрачность главного элемента. Однако подобная анимация мало чем отличается от стандартного поведения. Давайте добавим больше динамичности. Реализуем появление подсказки в виде маятника.
Для этих целей нам потребуется добавить две трансформации – ScaleTransofrm
и RenderTransform
. После этого можно изменять параметры этих трансформаций и моделировать поведение маятника.
<DoubleAnimation Storyboard.TargetName="ScaleMe" Storyboard.TargetProperty="ScaleX" From="0" To="1" Duration="0:0:00.1"/>
<DoubleAnimation Storyboard.TargetName="ScaleMe" Storyboard.TargetProperty="ScaleY" From="0" To="1" Duration="0:0:00.1"/>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="RotateMe" Storyboard.TargetProperty="Angle">
<DoubleAnimationUsingKeyFrames.KeyFrames>
<DoubleKeyFrameCollection>
<LinearDoubleKeyFrame KeyTime="0:00:00.1" Value="-15" />
<LinearDoubleKeyFrame KeyTime="0:00:00.2" Value="15" />
<LinearDoubleKeyFrame KeyTime="0:00:00.3" Value="-11" />
<LinearDoubleKeyFrame KeyTime="0:00:00.4" Value="11" />
<LinearDoubleKeyFrame KeyTime="0:00:00.5" Value="-3" />
<LinearDoubleKeyFrame KeyTime="0:00:00.6" Value="3" />
<LinearDoubleKeyFrame KeyTime="0:00:00.7" Value="0" />
</DoubleKeyFrameCollection>
</DoubleAnimationUsingKeyFrames.KeyFrames>
</DoubleAnimationUsingKeyFrames>