WPF UI开发教程ToolTip工具提示

工具提示是一个小的弹出窗口，当用户将鼠标指针悬停在某个元素（例如Button ）上时会出现该窗口。本编文章讲如何创建和自定义工具提示内容。

先看一下提示效果：

当用户将鼠标指针移到具有工具提示的元素上时，包含工具提示内容（例如，描述控件功能的文本内容）的窗口会出现指定的时间。如果用户将鼠标指针从控件上移开，窗口就会消失，因为工具提示内容无法获得焦点。

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

样式代码如下：

 <Style x:Key="ToolTipBox" TargetType="ToolTip">
        <Setter Property="Foreground" Value="White" />
        <Setter Property="Placement" Value="Center" />
        <Setter Property="VerticalOffset" Value="-30" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ToolTip}">
                    <Grid Margin="5">
                        <Border
                            Margin="0,0,0,6"
                            Padding="10,0,10,0"
                            Background="White"
                            CornerRadius="3">
                            <Border.Effect>
                                <DropShadowEffect
                                    BlurRadius="3"
                                    ShadowDepth="0"
                                    Color="#FFA2A2A2" />
                            </Border.Effect>
                        </Border>
                        <Border
                            x:Name="grid"
                            Margin="0,0,0,6"
                            Padding="10,0,10,0"
                            Background="{StaticResource ThemeColor}"
                            CornerRadius="1">
                            <ContentPresenter Margin="6" />
                        </Border>
                        <Polygon
                            x:Name="ButtonPolygon"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Bottom"
                            Fill="{StaticResource ThemeColor}"
                            Points="0,0 12,0 6,6" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

调用示例代码：

  <Button Grid.Row="1" Content="按钮" Margin="30" FontSize="16" Width="120">
            <Button.ToolTip>
                <ToolTip Grid.Row="1" Content = "测试提示内容" Style="{DynamicResource ToolTipBox}"/>
            </Button.ToolTip>
        </Button>