Binding Menu ItemsSource to a recursive data structure

Question

I have a simple data structure (the properties are of course Dependency Properties):

class MenuData{
    public string Header {get; protected set;}
    public ObservableCollection<MenuData> Items { get; protected set; }
}

ObservableCollection<MenuData> Menus {get; protected set;}

I want to bind the Menus property as Menu element ItemsSource. The result should look as standard Windows menu bar: First level of items will be lined horizontally with sub-items being hidden is sub-menus.

I experimented with XAML to create the first level for now (the horizontal menu bar):

<my:MenuElement ItemsSource="{Binding Menus}">
    <my:MenuElement.ItemTemplate>
        <DataTemplate>                
            <MenuItem Header="{Binding Header}">                    
                <!-- Try to add some sub-menus to see what it is going to look like. -->
                <MenuItem Header="A" />
                <MenuItem Header="A" />
                <MenuItem Header="A" />
                <MenuItem Header="A" />
            </MenuItem>
        </DataTemplate>
    </my:MenuElement.ItemTemplate>
</my:MenuElement>

I used my custom overload of MenuItem, because the ItemTemplate is already wrapped in MenuItem tag for Menu element, so I had to get rid of that:

class MenuElement: System.Windows.Controls.Menu 
{
    protected override DependencyObject GetContainerForItemOverride()
    {
        return new System.Windows.Controls.ContentPresenter();
    }
}

But the result looks all wrong (notice the highlight being too large and the sub-menu arrows)

Could you please point me into a right direction so I could make this work?

Thanks for any help.

Answer 1

So I finally figured it out. The answer is HierarchicalDataTemplate.