C#のWPFでツールチップを表示する

ツールチップ (ToolTip)といえば、 ボタンなどのコントロールにマウスを載せた時、説明やヒントをポップアップ表示してくれる機能です。

WPFではこのツールチップを簡単に実装する事が可能です。

ここではその方法について解説します。

ToolTipに簡単なテキストを表示

FrameworkElement クラスは ToolTip というプロパティを持っています。

ボタンやラベルなど、ほとんどの UI 要素は FrameworkElement クラスを継承しているのでツールチップを使う事が出来ます。

単にテキストを表示するだけなら ToolTip にテキストを追加するだけでOKです。

<Window x:Class="WpfTest1.TestWindow"
        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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfTest1"
        mc:Ignorable="d"
        Title="TestWindow" Height="300" Width="300">
    <WrapPanel>
        <Button Content="ボタン" Margin="30" Width="100" Height="30"
                   ToolTip="これはツールチップのテストです"/>
    </WrapPanel>
</Window>

ToolTipを複雑なレイアウトで表示

ToopTip プロパティは以下のようjにして WrapPanel などの UI要素を入れる事も出来ます。

Panel や Grid などを組み合わせる事で複雑なレイアウトを持ったツールチップを作る事が可能です。

<Window x:Class="WpfTest1.TestWindow"
        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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfTest1"
        mc:Ignorable="d"
        Title="TestWindow" Height="300" Width="300">
    <WrapPanel>
        <Button Content="ボタン" Margin="30" Width="100" Height="30">
            <Button.ToolTip>
                <WrapPanel VerticalAlignment="Center">
                    <Border Width="10" Height="10" BorderThickness="3" BorderBrush="Blue" />
                    <Label Content="これはツールチップのテストです"/>
                </WrapPanel>
            </Button.ToolTip>
        </Button>
    </WrapPanel>
</Window>

ToolTipServiceで表示方法をカスタマイズ

FrameworkElement クラスは ToolTipService というプロパティも持っています。

ToolTipService では、表示が始まるまでの時間は表示されれいる時間、表示位置のオフセットなどをカスタマイズする事が可能です。

<Window x:Class="WpfTest1.TestWindow"
        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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfTest1"
        mc:Ignorable="d"
        Title="TestWindow" Height="300" Width="300">
    <WrapPanel>
        <Button Content="ボタン" Margin="30" Width="100" Height="30"
                ToolTip="これはツールチップのテストです"
                ToolTipService.InitialShowDelay="500"
                ToolTipService.ShowDuration="2000"
                ToolTipService.HorizontalOffset="15" 
                ToolTipService.VerticalOffset="5" />
    </WrapPanel>
</Window>