Silverlight Data Binding for Collection in Stack Panel

Question

I'm new to Silverlight, so I don't have a complete grasp of all the controls at my disposal. What I would like to do is use databinding and a view model to maintain a collection of items. Here is some mock code for what I'd like to do:

Model

  public class MyItem
    {
       public string DisplayText { get; set; }
       public bool Enabled { get; set; }
    }

ViewModel

public class MyViewModel : INotifyPropertyChanged
{
      private ObservableCollection<MyItem> _myItems = new ObservableCollection<MyItem>();
      public ObservableCollection<MyItem> MyItems
      {
          get { return _myItems; }
          set 
          { 
               _myItems = value
               NotifyPropertyChanged(this, "MyItems");
           } 
      }  
}

View

<Grid x:Name="LayoutRoot" Background="White">
        <StackPanel ItemsSource="{Binding MyItems}">            
            <StackPanel Orientation="Horizontal">
                <CheckBox "{Binding Enabled, Mode=TwoWay}"></CheckBox>
                <TextBlock Text="{Binding DisplayText, Mode=TwoWay}" />
            </StackPanel>                
        </StackPanel>        
    </Grid>

So my end goal would be that every time I add another MyItem to the MyItems collection it would create a new StackPanel with checkbox and textblock. I don't have to use a stack panel but just thought I'd use that for this sample.

Answer 1

Looks like you want a <ListBox>, then set the <ListBox.ItemTemplate> to your <StackPanel> something like this.....

<ListBox ItemsSource=”{Binding Classes, Source={StaticResource model}}”>           
   <ListBox.ItemTemplate>               
      <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <CheckBox "{Binding Enabled, Mode=TwoWay}"/>
                <TextBlock Text="{Binding DisplayText, Mode=TwoWay}" />
            </StackPanel>  
      </DataTemplate>
   </ListBox.ItemTemplate>
</ListBox>

here is a great example (it's WPF, but should only be minor changes for silverlight)

Answer 2

yes, looks like you want a <ListBox>

<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="SilverlightApplication4.MainPage"
Width="640" Height="480">
<UserControl.Resources>
    <DataTemplate x:Key="ItemTemplate">
        <StackPanel Orientation="Horizontal">
            <CheckBox IsChecked="{Binding Enabled, Mode=TwoWay}"/>
            <TextBlock Text="{Binding DisplayText}"/>
        </StackPanel>
    </DataTemplate>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White" DataContext="{Binding Source={StaticResource SampleDataSource}}">
    <ListBox Margin="0,0,8,0" ItemTemplate="{StaticResource ItemTemplate}" ItemsSource="{Binding Collection}"/>
</Grid>

This code will give you a ListBox with all your Data bound to a Checkbox and TextBlock with the Checkbox first and TextBox next to it.