Question

I’m going off this great example I found, it works, but when I have a submenu branch off one of the menu items the style is not being rendered on that submenu.

WPF Transparent menu

I tried copying what is set for the MenuItem.TopLevelHeaderTemplateKey below as another ControlTemplate that targets MenuItem.SubmenuHeaderTemplateKey, this works in some way but the root of the submenu is not in the same position as the other menuitems that don’t have submenus.

Is there a way I can edit the ControlTemplate that tells every menuitem whether it’s the root or the child to look and act the same?

ETA: Here’s my working xaml, the menuitems that have items themselves are being pushed to the left. I can’t resolve why.

 <ControlTemplate x:Key="{x:Static MenuItem.TopLevelHeaderTemplateKey}" TargetType="{x:Type MenuItem}">
  <Border Name="Border" >
    <Grid>
     <ContentPresenter 
        Margin="6,3,6,3" 
        ContentSource="Header"                            
        RecognizesAccessKey="True" />
     <Popup 
      Name="Popup"
      Placement="Bottom"
      IsOpen="{TemplateBinding IsSubmenuOpen}"
      AllowsTransparency="True" 
      Focusable="False"                           
      PopupAnimation="Fade">
       <Border 
        Name="SubmenuBorder"
        SnapsToDevicePixels="True"

        Background="#9B000000">
                            <StackPanel  
          IsItemsHost="True" 
          KeyboardNavigation.DirectionalNavigation="Cycle" />
        </Border>
     </Popup>
   </Grid>
  </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsSuspendingPopupAnimation" Value="true">
                    <Setter TargetName="Popup" Property="PopupAnimation" Value="None"/>
                </Trigger>
                <Trigger Property="IsHighlighted" Value="true">
                    <Setter TargetName="Border" Property="Background" Value="#C0C0C0"/>
                    <Setter TargetName="Border" Property="BorderBrush" Value="Transparent"/>
                </Trigger>
                <Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="True">
                    <Setter TargetName="SubmenuBorder" Property="CornerRadius" Value="0,0,4,4"/>
                    <Setter TargetName="SubmenuBorder" Property="Padding" Value="0,0,0,3"/>
                </Trigger>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter Property="Foreground" Value="#888888"/>
                </Trigger>
            </ControlTemplate.Triggers>
    </ControlTemplate>

        <ControlTemplate x:Key="{x:Static MenuItem.SubmenuHeaderTemplateKey}" TargetType="{x:Type MenuItem}">
            <Border Name="Border" >
                <Grid>
      <ContentPresenter 
        Margin="6,3,6,3" 
        ContentSource="Header"                            
        RecognizesAccessKey="True" />
                    <Popup 
      Name="Popup"
      Placement="Right"
      IsOpen="{TemplateBinding IsSubmenuOpen}"
      AllowsTransparency="True" 
      Focusable="False"                           
      PopupAnimation="Fade">
                        <Border 
        Name="SubmenuBorder"
        SnapsToDevicePixels="True"
        Background="#9B000000">
                            <StackPanel  
          IsItemsHost="True" 
          KeyboardNavigation.DirectionalNavigation="Cycle" />
                        </Border>
                    </Popup>
                </Grid>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsSuspendingPopupAnimation" Value="true">
                    <Setter TargetName="Popup" Property="PopupAnimation" Value="None"/>
                </Trigger>
                <Trigger Property="IsHighlighted" Value="true">
                    <Setter TargetName="Border" Property="Background" Value="#C0C0C0"/>
                    <Setter TargetName="Border" Property="BorderBrush" Value="Transparent"/>
                </Trigger>
                <Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="True">
                    <Setter TargetName="SubmenuBorder" Property="CornerRadius" Value="0,0,4,4"/>
                    <Setter TargetName="SubmenuBorder" Property="Padding" Value="0,0,0,3"/>
                </Trigger>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter Property="Foreground" Value="#888888"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>

Answer 1

I would recommend that you start by taking an entire MenuItem template example and work on modifying it to make it semi-transparent. You can find full example code of a MenuItem on the msdn website here: http://msdn.microsoft.com/en-us/library/ms747082(v=VS.90).aspx

This code includes an individual template for Top level header, Top level item, submenu header and submenu item. It then includes all the templates in the MenuItem style using triggers.

I think the code you’ll most be interested in is the submenu header template. Look through this code to wrap your head around how to make the root of the submenus look the same as the menuitems that don’t have submenus. Let me know if you are still having trouble.