In the previous month I have written an article about how to design a WPF custom context menu. I really liked that article because the outcome was very nice. Here comes the but :), as it turns out my implementation had a big disadvantage, it lacked the ability to show sub menus (an important trait in my opinion). So it was back to the drawing board for me.
After studying the WPF MenuItem Class and its Original Microsoft Template using blend. I learned some new things
- The MenuItem control has a property named Icon that allows you to add an Icon in front of it
- Both the Icon property and the Header properties are ContentControls so you can throw whatever you want it there and it will show which means, no need to template them.
Lets look at the code for one MenuItem object:
1: <MenuItem>
2: <MenuItem.Header>
3: <TextBlock Text="Option 1"
4: VerticalAlignment="Center">
5: </TextBlock>
6: </MenuItem.Header>
7: <MenuItem.Icon>
8: <Border Background="LightGray" Padding="2"
9: x:Name="Wrapper">
10: <Image Source="Cancel.png"
11: Width="{StaticResource ImageSize}"
12: Height="{StaticResource ImageSize}">
13: </Image>
14: </Border>
15: </MenuItem.Icon>
16: </MenuItem>
I have inserted a TextBlock inside the header so I can control better the Alignment, and into the Image I have inserted a Border with an Image in it. The Border will provide the gray background to all the Images. Of course there is a style also here it is:
1: <Style TargetType="{x:Type MenuItem}">
2: <Setter Property="Background" Value="Gray"></Setter>
3: <Setter Property="Foreground" Value="White"></Setter>
4: <Setter Property="FontSize" Value="13"></Setter>
5: <Setter Property="FontFamily" Value="Verdana"></Setter>
6: <Setter Property="Margin" Value="-5,0,0,0"></Setter>
7: <Style.Triggers>
8: <Trigger Property="IsHighlighted" Value="True">
9: <Setter Property="Background" Value="Black"></Setter>
10: <Setter Property="FontSize" Value="15"></Setter>
11: </Trigger>
12: <Trigger Property="IsEnabled" Value="False">
13: <Setter Property="Foreground" Value="LightGray"></Setter>
14: </Trigger>
15: </Style.Triggers>
16: </Style>
Check out the Is Highlighted Trigger, that’s another thing I found out while researching the MenuItem Class.
The out come is this:
Pretty nice no? And the sub menus are back! And the most important thing: No DataTemplate or ControlTemplates used. All the natural behavior of the WPF Context Menu is preserved. To download a Full Code Example Just grab our feed to get the password to the Freebies page.
Amit
Sarkastik Said on Oct 14, 2008 :
Sorry but this doesn’t style so well compiled under Vista
Amit Said on Oct 14, 2008 :
What do you mean by that?
It does not compile in VS? or it does not look right?
Amit
Sarkastik Said on Oct 15, 2008 :
It compiles fine but looks different and styling isn’t applied throughout. Mainly because there’s a divider between icon and text, a background behind the icons and the Vista style blue hover.
The solution is to include a ContextMenu Template and write your own template and style. Overriding the Aero styling that appears under Vista.
Amit Said on Oct 15, 2008 :
I am currently not working on Vista, I will have to check that. It sounds very interesting.
Amit