locked
HierarchialDataTemplate for MenuItem in Blend RRS feed

  • Question

  • I recently had a task to bind an existing ObservableCollection (that has its own hierarchy) to a MenuItem (not the root Menu).

     

    If I was binding to a Tree, all would be fine.  There are plenty of links showing how to drag the collection directly onto a TreeView, and besides Binding the data, a HierarchicalDataTemplate is created for the TreeView.

     

    This does not appear to work with a MenuItem (or a Menu for that matter.)  If I follow the same steps for the TreeView (drag the collection to the MenuItem instead), it binds the data, but the resulting template is not a HierarchicalDataTemplate.

     

    My goal is to have this work with only a designer using Blend.  For the MenuItem example, the closest I can get is to have the designer seed the following line of code into the template by hand (yech):

     

    <HierarchicalDataTemplate x:Key="ContactListCategoryMenuItemTemplate" />

     

    Once that line of XAML is present, I can set “ContactListCategoryMenuItemTemplate” as the MenuItem’s ItemTemplate, and can then do everything else in Blend.

     

    Is there a “no-touch-XMAL” method in Blend (assuming I have an ObservableCollection already) to get Blend to construct a HiearchicalDataTemplate for a MenuItem?

     

    Thanks,

    Jim Tomasko

    Wednesday, July 28, 2010 11:02 PM

Answers

  • I can provide a least-touch-XAML method

    1. drag the (recursive) ObservableCollection to the design surface (layoutRoot only, not on any other controls), Blend will generate the HierarchicalDataTemplate, and create a TreeView and bind the TreeView to the HierarchicalDataTemplate (assume name it itemTemplate1)

    2. Open the Design/XAML split view, select the MenuItem, you can see the  MenuItem Xaml is highlighted. Add or replace the the ItemTemplate="{DynamicResource ItemTemplate1}"
    Now you have the MenuItem bind to a Blend-generated HierarchicalDataTemplate

    3. delete the Blend-generated Treeview.


    Thanks, Harry [MSFT]
    • Proposed as answer by Harry.MSFT Thursday, July 29, 2010 2:44 AM
    • Marked as answer by Jim Tomasko Thursday, July 29, 2010 4:12 AM
    Thursday, July 29, 2010 2:39 AM

All replies

  • I can provide a least-touch-XAML method

    1. drag the (recursive) ObservableCollection to the design surface (layoutRoot only, not on any other controls), Blend will generate the HierarchicalDataTemplate, and create a TreeView and bind the TreeView to the HierarchicalDataTemplate (assume name it itemTemplate1)

    2. Open the Design/XAML split view, select the MenuItem, you can see the  MenuItem Xaml is highlighted. Add or replace the the ItemTemplate="{DynamicResource ItemTemplate1}"
    Now you have the MenuItem bind to a Blend-generated HierarchicalDataTemplate

    3. delete the Blend-generated Treeview.


    Thanks, Harry [MSFT]
    • Proposed as answer by Harry.MSFT Thursday, July 29, 2010 2:44 AM
    • Marked as answer by Jim Tomasko Thursday, July 29, 2010 4:12 AM
    Thursday, July 29, 2010 2:39 AM
  • Wow Harry, your a mad man!

    I'm marking it as an answer, because you hit at the heart of my problem with a workable alternate solution.  Frankly, I'm not sure which one of the two evils (where I started, or your input) is what I'll finally end up having to explain to design.

    I'm glad that the biggest of these problems appear to be centered around hieararchial data scaffolding, as once it's done you don't have to come back to it much.

    If anybody else has any other alternates, I'd be glad to hear about them.

    Thanks,

    Jim Tomasko

    Thursday, July 29, 2010 4:21 AM
  • Hi Harry,

    My current solution is a hybid of my orginal and yours (mostly your answer.)

    Steps are:

    1. Drag the collection to the root layout as you indicated, making a TreeView in the process.

    2. Delete (not undo) the treeview you just made (the HiearchicalDataTemplate) still remains.

    3. Set the newly created template as the item template for the MenuItem that requires the HierarchicalDataTemplate.

    From there, you can use Blend to rework the template.

    While this is still a cludge, there ended up being no direct XAML editing, and it's something that a designer that is responcible for template editing should be fairly comfortable with.

    Thanks for adding the missing piece!

    Jim Tomasko

     

     

    Thursday, July 29, 2010 7:12 PM