WPF一个简单的垂直菜单样式的实现

以前制作类似于垂直菜单功能的控件我都是Listbox和一个Popup实现的，今天尝试着用Menu做了一个简单垂直菜单,就当是做了个小练习写了这篇随笔~；

有什么不对的地方希望大家指正，分享和记录也是一个学习和提高的过程^-^。

先看看效果图（颜色搭配不是很合理有些难看）：

实现方式就是重写了Menu和MenuItem的样式，绿色的地方是可以添加Icon的，只是简单的用Rectangle代替了（还是能说明问题的）

  <Style TargetType="{x:Type Menu}">
             <Setter Property="Template">
                 <Setter.Value>
                     <ControlTemplate TargetType="{x:Type Menu}">
                         <Border CornerRadius="0">
                             <ItemsPresenter/>
                         </Border>
                     </ControlTemplate>
                 </Setter.Value>
             </Setter>
         </Style>

         <Style TargetType="{x:Type MenuItem}">
             <Setter Property="Template">
                 <Setter.Value>
                     <ControlTemplate TargetType="{x:Type MenuItem}">
                         <Border Margin="0,2" x:Name="bd" Background="#CCCCCC" MinWidth="100" CornerRadius="0">
                             <Grid>
                                 <Grid.ColumnDefinitions>
                                     <ColumnDefinition Width="30"/>
                                     <ColumnDefinition/>
                                 </Grid.ColumnDefinitions>
                                 <Rectangle Fill="#99CC66" Height="20" Width="20"/>
                                 <ContentPresenter Margin="0,10" ContentSource="Header" Grid.Column="1" HorizontalAlignment="Left"/>
                                 <Popup x:Name="pop" Margin="10" IsOpen="{TemplateBinding IsSubmenuOpen}" AllowsTransparency="True" Placement="Right">
                                     <Border Margin="5" CornerRadius="5" Background="#FFCCCC">
                                         <StackPanel IsItemsHost="True">
                                         </StackPanel>
                                     </Border>
                                 </Popup>
                             </Grid>
                         </Border>
                         <ControlTemplate.Triggers>
                             <Trigger Property="IsMouseOver" Value="true">
                                 <Setter TargetName="bd" Property="Background" Value="#0099CC"/>
                                 <Setter TargetName="pop" Property="IsOpen" Value="true"/>
                             </Trigger>
                             <Trigger Property="IsMouseOver" Value="False">
                                 <Setter TargetName="pop" Property="IsOpen" Value="false"/>
                             </Trigger>
                             <Trigger Property="IsPressed" Value="True">
                                 <Setter TargetName="bd" Property="Background" Value="#FF6666"/>
                                 <Setter TargetName="pop" Property="IsOpen" Value="false"/>
                             </Trigger>
                         </ControlTemplate.Triggers>
                     </ControlTemplate>
                 </Setter.Value>
             </Setter>
         </Style>

  <StackPanel Width="100" HorizontalAlignment="Left">
         <Menu>
             <MenuItem Header="开始">
                 <MenuItem Header="开始"></MenuItem>
                 <MenuItem Header="开始"></MenuItem>
                 <MenuItem Header="开始"></MenuItem>
                 <MenuItem Header="开始"></MenuItem>
             </MenuItem>
         </Menu>
         <Menu>
             <MenuItem Header="哈哈">
                 <MenuItem Header="哈哈"></MenuItem>
                 <MenuItem Header="哈哈"></MenuItem>
                 <MenuItem Header="哈哈"></MenuItem>
                 <MenuItem Header="哈哈"></MenuItem>
             </MenuItem>
         </Menu>
         <Menu>
             <MenuItem Header="哦哦">
                 <MenuItem Header="好看啦啦啦"></MenuItem>
                 <MenuItem Header="啦啦啦"></MenuItem>
                 <MenuItem Header="啦啦啦"></MenuItem>
                 <MenuItem Header="啦啦啦"></MenuItem>
             </MenuItem>
         </Menu>
     </StackPanel>

代码不多一点点，没有实现具体的什么功能，要是真要这么用还得做一部分工作的，这只是个显示效果而已。