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.

Seeing your code it seems that several things are missing... but putting it in an answer would not be easy. So my suggestion take a look at this introduction post: http://www.spikie.be/blog/post/2014/06/30/.aspx it will help you move to MVVM and give you databinding with viewmodels. — Depechie, Aug 17 '15 at 09:39
Pretty good tutorial : http://stackoverflow.com/questions/25613212/how-to-implement-a-navigation-button-in-shared-application-resources/25627927#25627927 — Chubosaurus Software, Aug 17 '15 at 23:42
@ChubosaurusSoftware thanks a lot, I have just done my first data binding :D — dude, Oct 04 '15 at 00:29

score 3 · Accepted Answer · edited May 23 '17 at 11:50

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.

Windows Phone 8.1 Data Binding ListView [XAML]

1 Answers1