WPF 基础控件之 Menu样式

其他基础控件

1.Window
2.Button
3.CheckBox
4.ComboBox
5.DataGrid
6.DatePicker
7.Expander
8.GroupBox
9.ListBox
10.ListView

Menu 实现下面的效果1）Popup 嵌套 Grid 设置 Margin 10,0,10,10 再套Border 内部再套一个Border 设置 VerticalAlignment=”Top” 颜色设置和背景一样的颜色，就能形成视觉差。

—

代码如下

1）Styles.Menu.xaml 代码如下

 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:wpfs="clr-namespace:WPFDevelopers.Minimal.Helpers"
                    xmlns:sys="clr-namespace:System;assembly=mscorlib">

    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="../Themes/Basic/ControlBasic.xaml"/>
        <ResourceDictionary Source="../Themes/Basic/Animations.xaml"/>
        <ResourceDictionary Source="Styles.ScrollBar.xaml"/>
    </ResourceDictionary.MergedDictionaries>

    <Style x:Key="{x:Type Menu}" TargetType="{x:Type Menu}" BasedOn="{StaticResource ControlBasicStyle}">
        <Setter Property="Foreground" Value="{DynamicResource PrimaryTextSolidColorBrush}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Menu}">
                    <Border Background="{DynamicResource WhiteSolidColorBrush}"
                                SnapsToDevicePixels="True">
                        <StackPanel ClipToBounds="True"
                      Orientation="Horizontal"
                      IsItemsHost="True" />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="{x:Static MenuItem.SeparatorStyleKey}"
       TargetType="{x:Type Separator}" BasedOn="{StaticResource ControlBasicStyle}">
        <Setter Property="Height" Value="1" />
        <Setter Property="Margin" Value="0,2" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Separator}">
                    <Border BorderThickness="1" BorderBrush="{DynamicResource BaseSolidColorBrush}"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>


    <!-- TopLevelHeader -->
    <ControlTemplate x:Key="{x:Static MenuItem.TopLevelHeaderTemplateKey}"
                 TargetType="{x:Type MenuItem}">
        <Border x:Name="Border" SnapsToDevicePixels="True"
                 Background="{TemplateBinding Background}"
                 BorderThickness="1,1,1,0" BorderBrush="{TemplateBinding BorderBrush}">
            <Grid Margin="{TemplateBinding Padding}">
                <ContentPresenter Margin="6,3,6,3"
                                  VerticalAlignment="Center"
                        ContentSource="Header"
                        RecognizesAccessKey="True" 
                                  x:Name="PART_ContentPresenter"/>
                <Popup x:Name="Popup"
             Placement="Bottom"
             IsOpen="{TemplateBinding IsSubmenuOpen}"
             PlacementTarget="{Binding ElementName=Border}"
             AllowsTransparency="True"
             Focusable="False">
                    <Grid Margin="10,0,10,10" >
                        <Border x:Name="SubmenuBorder"
                            SnapsToDevicePixels="True"
                            BorderThickness="1"
                            Background="{DynamicResource WhiteSolidColorBrush}"
                            Effect="{DynamicResource PopupShadowDepth}"
                            BorderBrush="{DynamicResource BaseSolidColorBrush}"
                            CornerRadius="0,0,3,3">

                            <ScrollViewer CanContentScroll="True" Margin="0,4">
                                <StackPanel IsItemsHost="True"
                        KeyboardNavigation.DirectionalNavigation="Cycle"/>
                            </ScrollViewer>
                        </Border>
                        <Border Height="1.2" Background="{DynamicResource WhiteSolidColorBrush}" 
                                       VerticalAlignment="Top" HorizontalAlignment="Left"
                                       BorderThickness="1,0,0,0" 
                                       Width="{Binding ElementName=Border,Path=ActualWidth}"/>
                       
                    </Grid>
                </Popup>
            </Grid>
        </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="IsSuspendingPopupAnimation"
             Value="True">
                <Setter TargetName="Popup"
              Property="PopupAnimation"
              Value="None" />
            </Trigger>
            <Trigger Property="IsHighlighted"
             Value="True">
                <Setter Property="Background"  Value="{DynamicResource BaseSolidColorBrush}"/>
               
            </Trigger>
            <Trigger Property="IsSubmenuOpen" Value="True">
                <Setter Property="BorderBrush" Value="{DynamicResource BaseSolidColorBrush}"/>
                <Setter Property="Background" Value="{DynamicResource WhiteSolidColorBrush}"/>
            </Trigger>

        </ControlTemplate.Triggers>
    </ControlTemplate>

    <!-- TopLevelItem -->
    <ControlTemplate x:Key="{x:Static MenuItem.TopLevelItemTemplateKey}"
                 TargetType="{x:Type MenuItem}">
        <Border x:Name="Border" SnapsToDevicePixels="True"
                Background="{TemplateBinding Background}">
            <Grid Margin="{TemplateBinding Padding}">
                <ContentPresenter Margin="6,3,6,3"
                                  VerticalAlignment="Center"
                        ContentSource="Header"
                        RecognizesAccessKey="True" x:Name="PART_ContentPresenter"/>
            </Grid>
        </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="IsHighlighted"
             Value="True">
                <Setter Property="Background"  Value="{DynamicResource BaseSolidColorBrush}"/>
                
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

    <ControlTemplate x:Key="{x:Static MenuItem.SubmenuItemTemplateKey}"
                 TargetType="{x:Type MenuItem}">
        <Border x:Name="Border" SnapsToDevicePixels="True"
                Background="{TemplateBinding Background}">
            <Grid Margin="{TemplateBinding Padding}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"
                          SharedSizeGroup="Icon" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto"
                          SharedSizeGroup="Shortcut" />
                    <ColumnDefinition Width="20" />
                </Grid.ColumnDefinitions>
                <ContentPresenter x:Name="Icon"
                        Margin="6,0,6,0"
                        VerticalAlignment="Center"
                        ContentSource="Icon" />
                <Border x:Name="Check"
              Width="13"
              Height="13"
              Visibility="Collapsed"
              Margin="6,0,6,0"
                        Background="Transparent">

                    <Path x:Name="CheckMark"
              Width="7"
              Height="7"
              Visibility="Hidden"
              SnapsToDevicePixels="False"
              StrokeThickness="2"
              Data="{StaticResource PathMenuItem}"
                          Stroke="{TemplateBinding Foreground}">

                    </Path>
                </Border>
                <ContentPresenter x:Name="HeaderHost"
                        Grid.Column="1"
                        ContentSource="Header"
                                  VerticalAlignment="Center"
                        RecognizesAccessKey="True" />
                <TextBlock x:Name="InputGestureText"
                 Grid.Column="2"
                 Text="{TemplateBinding InputGestureText}"
                 Margin="5,2,0,2"
                 DockPanel.Dock="Right" />
            </Grid>
        </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="ButtonBase.Command"
             Value="{x:Null}" />
            <Trigger Property="Icon"
             Value="{x:Null}">
                <Setter TargetName="Icon"
              Property="Visibility"
              Value="Hidden" />
            </Trigger>
            <Trigger Property="IsChecked"
             Value="True">
                <Setter TargetName="CheckMark"
              Property="Visibility"
              Value="Visible" />
            </Trigger>
            <Trigger Property="IsCheckable"
             Value="True">
                <Setter TargetName="Check"
              Property="Visibility"
              Value="Visible" />
                <Setter TargetName="Icon"
              Property="Visibility"
              Value="Hidden" />
            </Trigger>
            <Trigger Property="IsHighlighted"
             Value="True">
                <Setter Property="Background" Value="{DynamicResource BaseSolidColorBrush}"/>
         
            </Trigger>

        </ControlTemplate.Triggers>
    </ControlTemplate>

    <ControlTemplate x:Key="{x:Static MenuItem.SubmenuHeaderTemplateKey}"
                 TargetType="{x:Type MenuItem}">
        <Border x:Name="Border" SnapsToDevicePixels="True"
                Background="{TemplateBinding Background}">
            <Grid Margin="{TemplateBinding Padding}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"
                          SharedSizeGroup="Icon" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto"
                          SharedSizeGroup="Shortcut" />
                    <ColumnDefinition Width="20" />
                </Grid.ColumnDefinitions>
                <ContentPresenter x:Name="Icon"
                        Margin="6,0,6,0"
                        VerticalAlignment="Center"
                        ContentSource="Icon" />
                <ContentPresenter x:Name="HeaderHost"
                        Grid.Column="1"
                                  VerticalAlignment="Center"
                        ContentSource="Header"
                        RecognizesAccessKey="True" />
                <TextBlock x:Name="InputGestureText"
                 Grid.Column="2"
                 Text="{TemplateBinding InputGestureText}"
                 Margin="5,2,2,2"
                 DockPanel.Dock="Right" />
                <Path Grid.Column="3"
                      x:Name="PART_Path"
                      Stretch="Fill"
                      Height="12" Width="10"
                      VerticalAlignment="Center"
                      Data="{StaticResource PathMenuItem}"
                      Fill="{TemplateBinding Foreground}">
                </Path>
                <Popup x:Name="Popup"
             Placement="Right"
             HorizontalOffset="10"
             VerticalOffset="-4"
             IsOpen="{TemplateBinding IsSubmenuOpen}"
             AllowsTransparency="True"
             Focusable="False"
             PopupAnimation="Fade">
                    <Border x:Name="SubmenuBorder"
                SnapsToDevicePixels="True"
                Background="{DynamicResource WhiteSolidColorBrush}"
                            Effect="{DynamicResource PopupShadowDepth}"
                            BorderBrush="{DynamicResource BaseSolidColorBrush}"
                            BorderThickness="1" Margin="10,0,10,10"
                            CornerRadius="{Binding Path=(wpfs:ElementHelper.CornerRadius),RelativeSource={RelativeSource TemplatedParent}}">
                        <ScrollViewer CanContentScroll="True" Margin="0,4">
                            <StackPanel IsItemsHost="True"
                        KeyboardNavigation.DirectionalNavigation="Cycle" />
                        </ScrollViewer>
                    </Border>
                </Popup>
            </Grid>
        </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="Icon"
             Value="{x:Null}">
                <Setter TargetName="Icon"
              Property="Visibility"
              Value="Hidden" />
            </Trigger>
            <Trigger Property="IsHighlighted"
             Value="True">
                <Setter Property="Background" Value="{DynamicResource BaseSolidColorBrush}"/>   
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

    <Style x:Key="{x:Type MenuItem}" TargetType="{x:Type MenuItem}" BasedOn="{StaticResource ControlBasicStyle}">
        <Setter Property="Height" Value="34" />
        <Setter Property="Padding" Value="10,0" />
        <Setter Property="Cursor" Value="Hand" />
        <Style.Triggers>
            <Trigger Property="Role"
             Value="TopLevelHeader">
                <Setter Property="MinWidth" Value="40"/>
                <Setter Property="Template"
              Value="{StaticResource {x:Static MenuItem.TopLevelHeaderTemplateKey}}" />
                <Setter Property="Grid.IsSharedSizeScope"
              Value="True" />
            </Trigger>
            <Trigger Property="Role"
             Value="TopLevelItem">
                <Setter Property="Template"
              Value="{StaticResource {x:Static MenuItem.TopLevelItemTemplateKey}}" />
            </Trigger>
            <Trigger Property="Role"
             Value="SubmenuHeader">
                <Setter Property="MinWidth" Value="200"/>
                <Setter Property="Template"
              Value="{StaticResource {x:Static MenuItem.SubmenuHeaderTemplateKey}}" />
            </Trigger>
            <Trigger Property="Role"
             Value="SubmenuItem">
                <Setter Property="MinWidth" Value="200"/>
                <Setter Property="Template"
              Value="{StaticResource {x:Static MenuItem.SubmenuItemTemplateKey}}" />
            </Trigger>
        </Style.Triggers>
    </Style>

</ResourceDictionary>

2）使用Styles.Menu.xaml如下

  <WrapPanel Margin="0,10">
                    <WrapPanel.ContextMenu>
                        <ContextMenu>
                            <MenuItem Header="1323"/>
                        </ContextMenu>
                    </WrapPanel.ContextMenu>
                    <Menu>
                        <MenuItem Header="MenuItem 1">
                            <MenuItem Header="MenuItem 1.1">
                                <MenuItem Header="MenuItem 1.1.1"/>
                                <MenuItem Header="MenuItem 1.1.2"/>
                            </MenuItem>
                            <Separator/>
                            <MenuItem Header="MenuItem 1.2"/>
                            <MenuItem Header="MenuItem 1.3"/>
                            <MenuItem Header="MenuItem 1.4"/>
                            <MenuItem Header="MenuItem 1.5"/>
                        </MenuItem>
                        <MenuItem Header="MenuItem 2"/>
                        <MenuItem Header="MenuItem 3"/>
                        <MenuItem Header="MenuItem 4"/>
                    </Menu>
</WrapPanel>