Set Tooltip Image in Code for Listbox Items - wpf

Question

I have a class ExpanderItems which gets loaded during runtime and a list of these is set as the DataContext of a ListBox. Now what I want to do is show the corresponding Images as a Tooltip for each Item. Any suggestions how to do that?
public class ExpanderItem
{
private String mItemName = "empty";
public String ItemName
{
get { return mItemName; }
set { mItemName = value; }
}
private Image mItemSymbol = null;
public Image ItemSymbol
{
get { return mItemSymbol; }
set { mItemSymbol = value; }
}
}
public List<ExpanderItem> getExpanderItems()
{
List<ExpanderItem> ItemList = new List<ExpanderItem>();
ExpanderItem i0 = new ExpanderItem();
i0.ItemName = "Constant";
i0.ItemSymbol = new Image();
BitmapImage bi = new BitmapImage();
bi.BeginInit();
bi.UriSource = new Uri(#"/resources/Constant.png", UriKind.RelativeOrAbsolute);
bi.EndInit();
i0.ItemSymbol.Source = bi;
ItemList.Add(i0);
...
}
In the Window where the Items are used I am calling:
void WindowMain_Loaded(object sender, RoutedEventArgs e)
{
lbItems.DataContext = SomeService.getExpanderItems();
}
XAML Looks like:
<ListBox x:Name="lstItems" ItemsSource="{Binding}">
<ListBox.ItemTemplate>
<DataTemplate>
<Label Content="{Binding ItemName}">
</Label>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

Answer 1

Compiled and tested solution.
XAML:
<ListBox x:Name="lb"
ItemsSource="{Binding}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="ToolTip">
<Setter.Value>
<Image Stretch="UniformToFill"
Source="{Binding ItemSymbol}" />
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Label Grid.Column="1"
Content="{Binding ItemName}">
</Label>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Code:
using System;
using System.Collections.Generic;
using System.Windows;
using System.Windows.Media.Imaging;
namespace Test
{
public class ExpanderItem
{
private String mItemName = "empty";
public String ItemName
{
get { return mItemName; }
set { mItemName = value; }
}
private BitmapImage mItemSymbol = null;
public BitmapImage ItemSymbol
{
get { return mItemSymbol; }
set { mItemSymbol = value; }
}
}
public partial class MainWindow : Window
{
public MainWindow()
{
this.InitializeComponent();
lb.DataContext = this.getExpanderItems();
}
public List<ExpanderItem> getExpanderItems()
{
List<ExpanderItem> ItemList = new List<ExpanderItem>();
ExpanderItem i0 = new ExpanderItem
{
ItemName = "Constant",
ItemSymbol = new BitmapImage(new Uri(#"/resources/constant.png", UriKind.RelativeOrAbsolute))
};
ItemList.Add(i0);
ExpanderItem i1 = new ExpanderItem
{
ItemName = "Constant",
ItemSymbol = new BitmapImage(new Uri(#"/resources/constant.png", UriKind.RelativeOrAbsolute))
};
ItemList.Add(i1);
return ItemList;
}
}
}

Answer 2

I found a solution like this, but this does not add the tooltip to the whole listbox item but just to the textbox of it.
public class ExpanderItem
{
private String mItemName = "empty";
public String ItemName
{
get { return mItemName; }
set { mItemName = value; }
}
private Image mItemSymbol = null;
public Image ItemSymbol
{
get { return mItemSymbol; }
set { mItemSymbol = value; }
}
}
public List<ExpanderItem> getExpanderItems()
{
List<ExpanderItem> ItemList = new List<ExpanderItem>();
ExpanderItem i0 = new ExpanderItem();
i0.ItemName = "Constant";
i0.ItemSymbol = new Uri(#"/resources/Constant.png", UriKind.RelativeOrAbsolute);
ItemList.Add(i0);
...
}
XAML:
<ListBox.ItemTemplate>
<DataTemplate>
...
<Label Grid.Column="1" Content="{Binding ItemName}">
<Label.ToolTip>
<Border BorderBrush="Black"
BorderThickness="1"
CornerRadius="2">
<Image Source="{Binding ItemSymbol}" />
</Border>
</Label.ToolTip>
</Label>