WPF控件样式和模板全解析-ToolTip控件

ToolTip的默认样式和模板

ToolTip虽然也是内容控件，但是它和普通的控件不一样，它是工具提示是一个小弹出窗口，当用户将鼠标指针悬停在某个元素上（例如 Button）时显示。 当用户将鼠标指针移到具有工具提示的元素上时，将显示一个包含工具提示内容的窗口（例如，描述控件函数的文本内容）在指定的时间内显示。 如果用户将鼠标指针移离控件，窗口将消失，因为工具提示内容无法接收焦点。

工具提示的内容可以包含一行或多行文本、图像、形状或其他视觉内容。 通过设置以下任一属性为工具提示内容来定义控件的工具提示。

所以它无法单独被使用，一般是通过如下方式使用

例如：

 

1 <Button ToolTip="Click to submit your information" 
2         Click="SubmitCode" Height="20" Width="50">Submit</Button>

 

运行效果：

动画

 

 

ToolTip的样式和模板无法通过Blend获取，因为它不是单独使用的控件，所以Blend不支持。

但是我们可以访问以下页面来获取ToolTip的默认样式和模板

https://raw.githubusercontent.com/dotnet/wpf/main/src/Microsoft.DotNet.Wpf/src/Themes/XAML/ToolTip.xaml

 

 1  <SolidColorBrush x:Key="ToolTip.Background" Color="#FFF1F2F7" />
 2     <SolidColorBrush x:Key="ToolTip.Border" Color="#FF767676" />
 3     <SolidColorBrush x:Key="ToolTip.Foreground" Color="#FF575757" />
 4 
 5     <Style x:Key="{x:Type ToolTip}" TargetType="ToolTip">
 6         <Setter Property="Background" Value="{StaticResource ToolTip.Background}" />
 7         <Setter Property="BorderBrush" Value="{StaticResource ToolTip.Border}" />
 8         <Setter Property="Foreground" Value="{StaticResource ToolTip.Foreground}" />
 9         <Setter Property="BorderThickness" Value="1" />
10         <Setter Property="Padding" Value="6,4" />
11         <Setter Property="FontFamily" Value="{DynamicResource {x:Static SystemFonts.StatusFontFamilyKey}}"/>
12         <Setter Property="FontSize" Value="{DynamicResource {x:Static SystemFonts.StatusFontSizeKey}}"/>
13         <Setter Property="FontStyle" Value="{DynamicResource {x:Static SystemFonts.StatusFontStyleKey}}"/>
14         <Setter Property="FontWeight" Value="{DynamicResource {x:Static SystemFonts.StatusFontWeightKey}}"/>
15         <Setter Property="HorizontalContentAlignment" Value="Left"/>
16         <Setter Property="VerticalContentAlignment" Value="Center"/>
17         <Setter Property="HasDropShadow" Value="False" />
18         <Setter Property="RenderOptions.ClearTypeHint" Value="Enabled" />
19         <Setter Property="SnapsToDevicePixels" Value="true" />
20         <Setter Property="Template">
21             <Setter.Value>
22                 <ControlTemplate TargetType="ToolTip">
23                     <Border Name="Border" 
24                         Background="{TemplateBinding Background}" 
25                         BorderBrush="{TemplateBinding BorderBrush}" 
26                         BorderThickness="{TemplateBinding BorderThickness}" 
27                         SnapsToDevicePixels="True">
28                         <ContentPresenter 
29                             Margin="{TemplateBinding Padding}" 
30                             HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
31                             VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
32                             SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
33                     </Border>
34                 </ControlTemplate>
35             </Setter.Value>
36         </Setter>
37     </Style>

 

拆解ToolTip的样式和模板

 

VisualState

 

ToolTip样式示例

 

运行效果

 

 

示例代码

https://github.com/zhaotianff/cnblog-demo-code/tree/main/WPFStyleAndTemplateDemo

posted @ 2026-09-15 17:53  zhaotianff  阅读(5)  评论(0)    收藏  举报