Q104. WPF でツールチップをバルーン形式にするには?

A.吹き出し図形をレンダリングする Callout クラスを使います。なおこのクラスは BlendのアセンブリMicrosoft.Expression.Drawing」で提供されていますので、事前に参照設定に追加しておく必要があります。

以下サンプルです。このサンプルではツールチップを角丸長方形に設定してますが、Callout.CalloutStyleプロパティの設定により、長方形や雲形・吹き出し*1に変えることもできます。また ToolTip のスタイル定義内で FontWeight と Foreground を設定しておかないと、要素の設定が反映されるので注意が必要です。


<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"
        Title="MainWindow" Height="150" Width="250" WindowStartupLocation="CenterScreen">
    <Window.Resources>
        <!-- ToolTip Style -->
        <Style TargetType="ToolTip">
            <Setter Property="OverridesDefaultStyle" Value="true" />
            <Setter Property="HasDropShadow" Value="True" />
            <!-- ここで FontWeight・Foreground を設定しておかないと要素の設定が反映されてしまう -->
            <Setter Property="FontWeight" Value="Normal" />
            <Setter Property="Foreground" Value="Black" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ToolTip">
                        <ed:Callout Name="Border"
                                    Width="{TemplateBinding Width}"
                                    Height="{TemplateBinding Height}"
                                    MinWidth="80"
                                    MinHeight="30"
                                    CalloutStyle="RoundedRectangle"
                                    Fill="#FFF4F4F5"
                                    FontSize="12"
                                    FontStyle="Normal"
                                    Stroke="Black">
                            <ContentPresenter Margin="10" />
                        </ed:Callout>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <Button Width="100" Height="36" Content="OK" 
                Foreground="Red" FontSize="24" FontWeight="Bold" ToolTip="OK" />
    </Grid>
</Window>


アプリケーション全体でツールチップの形式を統一するには、Application.xaml の Application.Resources にスタイルを定義するといいでしょう。

参考記事:How to style WPF tooltip like a speech bubble?


WPF FAQ の目次に戻る



 

*1:吹き出し位置が固定なので使いづらいですが・・・