WPF menu styled listbox (MVVM) - wpf

Question

I want to create a menu which tracks the selected item, so I'm using nested ListBoxes (since the options for Selectors are quite limited. 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:
<ListBox DockPanel.Dock="Top" Grid.Column="0" ItemsSource="{Binding DashBoards}"
IsSynchronizedWithCurrentItem="True" SelectedItem="{Binding SelectedDashBoard}">
<ListBox.Template>
<ControlTemplate TargetType="{x:Type ListBox}">
<DockPanel>
<ScrollViewer x:Name="scrollviewer" HorizontalScrollBarVisibility="Hidden" CanContentScroll="False">
<StackPanel IsItemsHost="True" Orientation="Horizontal" />
</ScrollViewer>
</DockPanel>
</ControlTemplate>
</ListBox.Template>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding Name}" />
<dx:DXExpander IsExpanded="{Binding IsSelected}">
<ListBox ItemsSource="{Binding Sections}"
IsSynchronizedWithCurrentItem="True" SelectedItem="{Binding SelectedSection}">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Metadata.Name}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</dx:DXExpander>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I managed to display this ListBox on top of other controls, so it looks like a menu.
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.
How can I get to expand ONLY the selected item, without changing the height of the ListBox?
In other words, how can I get one of the vertical ListBoxes to overflow its parent container (aka the horizontal ListBox)?
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.
Any help is welcome and will be diligently upvoted ;-)
(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)

Answer 1

You could move the selected style out of the data template so it's not applied to all items.
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Style TargetType="ListViewItem">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Height" Value="90"/>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<ListView>
<ListView.Items>
<sys:String>a</sys:String>
<sys:String>b</sys:String>
<sys:String>c</sys:String>
<sys:String>d</sys:String>
<sys:String>e</sys:String>
</ListView.Items>
</ListView>
</Grid>
</Window>
EDIT: after properly reading what you were after, I don't have your expander class or the item that you're binding to so I'm using Expander and MenuItem but this gives an example of using a listview as a menu with selectable items, maybe it'll help solve your problem, I'm assuming your expander control hides the actual expander button.
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
Title="MainWindow" Height="350" Width="525">
<Grid>
<ListView Height="16" VerticalAlignment="Top">
<ListView.Resources>
<Style TargetType="ListViewItem">
<Setter Property="Margin" Value="0,0,10,0"/>
</Style>
</ListView.Resources>
<ListView.Template>
<ControlTemplate TargetType="{x:Type ListBox}">
<StackPanel Background="LightGray" IsItemsHost="True" Orientation="Horizontal" />
</ControlTemplate>
</ListView.Template>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" ClipToBounds="False">
<TextBlock Text="{Binding Header}" />
<Canvas>
<Expander IsExpanded="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=ListViewItem}}">
<Expander.Style>
<Style TargetType="{x:Type Expander}">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Expander}">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="3" SnapsToDevicePixels="true">
<DockPanel>
<ContentPresenter x:Name="ExpandSite" DockPanel.Dock="Bottom" Focusable="false" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Visibility="Collapsed" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</DockPanel>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded" Value="true">
<Setter Property="Visibility" TargetName="ExpandSite" Value="Visible"/>
</Trigger>
<Trigger Property="ExpandDirection" Value="Right">
<Setter Property="DockPanel.Dock" TargetName="ExpandSite" Value="Right"/>
</Trigger>
<Trigger Property="ExpandDirection" Value="Up">
<Setter Property="DockPanel.Dock" TargetName="ExpandSite" Value="Top"/>
</Trigger>
<Trigger Property="ExpandDirection" Value="Left">
<Setter Property="DockPanel.Dock" TargetName="ExpandSite" Value="Left"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Expander.Style>
<ListView ItemsSource="{Binding Items}" IsSynchronizedWithCurrentItem="True" />
</Expander>
</Canvas>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<ListView.Items>
<MenuItem Header="File">
<MenuItem.Items>
<MenuItem Header="Open" IsHitTestVisible="False"/>
<MenuItem Header="Exit" IsHitTestVisible="False"/>
</MenuItem.Items>
</MenuItem>
<MenuItem Header="Edit">
<MenuItem.Items>
<MenuItem Header="Cut" IsHitTestVisible="False"/>
<MenuItem Header="Copy" IsHitTestVisible="False"/>
<MenuItem Header="Paste" IsHitTestVisible="False"/>
</MenuItem.Items>
</MenuItem>
</ListView.Items>
</ListView>
</Grid>
</Window>