mvvm observablecollection and binding

Question

I have a model:

public class Table : ViewModelBase
{
    private int _id;
    private string _north;
    private string _east;
    private string _south;
    private string _west;

    public int Id
    {
        get
        {
            return _id;
        }
        set
        {
            _id = value; OnPropertyChanged();
        }
    }

    public string North
    {
        get { return _north; }
        set { _north = value; OnPropertyChanged();}
    }

    public string East
    {
        get { return _east; }
        set { _east = value; OnPropertyChanged();}
    }

    public string South
    {
        get { return _south; }
        set { _south = value; OnPropertyChanged();}
    }

    public string West
    {
        get { return _west; }
        set { _west = value; OnPropertyChanged();}
    }
}

Also ViewModel where tables list declared:

            Tables = new ObservableCollection<Table>();

And in XAML:

<ScrollViewer.Resources>
                <ItemsPanelTemplate x:Name="MyWrapPanel">
                    <toolkit:WrapPanel MinWidth="250" Width="{Binding ViewportWidth, ElementName=MyScrollViewer}" />
                </ItemsPanelTemplate>
            </ScrollViewer.Resources>

            <ItemsControl ItemsSource="{Binding Tables}" ItemsPanel="{StaticResource MyWrapPanel}" Grid.RowSpan="2" Grid.Row="1">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <controls:TableControl 
                            TableNumber="{Binding Id}"
                            North="{Binding North}"
                            East="{Binding East}"
                            South="{Binding South}"
                            West="{Binding West}"
                            />
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>

        </ScrollViewer>

But when I add elements to Tables list, there is all OK. But

TableNumber="{Binding Id}"
North="{Binding North}"
East="{Binding East}"
South="{Binding South}"
West="{Binding West}"

are not bound indeed.

Answer 1

In the Xaml file of your user control named TableControl , add DataContext={Binding} in the root element and I think it should then work (if it's not present).

It could also be not working if you have DataContext set inside the code behind of your user control's (eg TableControl.xaml.cs ) file to something like this.DataContext = this; which makes user control not use the DataContext of Tables collection.

You can use this SO Answer to check what exactly is in the DataContext of your user control TableControl .

Edit:

Try below also, because as per your comment, DataContext for TableControl is conflicting:

<DataTemplate>
    <controls:TableControl DataContext="{Binding}" 
        TableNumber="{Binding Id}"
        North="{Binding North}"
        East="{Binding East}"
        South="{Binding South}"
        West="{Binding West}"
        />
</DataTemplate>