locked
Binding a dataObject to a ListBox RRS feed

  • Question

  • I have an object that contains an image in it, I want the Listbox items to display the objects image & be bound to the object itself

    Heres my code that binds the listbox to myObjects:

    public

     

    IEnumerable<IMyObject> myObjects { get; set; }

    myListBox.ItemsSource = myObjects;  //list of myObjects

    How do I make it that the listbox items display the image associated with each of myObjects.

    Thanks

    Monday, May 3, 2010 7:26 PM

Answers

  • Perhaps you can use specify image path in your data object ImagePath property.  In ListBox.ItemTemplate DataTemplate, bind Image.Source to the object ImagePath property.  Please see example below.

    <Window x:Class="BindListBoxItemToImage.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">
        <StackPanel>
            <ListBox ItemsSource="{Binding}">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Image Source="{Binding ImagePath}"/>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </StackPanel>
    </Window>

    using System.Collections.Generic;
    using System.Windows;

    namespace BindListBoxItemToImage
    {
        public partial class MainWindow : Window
        {
            public MainWindow()
            {
                InitializeComponent();
                DataContext = new List<MyObject>
                {
                    new MyObject{ImagePath = "image1.png"},
                    new MyObject{ImagePath = "image2.png"},
                };
            }
        }
        public class MyObject
        {
            public string ImagePath { set; get; }
        }
    }


    William
    • Marked as answer by rgarf Tuesday, May 4, 2010 7:14 PM
    Monday, May 3, 2010 8:51 PM

All replies

  • Perhaps you can use specify image path in your data object ImagePath property.  In ListBox.ItemTemplate DataTemplate, bind Image.Source to the object ImagePath property.  Please see example below.

    <Window x:Class="BindListBoxItemToImage.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">
        <StackPanel>
            <ListBox ItemsSource="{Binding}">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Image Source="{Binding ImagePath}"/>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </StackPanel>
    </Window>

    using System.Collections.Generic;
    using System.Windows;

    namespace BindListBoxItemToImage
    {
        public partial class MainWindow : Window
        {
            public MainWindow()
            {
                InitializeComponent();
                DataContext = new List<MyObject>
                {
                    new MyObject{ImagePath = "image1.png"},
                    new MyObject{ImagePath = "image2.png"},
                };
            }
        }
        public class MyObject
        {
            public string ImagePath { set; get; }
        }
    }


    William
    • Marked as answer by rgarf Tuesday, May 4, 2010 7:14 PM
    Monday, May 3, 2010 8:51 PM
  • If you have an actual image object, you can use william's approach with a valueconverter that returns a bitmapimage object.
    Tuesday, May 4, 2010 2:04 AM