Fill listbox with data in Silverlight, which way to go?
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 开发者_JS百科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.
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
精彩评论