title: What is the best way to create a menu bar that follows the MVVM paradigm?
body: <p>This is my first question on SO, so <em>Hello</em>.</p>
  
  <p>I'm pretty new to WPF and so I decided to try and create a GUI for a library I created in the past. I wanted to create a menu strip/line/bar for the application and this is pretty simple to do with the Menu control. However, I saw mentions of MVVM and looked it up, and decided I wanted to create the menu dynamically from a collection.</p>
  
  <p>This is all well and good, I found a lot of material regarding the subject and ended up with the following ViewModel for my MenuItems:</p>
  
  <pre><code>class MenuItemViewModel
  {
      public string Text { get; set; }
      public ICommand Command { get; set; }
      public ObservableCollection&lt;MenuItemViewModel&gt; Children
      {
          get
          {
              return new ObservableCollection&lt;MenuItemViewModel&gt;(children);
          }
      }
  
      private List&lt;MenuItemViewModel&gt; children;
  
      public MenuItemViewModel()
      {
          children = new List&lt;MenuItemViewModel&gt;();
      }
  }
  </code></pre>
  
  <p>And the View (with extras):</p>
  
  <pre><code>&lt;Window x:Class="GUI.MainWindow"
      xmlns=""
      "
      "
      Title="HTX-Formler" Height="350" Width="525"
      WindowStartupLocation="CenterScreen"&gt;
  &lt;Window.Resources&gt;
      &lt;Style TargetType="{x:Type MenuItem}"&gt;
          &lt;Setter Property="Header" Value="{Binding Path=Text}"/&gt;
          &lt;Setter Property="Command" Value="{Binding Path=Command}"/&gt;
      &lt;/Style&gt;
      &lt;HierarchicalDataTemplate 
      DataType="{x:Type vm:MenuItemViewModel}"
      ItemsSource="{Binding Path=Children}"&gt;
      &lt;/HierarchicalDataTemplate&gt;
  &lt;/Window.Resources&gt;
  
  &lt;DockPanel KeyboardNavigation.TabNavigation="None"&gt;
      &lt;Menu DockPanel.Dock="Top" ItemsSource="{Binding Path=Children}" /&gt;
  &lt;/DockPanel&gt;
  </code></pre>
  
  <p></p>
  
  <p>As far as I can tell, the binding is fine, but whatever I do, I cannot get the menu to display anything what so ever.<br>
  I have a feeling it is because I am using the wrong ItemsSource, so I tried doing the following:</p>
  
  <pre><code>class MainWindowViewModel
  {
      #region Fields
  
      ReadOnlyCollection&lt;MenuItemViewModel&gt; _menuItems;
  
      #endregion
  
      #region Menu
  
      public ReadOnlyCollection&lt;MenuItemViewModel&gt; Children
      {
          get
          {
              if (_menuItems == null)
              {
                  List&lt;MenuItemViewModel&gt; menuItems = this.PopulateMenu();
                  _menuItems = new ReadOnlyCollection&lt;MenuItemViewModel&gt;(menuItems);
              }
              return _menuItems;
          }
      }
  
      List&lt;MenuItemViewModel&gt; PopulateMenu()
      {
          return new List&lt;MenuItemViewModel&gt;
          {
              new MenuItemViewModel()
          };
      }
  
      #endregion
  }
  </code></pre>
  
  <p>But to no avail. I realise that the collection has the same name as the Children property, but changing the name of the col. has no effect.  </p>
  
  <p><strong>Summary</strong>  </p>
  
  <p>What is the best way to create the menu bar in this way?<br>
  What is the best way to populate the menu collection?</p>
  
  <p>A great deal of inspiration were taking from the following sources:  </p>
  
  <p>Yes, some of the links are to SO.<br>
  No, I do not think this is a duplicate question, as I think that the aforementioned sources are missing critical parts which are inherent to my understanding. If this is somehow a duplicate, I would appreciate it if someone would point out the information i missed.</p>
  
  <p>I apologize for the triviality of this and knowing my brain, the answer is probably really simple, but I am literally at my wit's end here, so any and all answers will be appreciated.</p>