wpf - Set Tooltip Image in Code for Listbox Items

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>