title: What is the best way in MVVM to build a menu that displays various pages?
body: <p>I want to build a simple application with the MVVM pattern.</p>
  
  <p>This application will have two main parts:</p>
  
  <ul>
  <li><strong>menu</strong> on top</li>
  <li><strong>content</strong> below</li>
  </ul>
  
  <p>The navigation will be simple:</p>
  
  <ul>
  <li>each <strong>menu item</strong> (e.g. "Manage Customers" or "View Reports") will <strong>fill the content area</strong> with a new page that has some particular functionality</li>
  </ul>
  
  <p>I have <strong>done this before with code behind</strong> where the code-behind event-handler for menu items had all pages loaded and the one that should be displayed was loaded in as a child of a StackPanel. This, however, will not work in MVVM since you don't want to be manually filling a StackPanel but displaying e.g. a "PageItem" object with a DataTemplate, etc.</p>
  
  <p><strong>So those of you who have made a simple click-menu application like this with MVVM, what was your basic application structure?</strong>  I'm thinking along these lines:</p>
  
  <p><strong>MainView.xaml:</strong></p>
  
  <pre><code>&lt;DockPanel LastChildFill="False"&gt;
  
      &lt;Menu 
          ItemsSource="{Binding PageItemsMainMenu}" 
          ItemTemplate="{StaticResource MainMenuStyle}"/&gt;
  
      &lt;ContentControl 
          Content="{Binding SelectedPageItem}"/&gt;        
  
  &lt;/DockPanel&gt;
  </code></pre>
  
  <p>where the Menu is filled with a collection of "PageItems" and the DataTemplate displays the Title of each "PageItem object" as the Header of each MenuItem.</p>
  
  <p>And the ContentControl will be filled with a View/ViewModel pair which has full functionality, but am not sure on this.</p>