[翻译]Silverlight 3中的tooltip

译者注：刚刚开始学习Silverlight，安装的是Silverlight3，没有找到相应的教程，只好看Silverlight2的教程，跟着Terrylee写的一步一步学Silverlight 2系列时，发现有些控件已经删除或者改变了。tooltip就是其中之一。在网上搜索的时候，看到了这篇文章介绍tooltip，看着不错，就翻译下。英语不好，大家不要见怪。

Tooltip in Silverlight 3

原文链接：Tooltip in Silverlight 3 – part 1
Tooltip in Silverlight 3 – part 2
在我们的附录中我们频繁地需要创建tool tips.Silverlight中存在的ToolTip类就是为了这些目的。我们可以更容易地创建这样的tool tips通过使用这个类。

<Button Content="Click me!" Width="100" Height="100">
    <ToolTipService.ToolTip>
        <ToolTip Width="100" Height="100">
            <TextBlock Text="123"/>
        </ToolTip>
    </ToolTipService.ToolTip>
</Button>

如我们看到的这些代码非常简单。然而，这个tool tips我们看着还有些乏味了。

Ok。让我们看看它怎样能用更有趣的形式来定义那些tips的行为。在WPF我们也可以为对象ToolTip重新定义控件模板，本质上改变它的外表。

<Button Content="Click me!" Width="100" Height="100">
    <ToolTipService.ToolTip>
        <ToolTip Width="100" Height="100">
            <ToolTip.Template>
                <ControlTemplate TargetType="ToolTip">
                    <Border CornerRadius="5" Background="Red">
                        <ContentPresenter Margin="5" Content="{TemplateBinding Content}"/>
                    </Border>
                </ControlTemplate>
            </ToolTip.Template>            
            <TextBlock Text="123"/>
        </ToolTip>
    </ToolTipService.ToolTip>
</Button>

现在在我们的帮助下显得更漂亮了。

这很明确，每次定义ControlTemplate是不愉快的动作，因此我们将定义tool tips样式。

<Button Content="Click me!" Width="100" Height="100">
    <ToolTipService.ToolTip>
        <ToolTip Width="100" Height="100">
            <ToolTip.Style>
                <Style TargetType="ToolTip">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="ToolTip">
                                <Border CornerRadius="5" Background="Red">
                                    <ContentPresenter Margin="5" Content="{TemplateBinding Content}"/>
                                </Border>
                            </ControlTemplate>                            
                        </Setter.Value>
                    </Setter>
                </Style>
            </ToolTip.Style>            
            <TextBlock Text="123"/>
        </ToolTip>
    </ToolTipService.ToolTip>
</Button>

可以把样式放到resources中，以便可以重复使用。

<UserControl.Resources>    
    <Style x:Key="TooltipStyle" TargetType="ToolTip">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToolTip">
                    <Border CornerRadius="5" Background="Red">
                        <ContentPresenter Margin="5" Content="{TemplateBinding Content}"/>
                    </Border>
                </ControlTemplate>                            
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>
 
<!-- . --->
 

<Button Content="Click me!" Width="100" Height="100">
    <ToolTipService.ToolTip>
        <ToolTip Width="100" Height="100" Style="{StaticResource TooltipStyle}">
            <TextBlock Text="123"/>
        </ToolTip>
    </ToolTipService.ToolTip>
</Button>

现在我们的tool tip外表上变得更亲切了。
然而，需要说的是，在样式上那样的移动不总是可能的，但是关于这些我们下次再讨论（译者注：下文是part2）。
最近我们讨论了如何能在Silverlight应用程序重新定义tool tip的外表。在那之后tool tip更有趣些。然而，显示的效果仍然糟透了:) 让我们使用添加动画来改变tool tip的展现。
然而，我希望立即警告的是使用动画需要使用trigger，不幸的的是trigger不可以在样式中设置。为了这个原因我们要拒绝使用样式。
因此，最简单的是我们可以在Opacity属性中定义animate。让我们这样做吧。

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

从这个例子我们可以看到在动画过程中主元素的透明度的改变。然而类似动画和标准行为只有很少的不同。让我们添加更多的动态。我们将实现tool tip以钟摆的形式展现。
为了这些目的我们将需要添加两个转换-ScaleTransform和Render Transform。那之后能改变那些转换的参数和钟摆的模式行为。

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

源代码：AnimatedTooltip.zip