Multiple levels hover menu with databind

Jul 28, 2011 at 9:26 PM

I am using MVVM pattern, so I need to use the databind approach. I've created a simple test project with TestMenu class as follows:

 

public class TestMenu
    {
        public string MenuName { get; set; }
        public string MenuDesc { get; set; }
        public ObservableCollection<TestMenu> ChildMenus {get; set;}
    }

 

 

I have populate the TestMenu with 3 levels of child menus. And I created a menu that will open when hovering over a button. The xaml is as follows:

    <UserControl.Resources>
        <common:HierarchicalDataTemplate  x:Key="ChildMenuTemplate" ItemsSource="{Binding ChildMenus}">
            <controls:PopupMenuItem x:Name="menuItem" Header="{Binding MenuName}" VerticalSeparatorVisibility="Collapsed" >
                <controls:PopupMenu Orientation="Right" HoverElementSelector="menuItem" LeftClickElementSelector="menuItem"  >
                    <ListBox x:Name="lstMenu" Foreground="Red" ItemsSource="{Binding ChildMenus}"/>
                </controls:PopupMenu>
            </controls:PopupMenuItem>
        </common:HierarchicalDataTemplate>
        <common:HierarchicalDataTemplate  x:Key="PopupMenuTemplate" ItemTemplate="{StaticResource ChildMenuTemplate}" ItemsSource="{Binding ChildMenus}">
            <controls:PopupMenuItem x:Name="menuItem" Header="{Binding MenuName}" VerticalSeparatorVisibility="Collapsed" >
                <controls:PopupMenu Orientation="Right" HoverElementSelector="menuItem" LeftClickElementSelector="menuItem"  >
                    <ListBox x:Name="lstMenu" Foreground="Blue" ItemsSource="{Binding ChildMenus}"/>
                </controls:PopupMenu>
            </controls:PopupMenuItem>
        </common:HierarchicalDataTemplate>
        
       
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.Resources>
            
        </Grid.Resources>
        <Button x:Name="btnTest" Content="Fuck you" Width="100" Height="20" VerticalAlignment="Center" HorizontalAlignment="Center" />

        <controls:PopupMenu x:Name="searchMenu" BorderBrush="Black" BorderThickness="3" Visibility="Visible" Orientation="Bottom"  HoverElementSelector="btnTest" InheritDataContext="True" >
            <ListBox x:Name="test" BorderBrush="Black" Foreground="Black"   ItemsSource="{Binding SearchMenu}" ItemTemplate="{StaticResource PopupMenuTemplate}"  />
        </controls:PopupMenu>
    </Grid>

At first, I can only get the first level of menu to display, I went into PopupMenuUtils.cs's GetItemContainer method and changed the code to get all visual ancestors instead of top 5 levels, then I can get the second level to shows up, but couldn't get the second level menuItem header to bind correctly, and couldn't get the third level to show up.

Please let me know how can I get this to work. Thank you very much.

Coordinator
Jul 28, 2011 at 9:52 PM
Edited Jul 28, 2011 at 9:57 PM

Good try Astranagan but I'd prefer you work with the latest version of the code instead.

Its available here:

http://sl4popupmenu.codeplex.com/SourceControl/list/changesets

Jul 28, 2011 at 9:55 PM
Edited Jul 28, 2011 at 10:01 PM

That's what I have been using -  8c19f92b9666 version

Coordinator
Jul 28, 2011 at 10:27 PM
Edited Jul 28, 2011 at 10:39 PM

Sorry, I'll test run your code and try to find a solution but not right now because I'm hooked on several projects right now and can hardly find any free time lately.

If you're feeling daunting enough to get it fixed however then I'm your man if you have any questions.

Jul 28, 2011 at 10:34 PM

No problem, thanks for the quick reply.