Update ListBox Items when there are changes in property of element in ObservableCollection

Question

I am a newbie with windows phone development. I have a class named 'State'. It keeps the name and capital of the state. I have implemented INotifyPropertyChanged Interface.

public class State:INotifyPropertyChanged
{
    private string _name;
    private string _capital;
    public State() { }
    public State(string name, string capital)
    {
        this.Name=name;
        this.Capital=capital;
    }
    public string Name
    {   get
        {
            return _name;
        }
        set
        { 
            _name=value;
            OnPropertyChanged(this,"Name");
            OnPropertyChanged(this, "Name");
        }
    }
    public string Capital
    {
        get
        {
            return _capital;
        }
        set
        {
            _capital = value;
            OnPropertyChanged(this, "Capital");
            OnPropertyChanged(this, "Name");
        }    
    }
    public override string ToString()
    {
        return (Name + " " + Capital );
    }

    public event PropertyChangedEventHandler PropertyChanged;  
    public void OnPropertyChanged(object sender,string Property)  
    {  
        if (PropertyChanged != null)  
        {  
            PropertyChanged(sender, new PropertyChangedEventArgs(Property));  
        }  
    }  
}

The ObservableCollection maintains my list of states. I want to update the changes in one property of one element of the Collection and reflect the changes in ListBox. However the changes are not reflected. Here is my MainPage class. I change the property value on button click event.

public partial class MainPage : PhoneApplicationPage
{
    private ObservableCollection<State> MyStatelist;

    public MainPage()
    {
        InitializeComponent();
        MyStatelist = new ObservableCollection<State>();
        MyStatelist.Add(new State("State1","Capital1"));
        States.ItemsSource = MyStatelist;
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        MyStatelist[0].Name = "Abcd";
        t1.Text = MyStatelist[0].Name;
    }
}

Here is my XAML code

<ListBox x:Name="States" Margin="0,10" ItemsSource="{Binding MyStatelist Mode=TwoWay}" ScrollViewer.VerticalScrollBarVisibility="Visible" Background="White" Foreground="Black" Height="Auto" Width="Auto"  >
    </ListBox>

Is there anyway i can notify the listbox that it has to update.

Thanks A Lot!!

Answer 1

You bind ObservableCollection<State> twice. First, you create new object in MainPage constructor. And this is enough. When you do it in XAML ItemsSource="{Binding MyStatelist Mode=TwoWay}" , new instance of ObservableCollection<State> is created. That's why MyStatelist[0].Name = "Abcd" doesn't work because MyStatelist is not set as the source of items anymore. Just remove the binding in XAML.

One more thing. You have to add ItemTemplate to your ListBox and correctly bind properties of State class. Here's my example that works:

<ListBox x:Name="States" Margin="0,10" 
         Grid.Row="1"
         ScrollViewer.VerticalScrollBarVisibility="Visible" 
         Background="White" 
         Foreground="Black" 
         Height="Auto" 
         Width="Auto">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Name}" Margin="0, 0, 12, 0"/>
                <TextBlock Text="{Binding Capital}"/>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Answer 2

You are not binding to the properties yet. Use this instead:

<ListBox x:Name="States" Margin="0,10" ScrollViewer.VerticalScrollBarVisibility="Visible" Background="White" Foreground="Black" Height="Auto" Width="Auto"  >
        <ListBox.ItemTemplate>
            <DataTemplate>
                <TextBlock>
                    <TextBlock.Text>
                        <MultiBinding StringFormat="{}{0} {1}">
                            <Binding Path="Name" />
                            <Binding Path="Capital" />
                        </MultiBinding>
                    </TextBlock.Text>
                </TextBlock>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>