Tooltip в Silverlight 3 – часть 2

Совсем недавно мы поговорили о том, каким образом можно переопределить внешний вид всплывающей подсказки в 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>