WPF中ToolTip的自定义

摘要:
ToolTip或PopUp控件通常用于界面中。如何自定义工具提示?
ToolTip或者PopUp这个控件在做界面时会经常用到。如何对ToolTip进行自定义呢?

1.首先自定义tooltip的controlTemplate,完全清除系统默认效果, 如下:

            <ControlTemplatex:Key="TooltipTemplate"TargetType="ToolTip">
               <ContentPresenterx:Name="contentPresenter"Height="{TemplateBindingHeight}"Width="{TemplateBindingWidth}"ContentTemplate="{TemplateBindingContentTemplate}" ></ContentPresenter>
           </ControlTemplate>

2.自定义tooltip的contentTemplate, 这样可以专注于tooltip的界面呈现, 而不关心tooltip要显示的字符串, 如下:


                <Stylex:Key="ToolTipStyle"TargetType="ToolTip">
                     <SetterProperty="IsOpen"Value="False">
               </Setter>
               
               <SetterProperty="ContentTemplate">
                   <Setter.Value>
                       <DataTemplate>
                           <Borderx:Name="errorBorder"Background="#CC595959"BorderBrush="#99000000"BorderThickness="1"CornerRadius="3"HorizontalAlignment="Stretch"VerticalAlignment="Stretch"Margin="0"MaxWidth="320">
                               <Border.Effect>
                                   <DropShadowEffectBlurRadius="4"ShadowDepth="0"/>
                               </Border.Effect>
                               <Grid>
                                   <Grid.ColumnDefinitions>
                                       <ColumnDefinitionWidth="Auto"/>
                                       <ColumnDefinitionWidth="*"/>
                                   </Grid.ColumnDefinitions>
                                   <BorderMargin="16,16,8,16"VerticalAlignment="Top">
                                       <Pathx:Name="path1"Grid.ColumnSpan="1"Data="M9.0789473,12.870737 L10.927632,12.870737 10.927632,14.5 9.0789473,14.5 z M9.0000001,5.9999999 L11,5.9999999 11,7.994543 10.526316,12.308322 9.4802633,12.308322 9.0000001,7.994543 z M9.9647158,1.8074455 C9.5912184,1.7923756 9.2860216,2.1402843 9.2860216,2.1402845 9.2860216,2.1402843 2.5977592,14.8926 2.2227221,15.46075 1.8476844,16.028899 2.5562553,16.218284 2.5562553,16.218284 2.5562553,16.218284 16.2035,16.218284 17.18278,16.218284 18.162063,16.218284 17.870029,15.460751 17.870029,15.460751 17.870029,15.460751 11.056506,2.8352754 10.494117,2.1197443 10.31837,1.8961406 10.134488,1.8142953 9.9647158,1.8074455 z M9.9331295,0.00021409988 C10.317457,0.0076069832 10.762559,0.20740509 11.244278,0.77299643 12.785778,2.5828881 19.97391,16.249695 19.97391,16.249695 19.97391,16.249695 20.318179,17.954408 18.505573,17.985971 16.692966,18.017535 1.5982747,17.985971 1.5982747,17.985971 1.5982747,17.985971 -0.27740097,18.206807 0.03512764,16.028899 0.3476572,13.850991 8.5362361,0.89893103 8.536236,0.8989315 8.5362361,0.89893103 9.0876089,-0.016049385 9.9331295,0.00021409988 z"Height="17"Stretch="Fill"Width="20"Visibility="Visible"Fill="Red"/>
                                   </Border>
                                   <TextBlockx:Name="textBlock"Text="{TemplateBindingContent}"Margin="0,14,10,14"FontSize="14"Grid.Column="1"TextWrapping="Wrap"Foreground="Red"/>
                               </Grid>
                           </Border>
                       </DataTemplate>
                   </Setter.Value>
               </Setter>

               <Style.Triggers>
                   <TriggerProperty="IsOpen"Value="True">
                       <Trigger.EnterActions>
                           <BeginStoryboard>
                               <Storyboard>
                                   <ObjectAnimationUsingKeyFramesStoryboard.TargetProperty="Visibility"Duration="0:0:3">
                                       <DiscreteObjectKeyFrameKeyTime="0:0:0">
                                           <DiscreteObjectKeyFrame.Value>
                                               <Visibility>Visible</Visibility>
                                           </DiscreteObjectKeyFrame.Value>
                                       </DiscreteObjectKeyFrame>
                                       <DiscreteObjectKeyFrameKeyTime="0:0:3">
                                          <DiscreteObjectKeyFrame.Value>
                                               <Visibility>Hidden</Visibility>
                                          </DiscreteObjectKeyFrame.Value>
                                       </DiscreteObjectKeyFrame>
                                   </ObjectAnimationUsingKeyFrames>
                               </Storyboard>
                           </BeginStoryboard>
                       </Trigger.EnterActions>
                   </Trigger>
               </Style.Triggers>
           </Style>

