Question

I have an ObservableCollection of objects as follows:

public class UserDataViewModel
{
  private ObservableCollection<CategoryItem> _data = 
                                       new ObservableCollection<CategoryItem>();

  public ObservableCollection<CategoryItem> Data
  {
    get { return _data; }
    private set { }
  }
  // Other methods to set Data
}

The CategoryItem class is defined as:

public class CategoryItem : INotifyPropertyChanged
{
  private string _name = null;
  private ObservableCollection<EntryItem> _entries = 
                                 new ObservableCollection<EntryItem>();

  public string Name
  {
    get { return _name; }
    set {
      if( value != _name ) {
        _name = value;
        NotifyPropertyChanged( "Name" );
      }
    }
  }

  public ObservableCollection<EntryItem> Entries
  {
    get { return _entries; }
    set {
      if( value != _entries ) {
        _entries = value;
        NotifyPropertyChanged( "Entries" );
      }
    }
  }
  // INotifyPropertyChanged code follows
}

The EntryItem class is defined as:

public class EntryItem : INotifyPropertyChanged
{
  private string _name = null;

  public string Name
  {
    get { return _name; }
    set {
      if( value != _name ) {
        _name = value;
        NotifyPropertyChanged( "Name" );
      }
    }
  }
  // INotifyPropertyChanged code follows
}

I’m trying to bind this to a ListBox. Each ListBoxItem consists of 2 TextBlocks. I want the first TextBlock to display the EntryItem.Name property and the second to display the CategoryItem.Name property. Here’s what I tried in XAML (without success):

<ListBox x:Name="MyListBox"
         Margin="0,0,-12,0"
         ItemsSource="{Binding Data}">
  <ListBox.ItemTemplate>
    <DataTemplate>
      <StackPanel Margin="0,0,0,17">
        <!--This should display EntryItem.Name-->
        <TextBlock Text="{Binding Entries.Name}"
                   TextWrapping="Wrap"
                   Margin="12,0,0,0"
                   Style="{StaticResource PhoneTextExtraLargeStyle}" />

        <!--This should display CategoryItem.Name-->
        <TextBlock Text="{Binding Name}"
                   TextWrapping="Wrap"
                   Margin="12,-6,0,0"
                   Style="{StaticResource PhoneTextSubtleStyle}" />
      </StackPanel>
    </DataTemplate>
  </ListBox.ItemTemplate>
</ListBox>

In the code-behind for this page I’m setting:

DataContext = App.ViewModel; // ViewModel is of type UserDataViewModel

I keep getting the binding error:

System.Windows.Data Error: BindingExpression path error: 'Name' property not found on 'System.Collections.ObjectModel.ObservableCollection`1[NestedCollection.ViewModels.EntryItem]' 'System.Collections.ObjectModel.ObservableCollection`1[NestedCollection.ViewModels.EntryItem]' (HashCode=123081170). BindingExpression: Path='Entries.Name' DataItem='NestedCollection.ViewModels.CategoryItem' (HashCode=121425257); target element is 'System.Windows.Controls.TextBlock' (Name=''); target property is 'Text' (type 'System.String')..

NestedCollection is the name of this project and all of the above classes are in the NestedCollection.ViewModels namespace.

Only the contents of the second TextBlock are being displayed. How do I fix this?

Thanks for your help, this has been driving me nuts for a few hours now!

EDIT:

Suppose the Data collection has 2 entries, “Credit Cards” and “Email Accounts” (these are Name property of each CategoryItem object in the collection. Say the first CategoryItem has the EntryItem objects “Visa”, “Mastercard” and “American Express”, and the second CategoryItem object has the EntryItem objects “GMail” and “Hotmail”, then I want the ListBox to display:

Visa
Credit Cards

Mastercard
Credit Cards

American Express
Credit Cards

GMail
Email Accounts

Hotmail
Email Accounts

I realize that the Entries property of Data does not have a Name property, each entry within it does. Is there anyway to index into the Entries in the XAML binding?

Answer 1

You are trying to bind a ObservableCollection<T> to a TextBox. Think about it.

ObservableCollection<EntryItem> does not have a property named Name. EntryItem class does.

I suggest you use an ItemsControl instead or use a Converter to convert EntryItem names into a comma separated string.

After looking at your edit:

Try following code:

<ListBox x:Name="MyListBox"
            Margin="0,0,-12,0"
            ItemsSource="{Binding Data}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid Name="RootGrid">
                <ItemsControl ItemsSource="{Binding Entries}">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Margin="0,0,0,17">
                                <!--This should display EntryItem.Name-->
                                <TextBlock Text="{Binding Name}"
                                            TextWrapping="Wrap"
                                            Margin="12,0,0,0"
                                            Style="{StaticResource PhoneTextExtraLargeStyle}" />
                                <!--This should display CategoryItem.Name-->
                                <TextBlock Text="{Binding ElementName=RootGrid, Path=DataContext.Name}"
                                            TextWrapping="Wrap"
                                            Margin="12,-6,0,0"
                                            Style="{StaticResource PhoneTextSubtleStyle}" />
                            </StackPanel>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

–EDIT–

Looks like it’s a known problem in Silverlight 3.

http://forums.silverlight.net/forums/p/108804/280986.aspx

To workaround that, either put a reference of CategoryItem in EntryItem named Parent or something similar to access it.

public class EntryItem : INotifyPropertyChanged
{
    public CategoryItem Parent { get; set; }
    ....
}

Or as discussed in the link above, put your DataTemplate into a UserControl for it to work.