Simple ListView data binding

Question

I'm trying to display data in a ListView with WPF and C#, and I'm confused by the different examples and methods I have seen. I'm looking for a fully working example similar to my program, or a list of pre-requisites to make it work. I'll be happy if I manage to display just 1 row of data from my collection. Currently, the list view displays nothing.

C#:

public partial class MainWindow : Window
{
    public ObservableCollection<Row> Rows { get; set; }

    public MainWindow()
    {
        InitializeComponent();
        Rows = new ObservableCollection<Row>();
        Rows.Add(new Row 
        {
            ID = "42",
            Category = "cat",
            CharLimit = 32,
            Text = "Bonjour"
        });
    }
}

public class Row
{
    public string ID { get; set; }
    public string Category { get; set; }
    public int CharLimit { get; set; }
    public string Text { get; set; }
}

XAML:

<ListView ItemsSource="{Binding Path=Rows}">
    <ListView.View>
        <GridView>
            <GridViewColumn Width="200" Header="ID" DisplayMemberBinding="{Binding Path=ID}" />
            <GridViewColumn Width="200" Header="Category" DisplayMemberBinding="{Binding Path=Category}" />
            <GridViewColumn Width="200" Header="Text" DisplayMemberBinding="{Binding Path=Text}" />
        </GridView>
    </ListView.View>
</ListView>

Thanks in advance

Solution 1

Create a viewmodel which can be set as the data context for the XAML

 public class WindowsViewModel
 {
    private ObservableCollection<RowViewModel> m_Rows;

    public ObservableCollection<RowViewModel> Rows
    {
        get { return m_Rows; }
        set { m_Rows = value; }
    }

    public WindowsViewModel()
    {
        Rows = new ObservableCollection<RowViewModel>();
        Rows.Add(new RowViewModel
            {
                ID = "42",
                Category = "cat",
                CharLimit = 32,
                Text = "Bonjour"
            });
    }
}

---

Implement the class RowViewModel in the below fashion:

 public class RowViewModel:INotifyPropertyChanged
    {
      public RowViewModel()
      {
      }
      private string m_ID;
      public string ID
      { 
            get
            {
                return m_ID;
            } 
            set 
            {
                m_ID = value;
                NotifyPropertyChanged("ID");
            }
      }
      public string Category
      { 
            get; 
            set; 
      }

      public int CharLimit
      { 
        get; 
        set; 
      }

      public string Text 
      { 
        get;
        set;
      }

    public event PropertyChangedEventHandler PropertyChanged;

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

---

In the code behind of XAML, add the code:

public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = new WindowsViewModel();
        }
    }

---

Add the update source trigger property in the listview node:

<ListView ItemsSource="{Binding Rows, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}">
            <ListView.View>
                <GridView>
                    <GridViewColumn Width="200" Header="ID" DisplayMemberBinding="{Binding Path=ID}" />
                    <GridViewColumn Width="200" Header="Category" DisplayMemberBinding="{Binding Path=Category}" />
                    <GridViewColumn Width="200" Header="Text" DisplayMemberBinding="{Binding Path=Text}" />
                </GridView>
            </ListView.View>

Solution 2

You must specify source otherwise, like in your case, it will look for the property in current context which by default, if nothing else is specified, will be DataContext. Try something like this:

<ListView ItemsSource="{Binding RelativeSource={RelativeSource AncestorType={x:Type Window}}, Path=Rows}">

Like that you specify that it should look for Rows in current Window