3.应用Tooltip的style,如下:

     <ButtonContent="TestButton">
           <Button.ToolTip>
               <ToolTipStyle="{DynamicResourceToolTipStyle}" Content="This is a button"></ToolTip>
           </Button.ToolTip>
       </Button>

4.以上style使用时的注意事项:

因为Animation的设置值优先于本地设置值,所以会出现ToolTip在动画结束时永远隐藏。
因此在需要打开tooltip时,首先要在动画开始时设置Visibility为Visible,第二要触发IsOpen=True则必须先IsOpen=False, 因为在Tooltip隐藏后并没有设置IsOpen=False。

代码如下:
                        _toolTip.Style = ToolTipStyle;
                        _toolTip.PlacementTarget = this.AssociatedObject;
                        _toolTip.Placement = PlacementMode.Bottom;
                        _toolTip.Content = toolTipText;

                        //must set false first to trigger storyboard
                        _toolTip.IsOpen = false;
                        _toolTip.IsOpen = true;
                        _toolTip.StaysOpen = false;


5.ToolTip的bug

对于ToolTip的显示延迟、显示时间长度、是否保持显示、显示时的位置等等,通用的做法都是通过ToolTipService来进行统一设置。比如:

      ToolTipService.InitialShowDelay="1000"
      ToolTipService.ShowDuration="7000"
      ToolTipService.BetweenShowDelay="2000"
      ToolTipService.Placement="Right" 
      ToolTipService.PlacementRectangle="50,0,0,0"
      ToolTipService.HorizontalOffset="10" 
      ToolTipService.VerticalOffset="20"
      ToolTipService.HasDropShadow="false"
      ToolTipService.ShowOnDisabled="true" 
      ToolTipService.IsEnabled="true"


但是,我发现在TextBox的PreviewInput事件里去弹出tooltip时, 以上的ToolTipService设置并没有起到效果,Tooltip的弹出位置和显示时间还是默认的, 即跟随鼠标显示,默认5s。
这个时候就需要对ToolTip的相关属性进行设置。

 _toolTip.Style = ToolTipStyle;
            _toolTip.PlacementTarget = this.AssociatedObject;
            _toolTip.Placement = PlacementMode.Bottom;

当然,当我们toolTip和ToolTipService都设置相关属性时, ToolTipService的设置优先。




免责声明:文章转载自《WPF中ToolTip的自定义》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇数据可视化之热力图Android快速开发系列 10个常用工具类下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

WPF基础到企业应用系列6——布局全接触

转自:http://www.cnblogs.com/KnightsWarrior/archive/2010/08/02/1790131.html 2010-08-02 05:21        by        圣殿骑士,        11455阅读,        89评论,        收藏,        编辑 一. 摘要   首先很高兴这个...

WPF中的图像处理简介

和Winform中的GDI+相比,WPF提供了一组新的API用于显示和编辑图像。新API特点如下: 适用于新的或专用图像格式的扩展性模型。 对包括位图 (BMP)、联合图像专家组 (JPEG)、可移植网络图形 (PNG)、标记图像文件格式 (TIFF)、Microsoft Windows Media 照片、图形交换格式 (GIF) 和图标 (.ico)...

在WPF中如何使用RelativeSource绑定

在WPF绑定的时候,指定绑定源时,有一种办法是使用RelativeSource。 这种办法的意思是指当前元素和绑定源的位置关系。 第一种关系: Self 举一个最简单的例子:在一个StackPanel中,有一个TextBlock。 <TextBlock FontSize="18" FontWeight="Bold" Margin="10"...

WPF如何实现类似iPhone界面切换的效果(转载)

WPF如何实现类似iPhone界面切换的效果 (version .1) 转自:http://blog.csdn.net/fallincloud/article/details/6968764 在论坛上见到有人提出了这个问题(WPF实现点击横向切换界面) 我简单地做了个Sample。 效果图1: 效果图2: 设计思路 将这多个界面放入一个Orienta...

手把手教你 用 wpf 制作metro ProgressRing (Windows8 等待动画)

效果图: 还在羡慕metro的ProgressRing吗? wpf 也可以拥有 首先说下思路, 一共6个点围绕一直圆转,所以需要使用rotation动画 并且一直转下去。 那么下面的问题就好解决了。 首先是xaml 部分 我们需要实现旋转动画: 所以要用到这个: [html]view plaincopyprint? <DoubleAnima...

WPF调用图片路径,或资源图片

一、加载本项目的图片WPF引入了统一资源标识Uri(Unified Resource Identifier)来标识和访问资源。其中较为常见的情况是用Uri加载图像。Uri表达式的一般形式为:协议+授权+路径协议:pack://授权:有两种。一种用于访问编译时已经知道的文件,用application:///一种用于访问编译时不知道、运行时才知道的文件,用si...