1、通过Blend查看Menu原有样式

Menu的原有样式结构较为简单，由边框Border及集合控件 ItemsPresenter 组成，原有样式如下

2、MenuItem主体部分

Menu 的主要样式 集中在MenuItem上，MenuItem比较复杂，这里为了方便浏览我们分批查看，首先查看MenuItem的主体部分

MenuItem有个Role属性， 如下图,定义了四种角色（TopLevelHeader（绿色）、TopLevelItem（橘黄色）、SubmenuHeader（红色）、SubmenuItem（蓝色）），每种角色分别对应一个模板

分别看一下各部分的原有样式

3、TopLevelHeader模板

¨C25C ¨C26C ¨C27C ¨C28C ¨C29C ¨C30C ¨C31C ¨C32C ¨C33C

4、TopLevelItem模板

¨C48C ¨C49C ¨C50C ¨C51C ¨C52C ¨C53C ¨C54C

5、SubmenuHeader模板

¨C70C ¨C71C ¨C72C ¨C73C ¨C86C

6、SubmenuItem模板

¨C112C

7、Template分析

由上述可知，重写样式即修改这四部分模板

3、4对比来看TopLevelHeader比TopLevelItem多了Popup部分，

5，6对比来看SubmenuHeader比SubmenuItem也是多了Popup部分，

接下来分别重写4部分模板

1、新建MMenu

新建CustomControl 命名为MMenu 并添加相应的Xaml样式

这里的主要样式在MenuItem上，故Menu样式不做过多改变

2、新建MMenuItem

新建CustomControl命名为MMenuItem并添加相应Xaml样式

根据触发器中命名的4部分角色分别重写样式

3、MTopLevelHeaderTemplate

¨C142C ¨C143C ¨C144C ¨C145C ¨C146C

4、MTopLevelItemTemplate

5、MSubmenuHeaderTemplate

        <Popup x:Name="PART\_Popup" AllowsTransparency="true" Focusable="false" IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}"  
               Placement="Right" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}" PlacementTarget="{Binding ElementName=templateRoot}" MinWidth="120">  
            <Border x:Name="SubMenuBorder" Margin="0 0 5 5" >  
                <Border.Effect>  
                    <DropShadowEffect Color="{DynamicResource Color.MenuItemDropShadowBrush}" Opacity="0.3" ShadowDepth="3"/>  
                </Border.Effect>  
                <Border Background="{DynamicResource ColorBrush.MenuItemPopBackground}" BorderThickness="1" CornerRadius="5" BorderBrush="{DynamicResource ColorBrush.MenuItemPopBorderBrush}" >  
                    <ScrollViewer x:Name="SubMenuScrollViewer" Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}" Margin="0,5">  
                        <Grid RenderOptions.ClearTypeHint="Enabled" Background="Transparent">  
                            <Canvas HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">  
                                <Rectangle x:Name="OpaqueRect" Fill="{Binding Background, ElementName=SubMenuBorder}"  
                                               Height="{Binding ActualHeight, ElementName=SubMenuBorder}"  
                                               Width="{Binding ActualWidth, ElementName=SubMenuBorder}"/>  
                            </Canvas>  
                            <ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Cycle"  
                                                Grid.IsSharedSizeScope="true" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" KeyboardNavigation.TabNavigation="Cycle"/>  
                        </Grid>  
                    </ScrollViewer>  
                </Border>  
            </Border>  
        </Popup>  
    </Grid>  
</Border>  
<ControlTemplate.Triggers>  
    <Trigger Property="IsSuspendingPopupAnimation" Value="true">  
        <Setter Property="PopupAnimation" TargetName="PART\_Popup" Value="None"/>  
    </Trigger>  
    <Trigger Property="Icon" Value="{x:Null}">  
        <Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>  
    </Trigger>  
    <Trigger Property="IsChecked" Value="True">  
        <Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>  
    </Trigger>  
    <Trigger Property="ScrollViewer.CanContentScroll" SourceName="SubMenuScrollViewer" Value="false">  
        <Setter Property="Canvas.Top" TargetName="OpaqueRect" Value="{Binding VerticalOffset, ElementName=SubMenuScrollViewer}"/>  
        <Setter Property="Canvas.Left" TargetName="OpaqueRect" Value="{Binding HorizontalOffset, ElementName=SubMenuScrollViewer}"/>  
    </Trigger>  
    <Trigger Property="IsHighlighted" Value="True">  
        <Setter TargetName="templateRoot" Property="Background"  Value="{DynamicResource ColorBrush.MenuItemOverBackground}"/>  
    </Trigger>  
</ControlTemplate.Triggers>  

6、MSubmenuItemTemplate

下拉框中内容可自行配色

gitee地址：https://gitee.com/sirius_machao/Cys_Controls/tree/dev/