title: MVVM + multilevel/nested databinding
body: <h1>The Structure</h1>
  
  <p>The scenario is that I have a Pivot where each item is the menu of a certain day. Inside that PivotItem I need to display the dishes on the menu, grouped by category (e.g. soups, desserts, ...).</p>
  
  <p>I have implemented this with the MVVM-model.</p>
  
  <p>I thus have the folowing models:</p>
  
  <pre><code>public class Menu{
      public string Date;
      public List&lt;DishList&gt; Categories;
  }
  public class DishList
  {
      public string Category;
      public List&lt;Dish&gt; Dishes;
  }
  public class Dish
  {
      public string Name;
      public string Price;
  }
  </code></pre>
  
  <p>Edit: these are simplified here, the actual structure for each field is like this:</p>
  
  <pre><code>    private string _date;
  
      //Get_Set
      public string Date
      {
          get
          {
              return _date;
          }
          set
          {
              if (value != _date)
              {
                  _date = value;
              }
          }
      }
  </code></pre>
  
  <p>So the structure would be like this: a PivotElement containt a Menu-object. Inside it, I show Categories, a number of DishLists. Inside that Dishlist, I show the Category and the different Dishes, each with it's Name and Price. A mockup to make things a bit more clear (pdf-file on SkyDrive); <a href="http://sdrv.ms/12IKlWd" rel="nofollow noreferrer">http://sdrv.ms/12IKlWd</a></p>
  
  <p>I have the following viewmodel</p>
  
  <pre><code>public class MenuViewModel : INotifyPropertyChanged
  {
      private ObservableCollection&lt;Menu&gt; _Menus;
  }
  </code></pre>
  
  <p>The view that should implement (the structure) of the desired layout is as following:</p>
  
  <pre><code>&lt;phone:Pivot 
          ItemsSource="{Binding Menus}"&gt;
          &lt;phone:Pivot.HeaderTemplate&gt;
              &lt;DataTemplate&gt;
                  &lt;TextBlock Text="{Binding Date}" /&gt;
              &lt;/DataTemplate&gt;
          &lt;/phone:Pivot.HeaderTemplate&gt;
          &lt;phone:Pivot.ItemTemplate&gt;
              &lt;DataTemplate&gt;
                  &lt;ItemsControl
                      ItemsSource="{Binding Categories}"&gt;   
                      &lt;TextBlock
                          Text="{Binding Category}"/&gt;
                      &lt;ItemsControl
                          x:Name="Dishes"
                          ItemsSource="{Binding Dishes}"&gt;
                          &lt;ItemsControl.ItemTemplate&gt;
                              &lt;DataTemplate&gt;
                                  &lt;Grid&gt;
                                      &lt;Grid.ColumnDefinitions&gt;
                                          &lt;ColumnDefinition Width="300"/&gt;
                                          &lt;ColumnDefinition Width="*"/&gt;
                                      &lt;/Grid.ColumnDefinitions&gt;
  
                                      &lt;TextBlock 
                                          Grid.Column="1" 
                                          Text="{Binding Name}"/&gt;
                                      &lt;TextBlock 
                                          Grid.Column="2" 
                                          Text="{Binding Price}"/&gt;
                                  &lt;/Grid&gt;
                              &lt;/DataTemplate&gt;
                          &lt;/ItemsControl.ItemTemplate&gt;
                      &lt;/ItemsControl&gt;
                  &lt;/ItemsControl&gt;
              &lt;/DataTemplate&gt;
          &lt;/phone:Pivot.ItemTemplate&gt;
      &lt;/phone:Pivot&gt;
  </code></pre>
  
  <p>As you can see, there's nested databinding to get to the data it needs.</p>
  
  <p>The only code I then do on the page is</p>
  
  <pre><code>DataContext = App.ViewModel;
  </code></pre>
  
  <h1>The Problem</h1>
  
  <p>When I launch it up, I get the correct Data displayed in the PivotItems header, and the correct number of PivotItems. Ufortunately, that's it; the content of the PivotItem stays empty. The first level of databinding thus works, but no further.</p>
  
  <p>The way I was thinking</p>
  
  <ul>
  <li>1st level: each PivotItem is linked to an object of type Menu, with header Menu.Date</li>
  <li>2nd level: Inside that PivotItem I set the ItemsSource of a ItemsControl to that Menu.Categories</li>
  <li>3rd level : The ItemsSource now is Menu.Categories.Dishes</li>
  </ul>
  
  <p>I have already searched quite a bit and fiddled around with Datacontext and ItemsSource and different kinds of "{Binding ...}", but I can't get it to work. I would like to do the binding in xaml, and not in the code-behind.</p>
  
  <h1>Notes</h1>
  
  <ul>
  <li>The only function is to display data. The data is stationary and loaded once from a file.
  That's why I chose ItemsControl instead of ListBox, there is no need to select anything.</li>
  <li>This is a MVVM-approach to my previous question: <a href="https://stackoverflow.com/questions/14004493/databinding-dynamic-pivot">Databinding + Dynamic Pivot</a></li>
  </ul>