「東雲忠太郎」の平凡な日常のできごと

2024.07.15

ツールチップ内に画像と文字を表示するためには

カテゴリ： WPFC#.NET

ツールチップ内に画像と文字を表示するためには、`ToolTip`の内容をカスタマイズする必要があります。以下のサンプルコードでは、ツールチップ内に画像と文字を表示する方法を示しています。

まず、XAMLファイルを以下のように変更します：

<Window x:Class="WpfApp.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="MainWindow" Height="350" Width="525">

<Grid>

<ListView.View>

</GridView>

</ListView.View>

<ListView.ItemTemplate>

<TextBlock.ToolTip>

</StackPanel>

</ToolTip>

</TextBlock.ToolTip>

</TextBlock>

</StackPanel>

</DataTemplate>

</ListView.ItemTemplate>

</ListView>

</Grid>

</Window>

```

次に、C#コードを以下のように変更します：

```csharp

using System.Collections.ObjectModel;

using System.Windows;

namespace WpfApp

{

public partial class MainWindow : Window

{

public MainWindow()

{

InitializeComponent();

listView.ItemsSource = new ObservableCollection<Person>

{

new Person { Name = "John Doe", Age = 30, Country = "USA", ToolTipText = "John is a software engineer from USA.", ImagePath = "Images/john.png" },

new Person { Name = "Jane Smith", Age = 25, Country = "UK", ToolTipText = "Jane is a graphic designer from UK.", ImagePath = "Images/jane.png" },

new Person { Name = "Samuel Johnson", Age = 35, Country = "Canada", ToolTipText = "Samuel is a project manager from Canada.", ImagePath = "Images/samuel.png" }

};

}

public class Person

{

public string Name { get; set; }

public int Age { get; set; }

public string Country { get; set; }

public string ToolTipText { get; set; }

public string ImagePath { get; set; }

}

```

このコードでは、`ToolTip`内に`StackPanel`を使用して、画像とテキストを横方向に並べています。`ImagePath`プロパティを使って画像のパスをバインドし、`ToolTipText`プロパティを使ってツールチップのテキストをバインドしています。これにより、ツールチップ内に画像と文字が表示されます。

注意点として、画像ファイルはプロジェクト内の適切な場所に配置し、`ImagePath`プロパティには正しいパスを設定してください。例えば、プロジェクトの`Images`フォルダ内に画像ファイルを配置する場合、`ImagePath`には相対パスとして`"Images/john.png"`のように設定します。