Windows Phone 8.1 Data Binding ListView [XAML]

Question

C# :

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();

            this.NavigationCacheMode = NavigationCacheMode.Required;
        }

        public class data
        {
            public string id { get; set; }
        }

        List<data> datalist = new List<data>();

        int counter = 100000000;

        private void button_Click(object sender, RoutedEventArgs e)
        {
            data add = new data();
            counter += 1;
            add.id = counter.ToString();
            datalist.Add(add);
        }
    }

XAML :

<Page
    x:Class="SocialApp1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SocialApp1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <Button x:Name="button" 
                Content="Get" HorizontalAlignment="Left" Margin="67,550,0,0" VerticalAlignment="Top" Click="button_Click" Width="368"/>
        <ListView Margin="24,0,19,311">
            <ListView.ItemTemplate>
              <DataTemplate>
                <Border CornerRadius="20" Background="DodgerBlue" Height="65">
                  <StackPanel Orientation="Horizontal">
                    <TextBlock TextWrapping="Wrap" Margin="10" Text="{Binding id}" FontSize="20" />
                  </StackPanel>
                </Border>
              </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
</Page>

Hi, I have been trying to do data binding in windows phone 8.1. I post all the code just in case I am missing something. How do I make it to work? because when I deployed it on my phone and when I press the Get button, it does not do anything.

Desired output :

1) Increment the id each time the user pressed the the Get button.

2) Add the new id in the datalist .

3) Present it in the ListView.

Answer 1

To update the items in your ListView it has to be notified that the bound property has changed. In this case you have collection that you're adding items to, but the ListView is not being notified that the collection changed. To notifiy the ListView that the collection has changed you have to use an ObservableCollection<T> or a class that's derived from it. This means that you have to change your List<data> to an ObservableCollection<data>

ObservableCollection<data> dataList { get; set; }

If you want to add custom methods/properties to the collection or make it easier to declare instances via XAML you may want to create a subclass of ObservableCollection<T> to avoid refactoring later. Why you might want to create a subclass instead of directly using ObservableCollection<T> is explained in the answer to this question: Collection that inherits from ObservableCollection - What are the benefits?

If you run into similar issues later, for example the ListView not changing when the items of the collection are changed you should have a look at the INotifyPropertyChanged -interface.