wpf toolTip自定义

最新推荐文章于 2024-03-21 19:45:15 发布
最新推荐文章于 2024-03-21 19:45:15 发布
阅读量4.1k 收藏 1
点赞数
分类专栏： WPF 文章标签： wpf
ToolTip或者PopUp这个控件在做界面时会经常用到。如何对ToolTip进行自定义呢？

1.首先自定义tooltip的controlTemplate，完全清除系统默认效果， 如下：
[html] view plain copy
print ? 在CODE上查看代码片 派生到我的代码片
  1. <ControlTemplate x:Key ="TooltipTemplate" TargetType="ToolTip">  
  2.               <ContentPresenter x :Name="contentPresenter" Height="{TemplateBinding Height }" Width="{ TemplateBinding Width}" ContentTemplate="{TemplateBinding ContentTemplate }" ></ContentPresenter>  
  3.           </ControlTemplate>  
  <ControlTemplate x:Key ="TooltipTemplate" TargetType="ToolTip">
                <ContentPresenter x :Name="contentPresenter" Height="{TemplateBinding Height }" Width="{ TemplateBinding Width}" ContentTemplate="{TemplateBinding ContentTemplate }" ></ContentPresenter>
            </ControlTemplate>
2.自定义tooltip的contentTemplate， 这样可以专注于tooltip的界面呈现， 而不关心tooltip要显示的字符串， 如下：
 
[html] view plain copy
print ? 在CODE上查看代码片 派生到我的代码片
  1. <Style x :Key="ToolTipStyle" TargetType="ToolTip">  
  2.                 <Setter Property ="IsOpen" Value="False">  
  3.                 </Setter>  
  4.                  
  5.                 <Setter Property ="ContentTemplate">  
  6.                     <Setter.Value>  
  7.                         <DataTemplate>  
  8.                             <Border x :Name="errorBorder" Background="#CC595959" BorderBrush="#99000000" BorderThickness="1" CornerRadius ="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin ="0" MaxWidth="320">  
  9.                                 <Border.Effect>  
  10.                                     <DropShadowEffect BlurRadius ="4" ShadowDepth="0"/>  
  11.                                 </Border.Effect>  
  12.                                 <Grid>  
  13.                                     <Grid.ColumnDefinitions>  
  14.                                         <ColumnDefinition Width ="Auto"/>  
  15.                                         <ColumnDefinition Width ="*"/>  
  16.                                     </Grid.ColumnDefinitions>  
  17.                                     <Border Margin ="16,16,8,16" VerticalAlignment="Top">  
  18.                                         <Path x :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"/>  
  19.                                     </Border>  
  20.                                     <TextBlock x :Name="textBlock" Text="{TemplateBinding Content }" Margin="0,14,10,14" FontSize="14" Grid.Column ="1" TextWrapping="Wrap" Foreground="Red"/>  
  21.                                 </Grid>  
  22.                             </Border>  
  23.                         </DataTemplate>  
  24.                     </Setter.Value>  
  25.                 </Setter>  
  26.   
  27.                 <Style.Triggers>  
  28.                     <Trigger Property ="IsOpen" Value="True">  
  29.                         <Trigger.EnterActions>  
  30.                             <BeginStoryboard>  
  31.                                 <Storyboard>  
  32.                                     <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Duration="0:0:3">  
  33.                                         <DiscreteObjectKeyFrame KeyTime ="0:0:0">  
  34.                                             <DiscreteObjectKeyFrame.Value>  
  35.                                                 <Visibility> Visible</Visibility >  
  36.                                             </DiscreteObjectKeyFrame.Value>  
  37.                                         </DiscreteObjectKeyFrame>  
  38.                                         <DiscreteObjectKeyFrame KeyTime ="0:0:3">  
  39.                                            <DiscreteObjectKeyFrame.Value>  
  40.                                                 <Visibility> Hidden</Visibility >  
  41.                                            </DiscreteObjectKeyFrame.Value>  
  42.                                         </DiscreteObjectKeyFrame>  
  43.                                     </ObjectAnimationUsingKeyFrames>  
  44.                                 </Storyboard>  
  45.                             </BeginStoryboard>  
  46.                         </Trigger.EnterActions>  
  47.                     </Trigger>  
  48.                 </Style.Triggers>  
  49.             </Style>  
<Style x :Key="ToolTipStyle" TargetType="ToolTip">
                <Setter Property ="IsOpen" Value="False">
                </Setter>
               
                <Setter Property ="ContentTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <Border x :Name="errorBorder" Background="#CC595959" BorderBrush="#99000000" BorderThickness="1" CornerRadius ="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin ="0" MaxWidth="320">
                                <Border.Effect>
                                    <DropShadowEffect BlurRadius ="4" ShadowDepth="0"/>
                                </Border.Effect>
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width ="Auto"/>
                                        <ColumnDefinition Width ="*"/>
                                    </Grid.ColumnDefinitions>
                                    <Border Margin ="16,16,8,16" VerticalAlignment="Top">
                                        <Path x :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>
                                    <TextBlock x :Name="textBlock" Text="{TemplateBinding Content }" Margin="0,14,10,14" FontSize="14" Grid.Column ="1" TextWrapping="Wrap" Foreground="Red"/>
                                </Grid>
                            </Border>
                        </DataTemplate>
                    </Setter.Value>
                </Setter>

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

