今天来一个自定义控件,看标题就了解了,写一个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。
最近用了一下QQ音乐电台桌面版的,感觉写的效果太棒了,里面的ToolTip也很炫。