WPF——自定义ToolTip

问题

前一天制作的图标按钮，在测试的过程中发现一个问题：为图标按钮添加的提示如下图所示，它的显示效果非常差，甚至不能看清文本内容，并且其字体与颜色也不是愚所希望的。

产生原因

此是由于tooltip有一个默认的样式所导致，也就是说要解决这个问题，那么就需要按需要设置相应的样式即可。

解决办法

1.设置ToolTip样式相关属性——失败

首先，尝试直接设置tooltip的样式，如下代码所示：

<Style TargetType="ToolTip"><Setter Property="Background" Value="White" /><Setter Property="Foreground" Value="Black" /><Setter Property="FontSize" Value="20" />
</Style>

如上在窗口资源中设置了ToolTip，结果并未达到想要的效果，如下图所示：

2. 完全自定义ToolTip的显示效果，即定义其展示模板——可行

于是换个思路，那么就完全自定义ToolTip的样式得了，也就是说不仅仅只是设置它的背景色、前景色、字体等等，而是对其显示效果进行完全的自定义。经常尝试，有了下述样式代码：

<ControlTemplate x:Key="CustomToolTipTemplate" TargetType="{x:Type ToolTip}"><BorderPadding="5"Background="White"BorderBrush="Black"BorderThickness="1"CornerRadius="3"><TextBlockMargin="3"FontFamily="Arial"FontSize="12"Foreground="Black"Text="{TemplateBinding Content}"TextWrapping="Wrap" /></Border>
</ControlTemplate><Style TargetType="{x:Type ToolTip}"><Setter Property="Template" Value="{StaticResource CustomToolTipTemplate}" />
</Style>

上述代码中的TargetType="{x:Type ToolTip}"可直替换为TargetType="ToolTip"。

最后完整的UI代码如下：

<Windowx:Class="DicomReader.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:local="clr-namespace:DicomReader"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"Title="DicomReader"Width="1200"Height="800"Background="#353535"mc:Ignorable="d"><Window.Resources><Style x:Key="IconButtonTb" TargetType="TextBlock"><Setter Property="FontFamily" Value="pack://application:,,,/DicomReader;component/Fonts/#iconfont" /><Setter Property="FontSize" Value="30" /><Setter Property="Foreground" Value="White" /><Setter Property="FontWeight" Value="Bold" /></Style><Style x:Key="IconButton" TargetType="Button"><Setter Property="ToolTip" Value="{x:Null}" /><Setter Property="Background" Value="#333337" /><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="Button"><Grid Background="{TemplateBinding Background}"><!--<Ellipse Fill="{TemplateBinding Background}" />--><TextBlockx:Name="txt"HorizontalAlignment="Center"VerticalAlignment="Center"Style="{StaticResource IconButtonTb}"Text="{TemplateBinding Content}" /></Grid></ControlTemplate></Setter.Value></Setter></Style><Style TargetType="Grid"><Setter Property="Background" Value="#252525" /></Style><!--  定义Popup的Style  --><!--<Style TargetType="Popup"><Setter Property="PopupAnimation" Value="Fade" /><Setter Property="AllowsTransparency" Value="True" /><Setter Property="Placement" Value="MousePoint" /><Setter Property="StaysOpen" Value="False" /><Setter Property="Child"><Setter.Value><BorderPadding="10"Background="LightBlue"BorderBrush="Black"BorderThickness="1"><TextBlockFontFamily="Arial"FontSize="14"FontWeight="Bold"Foreground="DarkBlue"Text="This is a popup!"TextWrapping="Wrap" /></Border></Setter.Value></Setter></Style>--><!--  定义ToolTip的ControlTemplate  --><ControlTemplate x:Key="CustomToolTipTemplate" TargetType="{x:Type ToolTip}"><BorderPadding="5"Background="White"BorderBrush="Black"BorderThickness="1"CornerRadius="3"><TextBlockMargin="3"FontFamily="Arial"FontSize="12"Foreground="Black"Text="{TemplateBinding Content}"TextWrapping="Wrap" /></Border></ControlTemplate><Style TargetType="ToolTip"><Setter Property="Template" Value="{StaticResource CustomToolTipTemplate}" /></Style></Window.Resources><Grid><Grid.ColumnDefinitions><ColumnDefinition Width="*" /><ColumnDefinition Width="4*" /></Grid.ColumnDefinitions><StackPanel Orientation="Vertical"><Grid Height="50"><Grid.ColumnDefinitions><ColumnDefinition Width="*" /><ColumnDefinition Width="*" /><ColumnDefinition Width="*" /><ColumnDefinition Width="*" /><ColumnDefinition Width="*" /></Grid.ColumnDefinitions><Buttonx:Name="OpenDicom"Grid.Column="0"Content="&#xe662;"Style="{StaticResource IconButton}"ToolTip="打开DICOM文件夹" /><ButtonGrid.Column="1"Content="&#xe995;"Style="{StaticResource IconButton}"ToolTip="快速浏览" /><ButtonGrid.Column="3"Content="&#xe6fc;"Style="{StaticResource IconButton}"ToolTip="3D浏览" /><ButtonGrid.Column="2"Content="&#xe619;"Style="{StaticResource IconButton}"ToolTip="MRP浏览" /><ButtonGrid.Column="4"Content="&#xe61b;"Style="{StaticResource IconButton}"ToolTip="融合浏览" /></Grid><Gridx:Name="Cases"Height="Auto"Margin="0,10"><!--<Button Background="Aqua"><TextBlock Text="&#xe608;" /></Button>--></Grid></StackPanel><Grid Grid.Column="1" /></Grid>
</Window>