ansaurus

Question

How to programmatically create MenuItems (with a header) in a dynamic menu

Answer 1

+1 A:

I'll confess that I haven't dug quite as deep into your example as maybe I should, but whenever I see code-behind that's searching the visual tree, I think, could this be handled more explicitly in a view model?

It seems to me in this case that you could come up with a pretty straightforward view model - an object exposing Text, Image, Command, and Children properties, for instance - and then create a simple data template that for presenting it as a MenuItem. Then anything that needs to alter the contents of your menus manipulates this model.

Edit:

Having looked at what you're up to in more detail, and the two examples you've linked to in your blog post, I am banging my head against the desk. Both of those developers appear to be under the misapprehension that the way to set properties on the menu items that are being generated by the template is to search through the visual tree in the ContentPresenter.Load event after they're created. Not so. That's is what the ItemContainerStyle is for.

If you use that, it's quite straightforward to create dynamic menus of the type you're describing. You need a MenuItemViewModel class that has INotifyPropertyChanged implemented and exposes these public properties:

string Text
Uri ImageSource
ICommand Command
ObservableCollection<MenuItemViewModel> Children

Using this:

<Menu DockPanel.Dock="Top" ItemsSource="{DynamicResource Menu}"/>

where the ItemsSource is an ObservableCollection<MenuItemViewModel>, and using this template:

<HierarchicalDataTemplate DataType="{x:Type local:MenuItemViewModel}"
                          ItemsSource="{Binding Path=Children}">
    <HierarchicalDataTemplate.ItemContainerStyle>
        <Style TargetType="MenuItem">
            <Setter Property="Command"
                    Value="{Binding Command}" />
        </Style>
    </HierarchicalDataTemplate.ItemContainerStyle>
    <StackPanel Orientation="Horizontal">
        <Image Source="{Binding ImageSource}" />
        <TextBlock Text="{Binding Text}" />
    </StackPanel>
</HierarchicalDataTemplate>

the menus in the window exactly represent what's in the collection, and are dynamically updated as items are added and removed, both to the top-level items and to the descendants.

There's no clambering about in the visual tree, no manual creation of objects, no code-behind (other than in the view model, and in whatever populates the collection in the first place).

I've built a pretty thoroughly worked example of this; you can download the project here.

Robert Rossney 2010-09-16 18:50:10

There is a viewmodel for the MenuItem - in this case, its ToolbarObject. It exposes the menu name, text, resource identifier for the image, an ICommand object for the click event, and children (which is an observable collection of ToolbarObjects). I wouldn't expect an Image to be part of that - that seems to be muddying up the view model with view characteristics. The HierarchicalDataTemplate is already triggering off of that object. Traversing the tree is necessary to get the bindings correct for the command objects in the nested menu - using a simple DataTemplate doesn't work

Matt Jordan 2010-09-16 19:22:13

I can post the code for the ToolbarObject when I get home (code not with me at this point) - but the binding to that object should be pretty clear in the XAML

Matt Jordan 2010-09-16 19:22:46

I don't understand why traversing the tree is necessary; please say more.

Robert Rossney 2010-09-16 23:23:41

Robert - I posted a longer explanation of how I ended up where I am on a blog here http://dynamicreconfiguration.blogspot.com/. I agree - the code behind is "smell" worthy, and I'd prefer to do this through a HierarchicalDataTemplate. The blog explains the issue I ran into, and how I ended up where I did.

Matt Jordan 2010-09-17 17:55:07

"Smell" worthy doesn't begin to describe it. I think the problem is that you've found bad examples to emulate. Because this is nowhere near as hard as the developers whose postings you've linked to seem to be making it.

Robert Rossney 2010-09-17 23:42:17

Fair enough - however, I ran into the problem with the HierarchicalDataTemplate where the children of a menu weren't being rendered or updated. Since those children were in an ObservableCollection, I'm not sure what's going on... which was the only reason I went looking for another way of doing this. Any idea why they wouldn't be picked up?

Matt Jordan 2010-09-18 03:02:36

Hard to say; a lot of scent has been rubbed into this trail. In one of the examples you posted, I know you were explicitly creating `MenuItem` objects with the `HierarchicalDataTemplate`. This is going to cause nothing but confusion if you're walking the visual tree, because a `MenuItem`'s parent `MenuItem` is not actually the parent menu, it's the item container. I really recommend looking at the demo app I put together, and seeing if either a) it can be adapted for your purpose or b) you can reproduce the problem you're describing in it.

Robert Rossney 2010-09-18 05:24:14

Awesome - that's perfect. I think the problem I ran into was ignorance on the existance of ItemContainerStyle - looks like that does the trick. Thanks a ton!

Matt Jordan 2010-09-18 15:18:36

Answer 2

A:

Another possible approach could be having the Menu be a region and agree on a convention so all views added to that region have a ViewModel with a property named MenuHeader. That way, the region adapter can simply get the menu header from the View's Data Context, and set it to the item when adding it.

Something similar is done in Prism with views added to a Tab Region. You can read more here.

I hope this provides some useful guidance.

Thanks, Damian

Damian Schenkelman 2010-09-17 19:29:34

Thanks for the alternate approach - I've seen this done with tab pages, but hadn't tried it with Menus. I think the approach outlined by Robert is a bit "cleaner" in the sense that it doesn't complicate the approach with Regions - but definitely something to look into (and the complexity may be worthwhile in certain situations)

Matt Jordan 2010-09-19 01:16:17

Sure Matt, I understand the "added complexity" creating a region brings to the table. Although this might not be the particular scenario, using Prism's extensibility to create a region, regionadapter, etc for that control should be useful, and you would only need to add your Menu items as simple views to regions.

Damian Schenkelman 2010-09-19 22:26:59

ansaurus

tags:

views:

answers:

How to programmatically create MenuItems (with a header) in a dynamic menu

related questions