Windows Phone 7: Binding a Collection to a ListBox such that a change in an Item of the Collection updates in the ListBox

Question

Sorry if this is elementary, but I've not found a good example precisely describing what I need to do to enable the following scenario:

I have two classes:

public class Thing:DependencyObject {

    // Fields
    private string name = "";


    // Properties
    public string Name
    {
        get { return name; }
        set { name = value; }
    }


    // Dependency Properties

    public int Count
    {
        get { return (int)GetValue(CountProperty); }
        set { SetValue(CountProperty, value); }
    }

    public static readonly DependencyProperty CountProperty =
        DependencyProperty.Register("Count", typeof(int), typeof(Thing), null);


    // Methods
    public override string ToString()
    {
        return DateTime.Now.ToString() + " " + this.Name + " " + this.Count.ToString();

    }

    // Constructors

    public Thing(string name)
    {
        this.Name = name;
    }

}

and a class to contain Thing objects

public class Things: DependencyObjectCollection {

The MainPage.xaml.cs file creates a couple of Thing objects and adds them to a Things collection.

public partial class MainPage : PhoneApplicationPage { Things Things = new Things();

    // Constructor
    public MainPage()
    {
        InitializeComponent();
        Thing thingA = new Thing("A");
        Thing thingB = new Thing("B");
        Things.Add(thingA);
        Things.Add(thingB);


    }

    private void Action_Click(object sender, RoutedEventArgs e)
    {
        this.Things[0].Count += 1;
        Debug.WriteLine(this.Things[0].ToString());
    }
}

My question is how to write binding code such that the ListBox displays the Things contained in the Things object AND the display of the Thing objects as strings in the ListBox are automatically updated when a Thing object's DependencyProperty Count is changed.

Specifically, what do I do the following XAML to make the above scenario happen.
That is, when I add a new Thing object to the Things object, a new item is added to the ListBox. and when I change an existing item with the Things object, the change appear in the ListBox.

In Windows Phone 7, the MainPage contains a ListBox:

    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <StackPanel>
            <ListBox x:Name="ThingsBox" />
            <Button x:Name="Action" Content="Action" Click="Action_Click"/>
        </StackPanel>
    </Grid>
</Grid>

score 0 · Answer 1 · answered Feb 11 '12 at 06:44

if you want to use binding in any way you should consider following more of a MVVM pattern,

even without it you can bind to your objects. you should be able to do something similar to the following

//code behind main page
Things ThingCollection { get; set }


//in xaml
<MainPage x:Name="_mainPage">

    <ListBox ItemsSource="{Binding ThingsCollection}" />
</MainPage>

this is a trivial example but basically what to do in the xaml.

score 0 · Accepted Answer · edited May 23 '17 at 12:20

Firstly, I would recommend using plain old objects (that implement INotifyPropertyChanged) for your model. The use of dependency objects is overkill. See this related question:

INotifyPropertyChanged vs. DependencyProperty in ViewModel

In order to bind your collection of objects to a list in such a way that the UI automatically updates as you add / remove objects, you should create an ObservableCollection and set it as the ItemsSource of the ListBox:

ObservableCollection<Thing> ThingsCollection { get; set }

<MainPage x:Name="_mainPage">
    <ListBox ItemsSource="{Binding ThingsCollection}" />
</MainPage>

The key here is that ObservableCollection implements INotifyCollectionChanged, which raises events when the collection is changed. The ListBox handles these events in order to keep the UI synchronized.

Windows Phone 7: Binding a Collection to a ListBox such that a change in an Item of the Collection updates in the ListBox

2 Answers2