Bind colection to ListBox in WPF

Question

I have basic problem with WPF, I tried setting DataContext, binding to collection and somehow I still cannot get it to work. I searched way to long for such basic problem... I must be missing something very simple. I appreciate any help :)

Code-behind:

public ObservableCollection<Photo> MyPhotos = new ObservableCollection<Photo>();
public DataTemplate()
{
  InitializeComponent();
  listBox.DataContext = MyPhotos;
  MyPhotos.Add(new Photo(@"path to existing file"));
}

XAML

<Window.Resources>
  <DataTemplate DataType="{x:Type local:Photo}">
    <Border Margin="3">
      <Image Source="{Binding Source}"/>
    </Border>
  </DataTemplate>
</Window.Resources>
<Grid>
  <ListBox Name="listBox" ItemsSource="{Binding MyPhotos}" Background="Silver" Width="600" Margin="10" SelectedIndex="0"/>
</Grid>

Photo class:

public class Photo
{
  public string Source { get; set; }
  public Photo(string path)
  {
    Source = path;
  }
}

Possible duplicated https://stackoverflow.com/questions/9368506/wpf-listbox-binding — Richard, Feb 14 '19 at 08:27
What is `Photo` class? Share details. You are missing property binding. You need to implemented datatemplate — Gaurang Dave, Feb 14 '19 at 08:27

Gaurang Dave · Accepted Answer · 2019-02-14T08:36:37.227

4

You need to reference DataTemplate as ItemTemplate into your ListBox. Define Key into your DataTemplate.

<Window.Resources>
      <DataTemplate x:Key="MyItemTemplate" DataType="{x:Type local:Photo}">
        <Border Margin="3">
          <Image Source="{Binding Source}"/>
        </Border>
      </DataTemplate>
    </Window.Resources>

    <ListBox Name="listBox" ItemsSource="{Binding MyPhotos}" Background="Silver" Width="600" Margin="10" SelectedIndex="0" ItemTemplate="{StaticResource MyItemTemplate}"/>

UPDATE

Change your DataContext to this.

listBox.DataContext = this;

edited Feb 14 '19 at 08:36

answered Feb 14 '19 at 08:32

Gaurang Dave

3,956
2
15
34

@MichałTurczyn check update in my answer. Your DataContext is wrong. – Gaurang Dave Feb 14 '19 at 08:41

thuc do van · Answer 2 · 2019-02-14T09:36:41.433

2

MyPhotos have to be a Property {get; set} functions, NOT a Field

public ObservableCollection<Photo> MyPhotos { get; set; }
Code behind:

DataContext = this

NOT listBox.DataContext = MyPhotos
XAML: Add DisplayMemberPath to show data

DisplayMemberPath="Source"

edited Feb 14 '19 at 09:36

answered Feb 14 '19 at 09:02

thuc do van

131
1
7

Bind colection to ListBox in WPF

2 Answers2