CODEWITHSUNDEEP
c#wpfbindinglistbox
Viva
Viva

Reputation: 2075

binding images in listbox

I have a listbox that is populated from a datatable. I want each item to have a specific image on listbox, but I want to set the image depending of an id that each item has. for example , I have :

Products

Orange

Apple

ID

1

2

and the images are named: Item.1.png , Item.2.png

So, in my listbox,where I have apple, I will have next to it the image named: Item.2.png.

My problem is that I don't know how could I do a conditional binding . I don't want to have on my template hundreds of lines that are doing this for each item. I need to do this using a condition, like : if(product.id==1), Image.Source=Item.1.png. Is there any way to do this in wpf?

Upvotes: 2

Views: 1962

Answers (2)

DJH
DJH

Reputation: 2459

As I understand your question, every object in the listbox has an ID property, where you want the image to be item.ID.png.

You could use a converter in your binding to do this. So in your listbox template, you can have something like:

// ... Listbox template
<Image Source={Binding pathToItemID, Converter={StaticResource MyConverter}/>
// ... Remaining ListBox template

You will need to add the converter to the UserControl's resources:

<UserControl.Resources>
    <xmlnsPointingToConverter:MyConverter x:Key="MyConverter"/>
</UserControl.Resources>

Then add a MyConverter class which implements IValueConverter:

public class MyConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        return string.Format("item.{0}.png", value);
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Upvotes: 3

Sheridan
Sheridan

Reputation: 69987

It sounds to me like you need an IdToImageConverter that will decides which Image should be shown dependant on the value of the Id property. Something like this should do the trick:

[ValueConversion(typeof(int), typeof(ImageSource))]
public class IdToImageConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value.GetType() != typeof(int) || targetType != typeof(ImageSource)) return false;
        int id = (int)value;
        if (id < 0) return DependencyProperty.UnsetValue;
        string imageName = string.Empty;
        switch (id)
        {
            case 1: imageName = "Item.1.png"; break;
            case 2: imageName = "Item.2.png"; break;
        }
        if (imageName.IsEmpty()) return null;
        return string.Format("/AppName;component/ImageFolderName/{0}", imageName);
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return DependencyProperty.UnsetValue;
    }

You could then use it in your ListBox.ItemTemplate something like this:

<YourConvertersXmlNamespacePrefix:IdToImageConverter x:Key="IdToImageConverter" />
...
<ListBox ItemsSource="{Binding Items}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <Image Source="{Binding Id, Converter={StaticResource 
IdToImageConverter}}" />
                <TextBlock Text="{Binding Name}" Margin="5,0,0,0" />
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Upvotes: 3

Related Questions