WPF XAML MenuItem Styles

I recently began working with WPF for the first time.  I was doing this outside of my job on my own time (which is sometimes quite limited).  I had never worked with WPF before this venture.  I decided to download a trial copy of Microsoft Expression Blend 2 to check out the designer side of WPF.  The first thing that I noticed was the menus.  The menus had a black background with white text and the submenus had white borders and white menu separators (pictured below).  I decided that I liked this look and set out to implement this using Visual Studio 2008.  This entry describes how to create this menu.

 

 

I implemented the menu using two custom Styles.  The first for the Separator objects and the second for the MenuItem objects.  The XAML for the Separator style is as follows:

As you can see in the code, The Separator style simply sets the default margins (line 2) and draws a 1px high rectangle using the parent Menu’s foreground color (line 7). For the MenuItem style, I started with the SimpleMenuItem style that was included when I was using Expression Blend. I found that this style was not complete and simply did not work correctly in some cases. After cleaning up that code and adding some additional features, I ended up with the XAML below:

The MenuItem style first sets the foreground color to the parent Menu’s foreground color (line 2). Then comes the Template, which is where it gets interesting. The Template starts with a Border around a Grid. The Grid has 4 ColumnDefinition items. The first is for the icon or the checkbox (depending on the type of MenuItem). The second is for the text of the MenuItem. The third is for the input gesture text (e.g. Ctrl-S). The last is for the arrow, if the MenuItem contains a sub-menu.

The contents of the columns are then defined. First is a ContentPresenter that will display the value of the “Icon” property. Next is a Grid that will hold the checkbox, if needed. These are both displayed in the first column of the main Grid (but not at the same time). After this is another ContentPresenter that will display the value of the “Header” property. Next is another ContentPresenter that will display the value of the “InputGestureText” property. Then there is a Grid that will display the arrow if there is a sub-menu. Finally, there is a Popup that will display the sub-menu (if one is defined).

The remainder of the Style contains the Trigger items that will manipulate what is displayed based on the type of MenuItem (top-level menu item, sub-menu meu item, etc.) that is being rendered. I will leave these items for a future entry.

47 thoughts on “WPF XAML MenuItem Styles”

  1. Thanks a lot for the post, it really clears up what Blend does.
    Just one thing —
    I’ve been trying all day long but I can’t seem to figure out how to implement the submenu backgrounds that you see in Microsoft Windows XP Professional SP2 (ex: On Outlook, Excel, Visual Studio etc).
    I want to recreate the way the submenus have a dark gray gradient behind the icon (seems to exist only in that row) while the title part of the menu has the light gray bg color. If you have any ideas on how to create this effect please drop me a line!

  2. Accelerator v2 is implemented in native code, but ships with a managed wrapper that allows us to use it elegantly from C# and other managed languages as well. The library exposes various types that can be used for creating data-parallel computations that process 1D or 2D arrays of data. In this article, we’ll work with FloatParallelArray, which represents a computation that returns a 1D array of floats (float[] in C#).

  3. Always enjoy reading spot on articles by an author who is obviously knowledgeable on their chosen subject….Now is the perfect time (summer now)to spend some money to grab those fancy dress and accessories! LOL….. Keep up the great work, see you next time

  4. thanks a lot for the post, it really clears up what Blend does.
    Just one thing —
    I’ve been trying all day long but I can’t seem to figure out how to implement the submenu backgrounds that you see in Microsoft Windows XP Professional SP2 (ex: On Outlook, Excel, Visual Studio etc).
    I want to recreate the way the submenus have a dark gray gradient behind the icon (seems to exist only in that row) while the title part of the menu has the light gray bg color. If you have any ideas on how to create this effect please drop me a line!
    thompson44

  5. Nice post !! What i’s looking for is a little bit different.

    We can add an input gesture text. Such as "Ctrl + S" on Save menuitem. In menu it appears as – < Save Ctrl +S >. My app enables save menu item only if save is required by app otherwise link is disabled. When "Save" is disabled, save – text appears as disabled (i mean white color) however the gesture text – "Ctrl + S" appears as it is ( i.e. in black color) . So in all save menu item appears as < Ctrl + S>. Can you suggest something such that gesture text can be disabled too like "save".

    Thanks

  6. I find that readers respond very well to posts that show your own weaknesses, failings and the gaps in your own knowledge rather than those posts where you come across as knowing everything there is to know on a topic. People are attracted to humility and are more likely to respond to it than a post written in a tone of someone who might harshly respond to their comments.

  7. Can you upload a demo project? I am assigning the MenuItem the style you have provided, and the menu just looks as it would look by default (grey background, black text), just the headers are a little bit displaced.

    I need the demo project.

  8. I think it will be more beneficial if you can post some small tutorial or something like that in a separate article so that users can gain much knowledge from that.

  9. I guess the same concepts perhaps applied to somebody that provides no products however only advertising space on their blog. I assume that may really well thought-about as a product.

  10. I read your entire article. and reached the point that it is useful and very informative article. Thanks for sharing this article.

  11. Very important information are included in this post. I think you will more valuable information add this site,So meany meany thanks, carry on

Leave a Reply

Your email address will not be published. Required fields are marked *