2019/11/01

    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>

     

     

    カテゴリ： C#, C#WPF