3.应用Tooltip的style，如下：
[html] view plain copy
print ? 在CODE上查看代码片 派生到我的代码片
  1. <Button Content ="TestButton">  
  2.         < Button.ToolTip>  
  3.             < ToolTip Style ="{ DynamicResource ToolTipStyle}" Content="This is a button"></ ToolTip >  
  4.         </ Button.ToolTip>  
  5.     </ Button>  
    <Button Content ="TestButton">
            < Button.ToolTip>
                < ToolTip Style ="{ DynamicResource ToolTipStyle}" Content="This is a button"></ ToolTip >
            </ Button.ToolTip>
        </ Button>

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

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

代码如下：
[csharp] view plain copy
print ? 在CODE上查看代码片 派生到我的代码片
  1. _toolTip.Style = ToolTipStyle;  
  2.                         _toolTip.PlacementTarget = this.AssociatedObject;  
  3.                         _toolTip.Placement = PlacementMode.Bottom;  
  4.                         _toolTip.Content = toolTipText;  
  5.   
  6.                         //must set false first to trigger storyboard  
  7.                         _toolTip.IsOpen = false;  
  8.                         _toolTip.IsOpen = true;  
  9.                         _toolTip.StaysOpen = 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来进行统一设置。比如： 


   
   

    
    

     
     

      
      [csharp] 
      
      view plain
      
       copy
      
      

      
       print
      
      ?
      
      在CODE上查看代码片
      
      派生到我的代码片
     
     

    
    

    
    
  1. ToolTipService.InitialShowDelay="1000"  
  2. ToolTipService.ShowDuration="7000"  
  3. ToolTipService.BetweenShowDelay="2000"  
  4. ToolTipService.Placement="Right"   
  5. ToolTipService.PlacementRectangle="50,0,0,0"  
  6. ToolTipService.HorizontalOffset="10"   
  7. ToolTipService.VerticalOffset="20"  
  8. ToolTipService.HasDropShadow="false"  
  9. ToolTipService.ShowOnDisabled="true"   
  10. ToolTipService.IsEnabled="true"  

    
    

     
     
    
    

   
   
      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的设置优先。

