CODEWITHSUNDEEP
wpfxamldata-bindingc#-4.0
Akshay J
Akshay J

Reputation: 5458

WPF: Image paths in ListBox, Display Image in place of path

I have a ListBox filled with paths of different images. How will I alter the ItemTemplate so that the images will be shown instead of paths(string).

Here is the code: 

<ListBox>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Image Height="50" Width="50" Source="{Binding Path=Content}" Stretch="Fill"></Image>
        </DataTemplate>
    </ListBox.ItemTemplate>
    <ListBoxItem>C:\Users\AKSHAY\Pictures\IMG0083A.jpg</ListBoxItem>
    <ListBoxItem>C:\Users\AKSHAY\Pictures\IMG0102A.jpg</ListBoxItem>
    <ListBoxItem>C:\Users\AKSHAY\Pictures\IMG0103A.jpg</ListBoxItem>
    <ListBoxItem>C:\Users\AKSHAY\Pictures\IMG0104A.jpg</ListBoxItem>
    <ListBoxItem>C:\Users\AKSHAY\Pictures\IMG0105A.jpg</ListBoxItem>
    <ListBoxItem>C:\Users\AKSHAY\Pictures\IMG0106A.jpg</ListBoxItem>
</ListBox>

Upvotes: 1

Views: 3395

Answers (3)

Fredrik Hedblad
Fredrik Hedblad

Reputation: 84656

The ItemTemplate of a ListBox is copied to the ContentTemplate of a ListBoxItem during UI generation. However, when adding the ListBoxItems directly, ItemTemplate is ignored for items already of the ItemsControls container type (ListBoxItem for ListBox, ListViewItem for ListView etc.). So in this case, you'll have to use the ContentTemplate of the ItemContainerStyle directly instead.

Also, change Source="{Binding Content}" to Source="{Binding}"

<ListBox>
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Image Height="50" Width="50" Source="{Binding}" Stretch="Fill"></Image>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ListBox.ItemContainerStyle>
    <ListBoxItem>C:\Users\AKSHAY\Pictures\IMG0083A.jpg</ListBoxItem>
    <ListBoxItem>C:\Users\AKSHAY\Pictures\IMG0102A.jpg</ListBoxItem>
    <ListBoxItem>C:\Users\AKSHAY\Pictures\IMG0103A.jpg</ListBoxItem>
    <ListBoxItem>C:\Users\AKSHAY\Pictures\IMG0104A.jpg</ListBoxItem>
    <ListBoxItem>C:\Users\AKSHAY\Pictures\IMG0105A.jpg</ListBoxItem>
    <ListBoxItem>C:\Users\AKSHAY\Pictures\IMG0106A.jpg</ListBoxItem>
</ListBox>

Upvotes: 0

Holstebroe
Holstebroe

Reputation: 5133

You could make an IValueConverter that converts a string to a ImageSource.

Something like:

public class ImagePathConverter : IValueConverter
{
  public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
  {
      return new BitmapImage(new Uri(value as string));
  }
  public object ConvertBack(xxx) { throw new NotSupportedException(); }
}

And then create a value converter resource and use that in your binding.

a resource could be defined like:

<UserControl.Resources>
   <myNameSpaceAlias:ImagePathConverter x:Key="ImagePathConverter"/>
...

and then bind with:

{Binding Path=Content, Converter={StaticResource ImagePathConverter}}

Upvotes: 2

Joseph
Joseph

Reputation: 155

You have to use a value converter in the binding and pass a bitmap image

Upvotes: 0

Related Questions