Tooltip in Silverlight 3 – part 2

Recently we have talked about how it is possible to redefine appearance of the tool tip in Silverlight applications. The tool tip has taken more interesting form after that. However, the effect of show and remains sad :) Let's try change a way of show of this tool tip by animation addition.

However, I wish to warn at once that the task of animation demands use of triggers, and them, unfortunately, it is impossible to set from styles. For this reason we will refuse use of styles.

So, most simple that we can animate it is Opacity property. Let's make it.

<Button Content="Click me!" Width="100" Height="100">
    <ToolTipService.ToolTip>
        <ToolTip Name="RootLayout" Width="100" Height="100" Style="{StaticResource TooltipStyle}">
            <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>

From this example you can see that in the course of animation the transparency of the main element changes. However similar animation a little than differs from standard behaviour. Let's add more dynamics. We will implement a showing of the tool tip in the form of a pendulum.

For these purposes we will need to add two transformations - ScaleTransofrm and RenderTransform. After that it is possible to change parametres of these transformations and to model behaviour of a pendulum.

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

Source code:

No Comments