new_smile
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WPF 自定义虚拟键盘控件
12-28
WPF .net Framework 4.6.2 虚拟键盘自定义控件；适合新手借鉴、程序应急使用；直接上源码，可自行修改； 虚拟键盘(支持英文，数字输入，及部分特殊字符(特殊字符都为英文字符)) 1.0版本；后续慢慢增加其他功能及其他自定义控件
WPF修改Tooltip样式
01-11
这是一个在WPF中修改任何控件的Tooltip的样式的源代码，供大家参考获得自己想要的功能
WPF —— ToolTip详解
最新发布
lu2023_8_6的博客
03-21 448
将鼠标悬浮在上时，会获取相关的Tip信息。2 使用tooltip标签当成一个整体。1 可以吧两句提示语添加一个父节点。
WPF之自定义窗体的封装
10-24
WPF自定义窗体的实现，https://blog.csdn.net/me_badman/article/details/83345502
WPF自定义MenuItem样式的实现方法
12-31
一、前言 默认的MenuItem样式比较普通，这次自定义MenuItem的样式也只是对MenuItem的颜色风格进行变化。需要其他功能的变化，大家可以根据样式代码进行扩展。 MenuItem的样式代码： <!--MenuItem--> <Style TargetType=MenuItem> <Grid ToolTip={TemplateBi
WPF弹出自定义窗口的方法
01-20
本文实例讲述了WPF弹出自定义窗口的方法。分享给大家供大家参考，具体如下： 测试环境: [1]VS2010SP1 [2]WPF(.NET Framework 4)项目 内容简介 WPF工程如何弹出自定义窗口 第一步：自定义个窗口 为当前项目新添个Window项，XAML部份的代码略，下面是C#部份的代码。 namespace WorkflowBuilder.MyWindows { /// /// Interaction logic for InputStringWindow.xaml /// public partial class
WPF组件使用之ToolTip
flaymouse的博客
01-27 1809
1ToolTip https://www.wpf-tutorial.com/zh/21/%E6%8E%A7%E4%BB%B6%E6%A6%82%E5%BF%B5/tooltip%E6%8E%A7%E4%BB%B6/
WPF基础五：UI②内容元素ToolTip
hd51cc的博客
04-22 1948
ToolTip 表示一个控件，该控件可创建一个弹出窗口，以便在界面中显示元素的信息。 ToolTip是ContentControl，这意味着它可以包含任何类型的单个对象 (例如字符串、图像或面板) 。有关更多信息，请参见ContentControl类。 使用ToolTip控件为用户提供信息。例如，可以在Button或ToolBarTray的ToolBar中使用ToolTip显示提示信息。ToolTip控件的内容可以从简单的文本字符串到更复杂的内容（例如具有嵌入式文本和图像的S...
WPF自定义tooltip样式
FireGhost57的专栏
12-26 2825
tooltip其实和popup很像,但是popup弹出后需要监听鼠标点击事件,所以触感不流畅,弹出后不会自己消失 而tooltip在鼠标滑过时会显示,移开后会隐藏 tooltip因为可以接受类对象,所以可以传任意内容给样式模板 代码: <!-- =============== 提示文本样式 =============== --> <Style x:Key...
WPF中ToolTip的自定义
热门推荐
muzizongheng的专栏
02-18 1万+
ToolTip或者PopUp这个控件在做界面时会经常用到。如何对ToolTip进行自定义呢？ 1.首先自定义tooltip的controlTemplate，完全清除系统默认效果， 如下： 2.自定义tooltip的contentTemplate， 这样可以专注于tooltip的界面呈现， 而不关心tooltip要显示的字符串， 如下： 3.应用Tooltip的style，如下： <ButtonContent ="TestButton"> < Button.Too
浅谈WPF之ToolTip工具提示
绳锯木断，水滴石穿，专心写文，无问西东！！！
12-27 1634
当用户将鼠标指针移动到具有工具提示的元素上时，将在一段指定的时间内显示一个包含工具提示内容（例如，介绍控件功能的文本内容）的窗口。Placement的值是一个枚举，常用的有：Bottom,Top,Left,Right,Center等。以上示例，工具提示为一个图标，一个文本提示，水平排列。这就是本文需要介绍的ToolTip【工具提示】内容，本文以一些简单的小例子，简述如何在。以上就是【浅谈WPF之ToolTip工具提示】的全部内容，希望能够一起学习，共同进步。，仅供学习分享使用，如有不足之处，还请指正。
WPF 自定义CheckBox样式
06-25
WPF利用字体图标，制作自定义CheckBox，已达到使自己的CheckBox更加的美观
【Tooltip】WPF中Tooltip使用技巧总结
weixin_30321449的博客
11-30 873
1. 简单示例——包含两个TextBlock： 代码 <Button Content="Tooltip演示"> <Button.ToolTip> <ToolTip> <StackPanel> <TextBlock FontWeight="Heavy">两个Te...
WPF TextBox 添加ToolTip及赋值、修改样式的几种方法
u012803643的博客
04-04 2181
由于我们开发过程中需求的不同，我们在使用WPF控件的方法也不一样，下面我们来讲一下ToolTip的使用，以为TextBox设置ToolTip为例。这边的TextBoxName就可以通过后台定义get/set方法获取，然后通过propertyChanged进行参数绑定。但是如果我们想要通过绑定的方式，实时改变ToolTip的内容，应该怎么做呢？接下来我们给ToolTip加一些style进行一些美化。
WPF编程，tootip的使用
君一席
06-13 658
在 WPF 中，ToolTip属性实际上不是字符串类型，而是对象类型，这意味着我们可以在其中放入任何我们想要的内容。
WPF之自定义ToolTip样式和模板
qq_38138159的博客
07-20 4065
&lt;ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"                     xmlns:local="clr...
C#WPF工具提示（ToolTip）实例
qq_30725967的博客
10-31 1392
本文演示C#WPF工具提示（ToolTip）实例
WPF 信息提示框 ToolTip工具提示
m0_51363673的博客
12-03 971
目标效果： 鼠标停留在控件上，出现一个框，显示提示信息。 实现方法： ToolTip 例子： <Button Content="电源类型" ToolTip="点击此处确定电源类型" />
VS编程，WPF中ToolTip工具提示控件的基本使用说明
君一席
10-08 3805
有时需要对一些内容或者操作给使用者一些提示，也就是当鼠标指向此处时，会出现一个小小的提示文本提示区域，当鼠标移出时，文本提示区域消失。 这里对此ToolTip工具提示控件进行说明。  效果： 1、对控件增加ToolTip属性 a）简单的文本提示，可直接增加ToolTip="" &lt;TextBox FontSize="36" ...
WPF 调用自定义控件
12-12
在WPF中调用自定义控件，需要进行以下步骤： 1.创建自定义控件类，例如MyControl，继承自System.Windows.Controls.Control类。 2.在MyControl类中添加需要的属性、方法和事件。 3.在MyControl类中重写OnRender...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值