Adding items to list using data binding in windows phone 8

Question

I am trying to add list to the items dynamically as a part of learning Data Binding. But the items are not getting added. The app is so simple to just add a string to the list.

The XAML Code is as follows

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="auto" />
        </Grid.RowDefinitions>

        <ListBox x:Name="TotalItems" Grid.Row="0" ItemsSource="{Binding Items_OC}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid HorizontalAlignment="Stretch" Width="440">
                        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Item : " VerticalAlignment="Top"/>
                        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding Name}" VerticalAlignment="Top" Margin="1,0,0,0" FontSize="{StaticResource PhoneFontSizeLarge}"/>
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

        <Grid Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="auto" />
                <ColumnDefinition Width="auto" />
            </Grid.ColumnDefinitions>
            <TextBox x:Name="NewItem" Grid.Column="0" TextWrapping="Wrap" Width="359"/>
            <Button x:Name="Add" Grid.Column="1" Content="Add"/>

        </Grid>
    </Grid>`

The XAML.CS code is as follows

    public ObservableCollection<Items> items_OC;
    public ObservableCollection<Items> Items_OC
    {
        get
        {
            return items_OC;
        }
        set
        {
            if (items_OC != value)
            {
                MessageBox.Show("Item to added to collection");
                items_OC = value;
                NotifyPropertyChanged("Items_OC");
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    private void NotifyPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }

    public class Items : INotifyPropertyChanged, INotifyPropertyChanging
    {
        string name;

        public string Name
        {
            get
            {
                return name;
            }
            set
            {
                if (name != value)
                {
                    NotifyPropertyChanging("Name");
                    name = value;
                    NotifyPropertyChanged("Name");
                }
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        private void NotifyPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }

        public event PropertyChangingEventHandler PropertyChanging;

        private void NotifyPropertyChanging(string propertyName)
        {

            if (PropertyChanging != null)
            {
                PropertyChanging(this, new PropertyChangingEventArgs(propertyName));
            }
        }

    }
    private void Add_Click(object sender, RoutedEventArgs e)
    {
        Items it = new Items { Name = NewItem.Text };

        Items_OC.Add(it);
    }

Thanks for the help..

Answer 1

What your code seems missing is setting DataContext. Generally, binding resolves path from DataContext property. When you bind ItemsSource property this way :

<ListBox x:Name="TotalItems" Grid.Row="0" ItemsSource="{Binding Items_OC}" ...>

application will search Items_OC property of ListBox's DataContext. Currently, it won't find the property because DataContext is null. You can set DataContext to xaml.cs file from C# code like this :

this.DataContext = this;

or from XAML :

<phone:PhoneApplicationPage 
    .......
    .......
    DataContext="{Binding RelativeSource={RelativeSource Self}}"
    />

Answer 2

Item.cs:

public class Item
{
    public string Name { get; set; }
}

MainPage.xaml:

<Grid x:Name="ContentPanel">
    <ListBox x:Name="TotalItems"
             ItemsSource="{Binding Items}"
             VerticalAlignment="Top">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Vertical">
                    <TextBlock Text="Item :" />
                    <TextBlock Text="{Binding Name}" />
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

    <StackPanel Orientation="Vertical"
                VerticalAlignment="Center"
                Margin="0,10,0,0">
        <TextBox x:Name="NewItemTextBox" />
        <Button x:Name="AddNewItem"
                Content="Add"
                Click="AddNewItem_Click" />
    </StackPanel>
</Grid>

MainPage.cs:

    public ObservableCollection<Item> Items { get; set; }

    public MainPage()
    {
        InitializeComponent();

        Items = new ObservableCollection<Item> { new Item { Name = "Roman" } };

        DataContext = this;
    }

    private void AddNewItem_Click(object sender, RoutedEventArgs e)
    {
        Items.Add(new Item { Name = NewItemTextBox.Text });
    }

Make things simple, but not simpler!