快捷導(dǎo)航

淺析WPF中ToolTip工具提示的應(yīng)用

更新時(shí)間：2023年12月28日 09:57:30 作者：老碼識(shí)途呀

在日常應(yīng)用中,當(dāng)鼠標(biāo)放置在某些控件上時(shí),都會(huì)有相應(yīng)的信息提示,從軟件易用性上來(lái)說(shuō),這是一個(gè)非常友好的功能設(shè)計(jì),本文就來(lái)和大家簡(jiǎn)單聊聊WPF中ToolTip工具提示的相關(guān)使用,有興趣的可以了解下

在日常應(yīng)用中，當(dāng)鼠標(biāo)放置在某些控件上時(shí)，都會(huì)有相應(yīng)的信息提示，從軟件易用性上來(lái)說(shuō)，這是一個(gè)非常友好的功能設(shè)計(jì)。那在WPF中，如何進(jìn)行控件信息提示呢？這就是本文需要介紹的ToolTip【工具提示】?jī)?nèi)容，本文以一些簡(jiǎn)單的小例子，簡(jiǎn)述如何在WPF開(kāi)發(fā)中，應(yīng)用工具提示，僅供學(xué)習(xí)分享使用，如有不足之處，還請(qǐng)指正。

什么是工具提示

工具提示是一個(gè)小型的彈出窗口，在用戶將鼠標(biāo)指針懸停在某個(gè)元素（如 Button）上時(shí)顯示。當(dāng)用戶將鼠標(biāo)指針移動(dòng)到具有工具提示的元素上時(shí)，將在一段指定的時(shí)間內(nèi)顯示一個(gè)包含工具提示內(nèi)容（例如，介紹控件功能的文本內(nèi)容）的窗口。如果用戶將鼠標(biāo)指針從控件上移開(kāi)，該窗口將消失，因?yàn)楣ぞ咛崾緝?nèi)容無(wú)法接收焦點(diǎn)。工具提示的內(nèi)容可以包含一行或多行文本、圖像、形狀或其他可視內(nèi)容。

創(chuàng)建工具提示

凡是繼承自FrameworkElement和FrameworkContentElement的控件，都具有ToolTip屬性，為object類型，即接收任何類型的屬性設(shè)置。

1. 本文工具提示

可以將一段文本賦值給控件的ToolTip屬性，如下所示：

<Button Content='測(cè)試' Width="120" Height="30" ToolTip="這是一個(gè)測(cè)試按鈕"></Button>
<Image Grid.Row="1" Source="/images/001.png" Stretch="Fill" Width="200" Height="100" ToolTip="這是一張圖片"></Image>

文本工具提示截圖

2. 自定義工具提示

工具提示可以是一段文本，也可以是一個(gè)組合的自定義對(duì)象。比如：一個(gè)帶有圖標(biāo)的工具提示，如下所示：

<Button Content='工具提示' Width="120" Height="30" Grid.Column="1">
    <Button.ToolTip>
        <StackPanel Orientation="Horizontal">
            <Path Data="{StaticResource icon_info}" Stroke="#F69661" Stretch="Fill" StrokeThickness="1" Fill="#F69661" Width="20" Height="20" VerticalAlignment="Center" Margin="2"></Path>
            <TextBlock Text="這是一個(gè)帶圖標(biāo)的工具提示" VerticalAlignment="Center" Margin="2"></TextBlock>
        </StackPanel>
    </Button.ToolTip>
</Button>

以上示例，工具提示為一個(gè)圖標(biāo)，一個(gè)文本提示，水平排列。以為ToolTip的內(nèi)容只能有一個(gè)Child，所以用StackPanel包括起來(lái)，作為一個(gè)整體。

自定義工具提示截圖

設(shè)置工具提示樣式

工具提示和普通的控件一樣，也可以設(shè)置樣式【如：背景色，前景色，字體大小等】，如下所示：

<Window.Resources>
    <Style TargetType="ToolTip">
        <Setter Property = "HorizontalOffset" Value="10"/>
        <Setter Property = "VerticalOffset" Value="10"/>
        <Setter Property = "Background" Value="LightBlue"/>
        <Setter Property = "Foreground" Value="Purple"/>
        <Setter Property = "FontSize" Value="14"/>
        <Setter Property = "FontWeight" Value="Bold"/>
    </Style>
</Window.Resources>

設(shè)置樣式后的工具提示，如下圖所示：

定位工具提示

可以使用在 ToolTip 和 ToolTipService 類中定義的五個(gè)屬性集來(lái)定位工具提示。下表顯示這兩組五個(gè)屬性，并根據(jù)類提供指向其參考文檔的鏈接。

使用Placement定位

Placement的值是一個(gè)枚舉，常用的有：Bottom,Top,Left,Right,Center等。下圖顯示使用 Placement 屬性放置工具提示：

下圖顯示使用 Placement 和 PlacementRectangle 屬性放置工具提示：

下圖顯示使用 Placement、PlacementRectangle 和 Offset 屬性放置工具提示：

工具提示定位綜合示例，如下所示：

<Ellipse Height="25" Width="50" Grid.Row="1" Fill="Gray" ToolTipService.InitialShowDelay="1000" ToolTipService.ShowDuration="7000" ToolTipService.BetweenShowDelay="2000">
    <Ellipse.ToolTip>
        <ToolTip Placement="Right" PlacementRectangle="50,0,0,0" HorizontalOffset="10" VerticalOffset="20" HasDropShadow="false">
            <BulletDecorator>
                <BulletDecorator.Bullet>
                    <Ellipse Height="10" Width="20" Fill="Blue"/>
                </BulletDecorator.Bullet>
                <TextBlock>Uses the ToolTip Class</TextBlock>
            </BulletDecorator>
        </ToolTip>
    </Ellipse.ToolTip>
</Ellipse>

示例截圖如下所示：