Fill listbox with data in Silverlight, which way to go?

Question

ouch, i've been doing asp.net for a few years now, and for a year asp.net mvc, and now: silverlight. Feel like a newbee again.

I want to fill a listbox with dataitems, fair enough? I want to show an imagename and an image.

This is what i've seen so far: create a datasource with dummy data, and bind the collection to the listbox (designtime). Beldn creates a datatemplate, and the dummy data is shown. But then what, create a new datasource at runtime with the real data and bind that one?

Or two: use MVVM. Create an object with a property of type ObservableCollection and let the listbox and the property co-operate. Only heard of this, so don't know how to implement it :)

Or third: Type it all in code behind: get the data, create the listboxitems, add them to the listbox (maybe hardcode the layout too, no XAML needed)

I must say the third option is the easy one because that sounds familiar, and the other two are so much different from my perspective, that i don't have a clue where to start.

I want to add: i've seen a few silverlight video's and they were all done in Blend, so the first one i have seen in Blend, the second one i've read about and the third is what i know how to do.

Long story, if you can give me a hand, i'd appreciate it.

Answer 1

you should use option two--MVVM is the way to go. the basic steps are like this:
1) define your class, deriving from INotifyPropertyChanged

public class MyImage : INotifyPropertyChanged
{
    public string ImagePath { ... }
    public bool IsChecked { ... }       
}

2) define your data template for the class so that the ListBox knows how to display the items

<ListBox>
   <ListBox.temTemplate>
      <Setter.Value>
         <DataTemplate>
            <StackPanel Orientation="Horizontal">
              <CheckBox Source="{Binding IsChecked}"/>
              <Image Source="{Binding Name}"/>
            </StackPanel>
        </DataTemplate>
     </Setter.Value>
   </Setter>
</ListBox>

4) make an observable collection and fill it with instances of your class

public class DataModel : INotifyPropertyChanged
{
    public ObservableCollection<MyImage> MyItems{...}
}
....
public class MyWindow : Page
{
    public MyWindow ()
    {
        this.DataContext = new DataModel( ); 
    }
}

5) bind the ItemsSource property of the list box to the collection

<ListBox ItemsSource="{Binding MyItems}>
   <ListBox.temTemplate>
      <Setter.Value>
         <DataTemplate>
            <StackPanel Orientation="Horizontal">
              <CheckBox Source="{Binding IsChecked}"/>
              <Image Source="{Binding Name}"/>
            </StackPanel>
        </DataTemplate>
     </Setter.Value>
   </Setter>
</ListBox>

you should check out this tutorial on ScottGu's Blog