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}">
    <Border
        Padding="5"
        Background="White"
        BorderBrush="Black"
        BorderThickness="1"
        CornerRadius="3">
        <TextBlock
            Margin="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代码如下：

<Window
    x: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}" />-->
                            <TextBlock
                                x: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>
                    <Border
                        Padding="10"
                        Background="LightBlue"
                        BorderBrush="Black"
                        BorderThickness="1">
                        <TextBlock
                            FontFamily="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}">
            <Border
                Padding="5"
                Background="White"
                BorderBrush="Black"
                BorderThickness="1"
                CornerRadius="3">
                <TextBlock
                    Margin="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>
                <Button
                    x:Name="OpenDicom"
                    Grid.Column="0"
                    Content="&#xe662;"
                    Style="{StaticResource IconButton}"
                    ToolTip="打开DICOM文件夹" />
                <Button
                    Grid.Column="1"
                    Content="&#xe995;"
                    Style="{StaticResource IconButton}"
                    ToolTip="快速浏览" />
                <Button
                    Grid.Column="3"
                    Content="&#xe6fc;"
                    Style="{StaticResource IconButton}"
                    ToolTip="3D浏览" />
                <Button
                    Grid.Column="2"
                    Content="&#xe619;"
                    Style="{StaticResource IconButton}"
                    ToolTip="MRP浏览" />
                <Button
                    Grid.Column="4"
                    Content="&#xe61b;"
                    Style="{StaticResource IconButton}"
                    ToolTip="融合浏览" />
            </Grid>

            <Grid
                x:Name="Cases"
                Height="Auto"
                Margin="0,10">
                <!--<Button Background="Aqua">
                    <TextBlock Text="&#xe608;" />
                </Button>-->
            </Grid>


        </StackPanel>
        <Grid Grid.Column="1" />

    </Grid>
</Window>

参考

WPF——ICON按钮制作-CSDN博客

WPF——自定义ToolTip

问题

产生原因

解决办法

参考

悦读