title: WPF menu styled listbox (MVVM)
body: <p>I want to create a menu which tracks the selected item, so I'm using nested ListBoxes (since the options for Selectors <a href="http://msdn.microsoft.com/en-us/library/system.windows.controls.primitives.selector%28v=vs.100%29.aspx#inheritanceContinued" rel="nofollow">are quite limited</a>. The main ListBox is arranged horizontally, and each ListBoxItem contains a TextBlock and a StackPanel with another ListBox (this one displays vertically) to show "MenuItems" (which I also need to track the selected item). Like this:</p>
  
  <pre><code>    &lt;ListBox DockPanel.Dock="Top" Grid.Column="0" ItemsSource="{Binding DashBoards}" 
                       IsSynchronizedWithCurrentItem="True" SelectedItem="{Binding SelectedDashBoard}"&gt;
  
          &lt;ListBox.Template&gt;
              &lt;ControlTemplate TargetType="{x:Type ListBox}"&gt;
                  &lt;DockPanel&gt;
                      &lt;ScrollViewer x:Name="scrollviewer" HorizontalScrollBarVisibility="Hidden" CanContentScroll="False"&gt;
                          &lt;StackPanel IsItemsHost="True" Orientation="Horizontal" /&gt;
                      &lt;/ScrollViewer&gt;
                  &lt;/DockPanel&gt;
              &lt;/ControlTemplate&gt;
          &lt;/ListBox.Template&gt;
  
          &lt;ListBox.ItemTemplate&gt;
              &lt;DataTemplate&gt;
                  &lt;StackPanel Orientation="Vertical"&gt;
                      &lt;TextBlock Text="{Binding Name}" /&gt;
                      &lt;dx:DXExpander IsExpanded="{Binding IsSelected}"&gt;
                          &lt;ListBox ItemsSource="{Binding Sections}" 
                       IsSynchronizedWithCurrentItem="True" SelectedItem="{Binding SelectedSection}"&gt;
                              &lt;ListBox.ItemTemplate&gt;
                                  &lt;DataTemplate&gt;
                                      &lt;TextBlock Text="{Binding Metadata.Name}" /&gt;
                                  &lt;/DataTemplate&gt;
                              &lt;/ListBox.ItemTemplate&gt;
                          &lt;/ListBox&gt;
                      &lt;/dx:DXExpander&gt;
                  &lt;/StackPanel&gt; 
              &lt;/DataTemplate&gt;
          &lt;/ListBox.ItemTemplate&gt;
      &lt;/ListBox&gt;
  </code></pre>
  
  <p>I managed to display this ListBox on top of other controls, so it looks like a menu.</p>
  
  <p>Now with the problem... when I select an item in the horizontal ListBox, the Expander expands ok, but the ListBox grows in height so all other items look like they expanded too.</p>
  
  <p>How can I get to expand ONLY the selected item, without changing the height of the ListBox? </p>
  
  <p>In other words, how can I get one of the vertical ListBoxes to overflow its parent container (aka the horizontal ListBox)?</p>
  
  <p>I think I need to re-structure everything, but I have no clue how to begin. I've found some solutions that use a Canvas, but they don't seem to work in this case.</p>
  
  <p>Any help is welcome and will be diligently upvoted ;-)</p>
  
  <p>(Note: just in case it was not clear before, I need to know which element is selected in the horizontal ListBox, and also which one is selected in each individual vertical ListBox. This binds to the corresponding ViewModel which tracks selection, and both the horizontal and vertical ListBoxes are populated dynamically, so no way to define them in XAML)</p>