Styling TreeView into Zune-style menus RRS feed

  • Question

  • I'm having a go at styling TreeView control into zune-style menus (top left menu on link).

    Laying out the menu horizontally is easy, by changing the orientation to Horizontal:

            <ItemsPanelTemplate x:Key="ZuneItemsPanelTemplate">
            	<StackPanel Orientation="Horizontal"/>
    <sdk:TreeView ItemsPanel="{StaticResource ZuneItemsPanelTemplate}">
        		<sdk:TreeViewItem Header="Menu 1" ItemsPanel="{StaticResource ZuneItemsPanelTemplate}">
        			<sdk:TreeViewItem Header="Submenu 1" />
        			<sdk:TreeViewItem Header="Submenu 2" />
        			<sdk:TreeViewItem Header="Submenu 3" /></sdk:TreeView>

    Unfortunately, when a TreeView item expands, it pushes out adjacent items.

    (screenshot from Blend)

    Zune Menu Test 1

    This can be adjusted by setting the margins on the StackPanel to negative numbers. 

    There has to be a better way though? Any suggestions would be appreciated.

    Sunday, February 6, 2011 12:28 PM