執筆者: PROJECT KySS 薬師寺 国安

動作確認環境: Visual Studio 2010、Silverlight 4、Windows 7 Professional (32 bit) + SP1


本サンプルでは、内容の表示された TextBox にマウス ポインターが乗ると、TextBox の背景色が黄色に変化し、TextBox の右側に内容に該当する画像が表示されます。

まず、新しいソリューションとして Silverlight アプリケーションを作成します。ここではソリューション名に "SL4_SetToolTipImage" を指定します。次にプロジェクト内に Image というフォルダーを作成して、使用する 2 枚の画像を読み込んでおきます。ここでは画像は提供しませんので、読者の皆さんは、任意の画像に差し替えてお試しください。

次に LINQ to XML を利用するために、Visual Studio 2010 のメニュー「プロジェクト」、「参照の追加」から、System.Xml.Linq を追加しておいてください。

[XAML]  SetToolTip を使用して、画像をツール チップに表示する方法 (MainPage.xaml)

Silverlight コントロール上に、StackPanel を 1 個配置しています。

XAML
<UserControl x:Class="SL4_SetToolTipImage.MainPage" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    Width="800" Height="600"    <Grid x:Name="LayoutRoot" Background="White"        <StackPanel Height="495" HorizontalAlignment="Left" Margin="24,43,0,0" Name="StackPanel1" VerticalAlignment="Top" Width="410" /> 
    </Grid> 
</UserControl> 
 
 
 

[VB] コード ビハインド (MainPage.xaml.vb)

Visual Basic
Option Strict On 
Imports System.Xml.Linq 
Imports System.Windows.Media.Imaging 
 
Partial Public Class MainPage 
    Inherits UserControl 
 
    Public Sub New() 
        InitializeComponent() 
    End Sub 
 
       Private Sub MainPage_Loaded(ByVal sender As ObjectByVal e As System.Windows.RoutedEventArgsHandles Me.Loaded 
        Dim photoComment As XElement = _ 
            <画像> 
                <情報 ツールチップ="Image/光.jpg"> 
                    <説明>天空から神が舞い降りた。&#10;一条の光に乗って,&#10;天女が舞い降りた。&#10;私にはそう感じたのだが。。。&#10;幻だったのか。</説明> 
                </情報> 
                <情報 ツールチップ="Image/民家.jpg"> 
                    <説明>10数年前に住んでいた鬼北町奈良の雪景色。&#10;南予ではあるが,山間部にあたるため,&#10;冬には雪がよく積もる。&#10;民家の屋根に積もった雪景色。&#10;民話の世界がそこにはあった。</説明> 
</情報> 
            </画像> 
        For Each result In From c In photoComment.Descendants("情報"Select c 
            Dim myTextBox As New TextBox 
            
            With myTextBox 
                .Width = 250 
                .IsReadOnly = True 
                .Margin = New Thickness(10) 
                .Text = result.Element("説明").Value 
            End With 
           
            StackPanel1.Children.Add(myTextBox) 
 
            ToolTipService.SetPlacement(myTextBox, Primitives.PlacementMode.Right) 
            ToolTipService.SetToolTip(myTextBox, New Image With {.Source = New BitmapImage(New Uri(result.Attribute("ツールチップ").Value, UriKind.Relative)), .Width = 320, .Height = 240}) 
            AddHandler myTextBox.MouseEnter, AddressOf Me.myTextBox_MouseEnter 
            AddHandler myTextBox.MouseLeave, AddressOf Me.myTextBox_MouseLeave 
        Next 
    End Sub 
 
    Private Sub myTextBox_MouseEnter(ByVal sender As ObjectByVal e As MouseEventArgs) 
        Dim myTextBox As TextBox = DirectCast(sender, TextBox) 
        myTextBox.Background = New SolidColorBrush(Colors.Yellow) 
    End Sub 
 
    Private Sub myTextBox_MouseLeave(ByVal sender As ObjectByVal e As MouseEventArgs) 
        Dim myTextBox As TextBox = DirectCast(sender, TextBox) 
        myTextBox.Background = New SolidColorBrush(Colors.White) 
    End Sub 
End Class 
 
 
 

ページが読み込まれた時の処理 (MainPage_Loaded)

まず、Visual Basic の埋め込み式を用いて、XML 要素リテラルで photoComment XML 要素を作成しています。<情報> 要素の属性としてツール チップを持たせ画像名を指定しています。
<説明> 要素内の、実体参照の &#10; は改行を表します。

次に、Descendants メソッドで、子孫要素であるすべての <情報> 要素のコレクションに対して、各要素を変数 result に格納しながら、新しい TextBox のインスタンスを生成し、Text プロパティに、Element(要素名) で <説明> 要素の値を指定します。

各プロパティの設定された myTextBox オブジェクトを StackPanel に追加します。

ToolTipService.SetPlacement メソッドで、ToolTip の表示位置を右側に指定します。次に、ToolTipService.SetToolTip メソッドで、プロパティの書き込み対象オブジェクトに myTextBox を指定し、値に、Image オブジェクトを生成し、Source プロパティに、<情報> 要素の属性である、ツール チップの値 (画像名) を Attribute (属性名) で指定します。

TextBox にマウス ポインターが乗った時、myTextBox_MouseEnter プロシージャを実行し、マウス ポインターが離れたときは myTextBox_MouseLeave プロシージャを実行します。

マウス ポインターが TextBox 上にある時の処理 (myTextBox_MouseEnter)

TextBox の情報を保持している sender オブジェクトを TextBox 型に変換し、その Background プロパティに黄色を指定します。TextBox の背景色が黄色になります。

マウス ポインターが TextBox 上にないときの処理 (myTextBox_MouseLeave)

TextBox の背景色を白にします。TextBox の IsReadOnly プロパティには True を指定して、編集を不可としていますので、背景色はグレーがかって表示されています。

実行結果

実行結果は図 1 のようになります。

図 1

図 1 マウス ポインターがある TextBox の背景色が黄色に変わり、関連する画像が ToolTip で右側に表示されている様子。(SetToolTipImage_01.png)

関連リンク


Code Recipe Code Recipe

 

ページのトップへ