WPF:MenuItem样式

 

基础信息

1、MenuItem 样式

    <Window.Resources>

        <Style TargetType="{x:Type MenuItem}">
            <!--<Setter Property="Background" Value="#999999" />-->
            <!--<Setter Property="Foreground" Value="#999999" />-->
            <!--MenuItem文字颜色和menu的文字颜色一样-->
            <!--<Setter Property="Foreground" Value="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type Menu}}}"/>-->
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type MenuItem}">
                        <Border x:Name="Border"
                                Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <!--<ColumnDefinition x:Name="Col0" SharedSizeGroup="MenuItemIconColumnGroup" MinWidth="17" Width="Auto"/>-->
                                    <ColumnDefinition Width="Auto"  SharedSizeGroup="MenuTextColumnGroup"/>
                                    <!--<ColumnDefinition Width="Auto"  SharedSizeGroup="MenuItemIGTColumnGroup"/>-->
                                    <!--<ColumnDefinition x:Name="Col3" Width="14"/>-->
                                </Grid.ColumnDefinitions>

                                <!-- ContentPresenter to show an Icon if needed -->
                                <ContentPresenter Grid.Column="0" 
                                                  Margin="4,0,6,0" x:Name="Icon" 
                                                  VerticalAlignment="Center" ContentSource="Icon"/>

                                <!-- Glyph is a checkmark if needed for a checkable menu -->
                                <Grid Grid.Column="0" Visibility="Hidden" Margin="4,0,6,0" x:Name="GlyphPanel" VerticalAlignment="Center">
                                    <Path x:Name="GlyphPanelpath" VerticalAlignment="Center" Fill="{TemplateBinding Foreground}" 
                                          Data="M0,2 L0,4.8 L2.5,7.4 L7.1,2.8 L7.1,0 L2.5,4.6 z" FlowDirection="LeftToRight"/>
                                </Grid>

                                <!-- Content for the menu text etc -->
                                <ContentPresenter Grid.Column="1"
                                          Margin="{TemplateBinding Padding}"
                                          x:Name="HeaderHost"
                                          RecognizesAccessKey="True"
                                          VerticalAlignment="Center"
                                          ContentSource="Header"/>

                                <!-- Content for the menu IGT -->
                                <ContentPresenter Grid.Column="2"
                                          Margin="8,1,8,1"
                                          x:Name="IGTHost"
                                          ContentSource="InputGestureText"
                                          VerticalAlignment="Center"/>

                                <!-- Arrow drawn path which points to the next level of the menu -->
                                <Grid Grid.Column="3" Margin="4,0,6,0" x:Name="ArrowPanel" VerticalAlignment="Center">
                                    <Path x:Name="ArrowPanelPath" HorizontalAlignment="Right" VerticalAlignment="Center" 
                                          Fill="{TemplateBinding Foreground}" Data="M0,0 L0,8 L4,4 z"/>
                                </Grid>

                                <!-- The Popup is the body of the menu which expands 
                                     down or across depending on the level of the item -->
                                <Popup IsOpen="{Binding Path=IsSubmenuOpen, 
                                       RelativeSource ={RelativeSource TemplatedParent}}" 
                                       Placement="Right" x:Name="SubMenuPopup" Focusable="false" 
                                       PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}">
                                    <Border x:Name="SubMenuBorder" BorderBrush="{Binding Path=Foreground, 
                                        RelativeSource={RelativeSource AncestorType={x:Type Menu}}}" 
                                        BorderThickness="1" Padding="2,2,2,2">
                                        <Grid x:Name="SubMenu" Grid.IsSharedSizeScope="True">
                                            <!-- StackPanel holds children of the menu. This is set by IsItemsHost=True  KeyboardNavigationMode = "Cycle" -->
                                            <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Cycle"/>   
                                        </Grid>
                                    </Border>
                                </Popup>
                            </Grid>
                        </Border>

                        <!-- These triggers re-configure the four arrangements 
                             of MenuItem to show different levels of menu via Role -->
                        <ControlTemplate.Triggers>
                            <!-- Role = TopLevelHeader : this is the root menu item in a menu; the Popup expands down -->
                            <Trigger Property="Role" Value="TopLevelHeader">
                                <Setter Property="Padding" Value="6,1,6,1"/>
                                <Setter Property="Placement" Value="Left" TargetName="SubMenuPopup"/>
                                <!--<Setter Property="MinWidth" Value="0" TargetName="Col0"/>-->
                                <!--<Setter Property="Width" Value="Auto" TargetName="Col3"/>-->
                                <Setter Property="CornerRadius" Value="5,5,0,0" TargetName="Border"/>
                                <Setter Property="Visibility" Value="Collapsed" TargetName="Icon"/>
                                <Setter Property="Visibility" Value="Collapsed" TargetName="GlyphPanel"/>
                                <Setter Property="Visibility" Value="Collapsed" TargetName="IGTHost"/>
                                <Setter Property="Visibility" Value="Collapsed" TargetName="ArrowPanel"/>
                            </Trigger>

                            <!-- Role = TopLevelItem :  this is a child menu item from the top level without any child items-->
                            <Trigger Property="Role" Value="TopLevelItem">
                                <Setter Property="Padding" Value="6,1,6,1"/>
                                <Setter Property="Visibility" Value="Collapsed" TargetName="ArrowPanel"/>
                            </Trigger>

                            <!-- Role = SubMenuHeader : this is a child menu item which does not have children -->
                            <Trigger Property="Role" Value="SubmenuHeader">
                                <Setter Property="DockPanel.Dock" Value="Top"/>
                                <Setter Property="Padding" Value="0,2,0,2"/>
                            </Trigger>

                            <!-- Role = SubMenuItem : this is a child menu item which has children-->
                            <Trigger Property="Role