Question

I am building a WPF application using C# 3.5
I have a WPF menu on the top of the application.

When clicking on a top level menu item, i need the second level of the menu to show horizontally instead of vertically “and” remain opened ( not disappear like a normal menu).

What I need to have is something similar to the following screen shot
alt text http://img341.imageshack.us/img341/1694/navigationecopy.jpg

How can I style the WPF menu to change its behavior as above?

Answer 1

Ok after trying this out, I don’t think re-templating the Menu is a good idea. Menu is a very complex control. A better idea would be to avoid using a menu entirely and use a control with behavior similar to what you’ve described (selected items remain open, can display their children horizontally, etc.). The TabControl is a very good fit so I would simply use that instead. Here is some sample XAML to show you how this could work:

<TabControl VerticalAlignment="Top">
    <TabItem Header="MAIN ACTIONS"/>
    <TabItem Header="GOALS" IsSelected="True">
        <StackPanel Orientation="Horizontal">
            <ToggleButton Margin="5">Enter Goals</ToggleButton>
            <ToggleButton Margin="5">Edit Goals</ToggleButton>
            <ToggleButton IsChecked="True" Margin="5">View Work Plan</ToggleButton>
        </StackPanel>
    </TabItem>
    <TabItem Header="ACTIVITIES"/>
</TabControl>

Obviously, you will need to restyle the TabControl with fonts and colors to get the appearance you want. And for the submenus, I would actually use radio-buttons instead of toggle buttons, to ensure that only one can be selected at a time (you will need to re-template the radio-button as well). But looking at even this simple result, you can see that this control is quite well suited for your scenario:

alt text http://img94.imageshack.us/img94/2358/tabcontrolmenu.png