Question

I am struggling to bind a DataGrid to an ObservableCollection in SIlverlight.

My very simple code is below. It currently shows a blank DataGrid. I have gone through tutorials etc and I am sure I am missing something very very basic.

Main Page XAML

<UserControl xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"  x:Class="Tower.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">

<Grid x:Name="LayoutRoot">
    <sdk:DataGrid Grid.Row="1" Margin="10" IsReadOnly="True" ColumnWidth="120" ItemsSource="{Binding Path=Tests, Mode=OneWay}" AllowDrop="True" />
</Grid>

Main Page Code Behind:

public partial class MainPage : UserControl
{
    public ObservableCollection<Test> Tests { get; set; }

    public MainPage()
    {
        InitializeComponent();

        DataContext = this;

        Tests = new ObservableCollection<Test>();
        Tests.Add(new Test() { Label = "Test1" });
        Tests.Add(new Test() { Label = "Test2" });
        Tests.Add(new Test() { Label = "Test3" });
        Tests.Add(new Test() { Label = "Test4" });
    }
}

Test Class:

public class Test : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged; 

    private String _Label;

    public String Label
    {
        get
        {
            return _Label;
        }
        set
        {
            _Label = value;
            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs("Label"));
        }
    } 
}

Answer 1

There are two issues in your code –

• You can only bind with property and not with fields. so make Test property first.

• Second, you need to set the DataContext to self for binding to work.

  public partial class MainPage : UserControl
  {
     public ObservableCollection<Test> Tests { get; set; }
  
     public MainPage()
     {
         InitializeComponent();
  
         DataContext = this;
  
         Tests = new ObservableCollection<Test>();
         Tests.Add(new Test() { Label = "Test1" });
         Tests.Add(new Test() { Label = "Test2" });
         Tests.Add(new Test() { Label = "Test3" });
         Tests.Add(new Test() { Label = "Test4" });
     }
  }
  

XAML –

<Grid x:Name="LayoutRoot">
    <sdk:DataGrid Grid.Row="1" Margin="10" IsReadOnly="True" ColumnWidth="120"
              ItemsSource="{Binding DataContext.Tests,
                RelativeSource={RelativeSource FindAncestor,
                 AncestorType= UserControl}}" AllowDrop="True" />
</Grid>

Notice propertyName – It should be Tests and not tests. This is just a side-note, follow the naming conventions of Microsoft. Property name’s first letter should be uppercase always.