How to bind an itemSource to a list in xaml

Question

In C#:

namespace Slider
{
public partial class MainPage : PhoneApplicationPage
{
    // Constructor
    private Popup popup;
    private BackgroundWorker backroungWorker;
    public List<Pages> pages;

In XAML:

<phone:PhoneApplicationPage
x:Class="Starz.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
etc....

<phone:PivotItem Header="Browse Pages">
            <!--Double line list no text wrapping-->
            <phone:LongListSelector x:Name="pages" Margin="0,0,-12,0"  ItemSource ="{Binding pages}">

The thing is that am in the MainPage and the ItemSource has a datacontext of MainViewModel. what can I do to simply bind the longListSelector's itemSource to the list that I created in c# ??. As you can see am still a beginner ..... Thanks in advance

Answer 1

You can't bind to a List or the View (xaml) will never be notified when the list change. That's why you have to use an ObservableCollection.

Here an exemple similar with the MVVM pattern and a datagrid :

MVVM Exemple

Let's say you have got a windows with a datagrid :

<Window x:Class="WpfApplication7.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <DataGrid ItemsSource="{Binding Personels}">
        <DataGrid.Columns>
            <DataGridTextColumn Header="Nom" Binding="{Binding Nom}" Width="200"></DataGridTextColumn> 
        </DataGrid.Columns>
    </DataGrid>
</Window>

We have to define his datacontext (or the binding won't know where to find) :

namespace WpfApplication7
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            this.DataContext = new MainViewModel(this);
        }
    }
}

Then we can define the ViewModel (datacontext of the windows) :

class MainViewModel : ViewModelBase
    {
        /// <summary>
        /// Référence de la fenêtre principale
        /// </summary>
        private MainWindow mainWindow;

        /// <summary>
        /// Liste des personels
        /// </summary>
        private ObservableCollection<Personel> personels = new ObservableCollection<Personel>();


        public ObservableCollection<Personel> Personels
        {
            get 
            {
                return personels;
            }
        }

        /// <summary>
        /// Constructeur de la classe
        /// </summary>
        /// <param name="mainWindow">Référence de la fenêtre principale</param>
        public MainViewModel(MainWindow mainWindow)
        {
            this.mainWindow = mainWindow;

            AddPersonel("Toto");

            AddPersonel("Jack");

            AddPersonel("Momo");

            AddPersonel("Momo");

            AddPersonel("Momo");

            AddPersonel("Momo");
        }

        private void AddPersonel(string namePersonel)
        {
            personels.Add(new Personel() { Name = namePersonel });
            OnPropertyChanged("Personels");
        }
    }

    class Personel
    {
        private string name = "NoName";

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

MainViewModel must implement INotifyPropertyChanged to notifies controls that a property value has changed. :

public abstract class ViewModelBase : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        protected virtual void OnPropertyChanged(string propertyName)
        {
            if (this.PropertyChanged != null)
            {
                this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }