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也很炫。