WPF:自定义ToolTipControl

今天来一个自定义控件，看标题就了解了，写一个ToolTip自定义控件。先来看下效果图。

效果就是鼠标放上去，会从上面透明渐显一个Callout，鼠标离开反效果。

下面开始动手。

新建一个自定义控件，注意是自定义控件，不是用户控件。

起个名字：ToolTipControl。

然后写两个依赖属性：

  public string ToolTipText
        {
            get { return (string)GetValue(ToolTipTextProperty); }
            set { SetValue(ToolTipTextProperty, value); }
        }

        // Using a DependencyProperty as the backing store for ToolTipText.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty ToolTipTextProperty =
            DependencyProperty.Register("ToolTipText", typeof(string), typeof(ToolTipControl), new PropertyMetadata(null));



        public object Content
        {
            get { return (object)GetValue(ContentProperty); }
            set { SetValue(ContentProperty, value); }
        }

        // Using a DependencyProperty as the backing store for Content.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty ContentProperty =
            DependencyProperty.Register("Content", typeof(object), typeof(ToolTipControl), new PropertyMetadata(null));

一个是用来显示提示文字，另一个是用来添加内容的，上图中可以看出我是添加进去了图片。

好，开始写前台，在自动生成的Generic.xaml文件中

<Style TargetType="{x:Type local:ToolTipControl}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:ToolTipControl}">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="40"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <ed:Callout x:Name="tooltipBorder" Grid.Row="0" AnchorPoint="0.5,1.2" CalloutStyle="RoundedRectangle" Fill="Gray" Height="22" Stroke="Gray" Opacity="0">
                            <!--#FF2E2E2E-->
                            <ed:Callout.RenderTransform>
                                <TranslateTransform x:Name="translate" Y="-10"/>
                            </ed:Callout.RenderTransform>
                            <ed:Callout.Content>
                                <TextBlock TextAlignment="Center" VerticalAlignment="Center" FontSize="15" FontWeight="Bold" Foreground="#FF181818" TextTrimming="WordEllipsis" Text="{TemplateBinding ToolTipText}">
                                    <TextBlock.Effect>
                                        <DropShadowEffect BlurRadius="0" Color="LightGray" Direction="-90" Opacity="0.6" ShadowDepth="1" />
                                    </TextBlock.Effect>
                                </TextBlock>
                            </ed:Callout.Content>
                        </ed:Callout>
                        <ContentControl  Grid.Row="1" Content="{TemplateBinding Content}"/>
                    </Grid>
                    <ControlTemplate.Resources>
                        <Storyboard x:Key="ToolTipShow">
                            <DoubleAnimationUsingKeyFrames Duration="0:0:0.3" 
                                                           Storyboard.TargetName="tooltipBorder"
                                                           Storyboard.TargetProperty="Opacity">
                                <SplineDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Duration="0:0:0.3" 
                                                           Storyboard.TargetName="translate"
                                                           Storyboard.TargetProperty="Y">
                                <SplineDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                        <Storyboard x:Key="ToolTipHide">
                            <DoubleAnimationUsingKeyFrames Duration="0:0:0.3" 
                                                           Storyboard.TargetName="tooltipBorder"
                                                           Storyboard.TargetProperty="Opacity">
                                <SplineDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Duration="0:0:0.3" 
                                                           Storyboard.TargetName="translate"
                                                           Storyboard.TargetProperty="Y">
                                <SplineDoubleKeyFrame KeyTime="0:0:0.3" Value="-10"/>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </ControlTemplate.Resources>
                    <ControlTemplate.Triggers>
                        <EventTrigger RoutedEvent="ContentControl.MouseEnter">
                            <BeginStoryboard Storyboard="{StaticResource ToolTipShow}"/>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="ContentControl.MouseLeave">
                            <BeginStoryboard Storyboard="{StaticResource ToolTipHide}"/>
                        </EventTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

这里用到了Blend4里面自带的控件。我懒得去用Path画了。

一个Callout，初始的TranslateTransform的X为-10，也就是在本来位置上方。Opacity 也为0。

Callout的Content为一个TextBlock。用来显示ToolTip。

里面的

<TextBlock.Effect>
          <DropShadowEffect BlurRadius="0" Color="LightGray" Direction="-90" Opacity="0.6" ShadowDepth="1" />
</TextBlock.Effect>

来创造一个凹进去的效果。

下面一个

<ContentControl  Grid.Row="1" Content="{TemplateBinding Content}"/> 用来绑定显示内容，Object类型，可以随意。

资源里有两个事件动画，ContentControl.MouseEnter 和 ContentControl.MouseLeave。

来操作Opacity 和 TranslateTransform。

动画很简单，回到MainWindow。

这里我用了我前面一篇随笔的内容：仿WIN7窗体打开关闭效果，在这里把代码补上。

OK，在Window.Resources，定义一下Visual

<SolidColorBrush Color="Gold" x:Key="bg"/>

        <Canvas x:Key="Visual" Background="{StaticResource bg}" MouseLeftButtonDown="Canvas_MouseLeftButtonDown" Width="183" Height="271">
            <local:ToolTipControl ToolTipText="Camera" Canvas.Left="-2" Canvas.Top="-44.667" Height="108.667" Width="65">
                <local:ToolTipControl.Content>
                    <Image Source="Images/Camera.png" Width="60" Height="60"/>
                </local:ToolTipControl.Content>
            </local:ToolTipControl>
            <local:ToolTipControl ToolTipText="iBooks" Canvas.Left="60" Canvas.Top="-44.667" Height="108.667" Width="63">
                <local:ToolTipControl.Content>
                    <Image Source="Images/iBooks.png" Width="60" Height="60"/>
                </local:ToolTipControl.Content>
            </local:ToolTipControl>
            <local:ToolTipControl ToolTipText="iTunes" Canvas.Left="121" Canvas.Top="-44.667" Height="108.667" Width="63">
                <local:ToolTipControl.Content>
                    <Image Source="Images/iTunes.png" Width="60" Height="60"/>
                </local:ToolTipControl.Content>
            </local:ToolTipControl>
            <Image Canvas.Left="0" Canvas.Top="86" Height="184" x:Name="image1" Stretch="Fill" VerticalAlignment="Stretch" Source="Images/jb.jpg" Width="183" />
        </Canvas>

代码很简单，效果还不错。奉上DEMO。

ToolTipControl

最近用了一下QQ音乐电台桌面版的，感觉写的效果太棒了，里面的ToolTip也很炫。