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

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

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

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

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

 1  <Style TargetType="{x:Type Menu}">

 2             <Setter Property="Template">

 3                 <Setter.Value>

 4                     <ControlTemplate TargetType="{x:Type Menu}">

 5                         <Border CornerRadius="0">

 6                             <ItemsPresenter/>

 7                         </Border>

 8                     </ControlTemplate>

 9                 </Setter.Value>

10             </Setter>

11         </Style>

12 

13         <Style TargetType="{x:Type MenuItem}">

14             <Setter Property="Template">

15                 <Setter.Value>

16                     <ControlTemplate TargetType="{x:Type MenuItem}">

17                         <Border Margin="0,2" x:Name="bd" Background="#CCCCCC" MinWidth="100" CornerRadius="0">

18                             <Grid>

19                                 <Grid.ColumnDefinitions>

20                                     <ColumnDefinition Width="30"/>

21                                     <ColumnDefinition/>

22                                 </Grid.ColumnDefinitions>

23                                 <Rectangle Fill="#99CC66" Height="20" Width="20"/>

24                                 <ContentPresenter Margin="0,10" ContentSource="Header" Grid.Column="1" HorizontalAlignment="Left"/>

25                                 <Popup x:Name="pop" Margin="10" IsOpen="{TemplateBinding IsSubmenuOpen}" AllowsTransparency="True" Placement="Right">

26                                     <Border Margin="5" CornerRadius="5" Background="#FFCCCC">

27                                         <StackPanel IsItemsHost="True">

28                                         </StackPanel>

29                                     </Border>

30                                 </Popup>

31                             </Grid>

32                         </Border>

33                         <ControlTemplate.Triggers>

34                             <Trigger Property="IsMouseOver" Value="true">

35                                 <Setter TargetName="bd" Property="Background" Value="#0099CC"/>

36                                 <Setter TargetName="pop" Property="IsOpen" Value="true"/>

37                             </Trigger>

38                             <Trigger Property="IsMouseOver" Value="False">

39                                 <Setter TargetName="pop" Property="IsOpen" Value="false"/>

40                             </Trigger> 

41                             <Trigger Property="IsPressed" Value="True">

42                                 <Setter TargetName="bd" Property="Background" Value="#FF6666"/>

43                                 <Setter TargetName="pop" Property="IsOpen" Value="false"/>

44                             </Trigger>

45                         </ControlTemplate.Triggers>

46                     </ControlTemplate>

47                 </Setter.Value>

48             </Setter>

49         </Style>

 1  <StackPanel Width="100" HorizontalAlignment="Left">

 2         <Menu>

 3             <MenuItem Header="开始">

 4                 <MenuItem Header="开始"></MenuItem>

 5                 <MenuItem Header="开始"></MenuItem>

 6                 <MenuItem Header="开始"></MenuItem>

 7                 <MenuItem Header="开始"></MenuItem>

 8             </MenuItem>

 9         </Menu>

10         <Menu>

11             <MenuItem Header="哈哈">

12                 <MenuItem Header="哈哈"></MenuItem>

13                 <MenuItem Header="哈哈"></MenuItem>

14                 <MenuItem Header="哈哈"></MenuItem>

15                 <MenuItem Header="哈哈"></MenuItem>

16             </MenuItem>

17         </Menu>

18         <Menu>

19             <MenuItem Header="哦哦">

20                 <MenuItem Header="好看啦啦啦"></MenuItem>

21                 <MenuItem Header="啦啦啦"></MenuItem>

22                 <MenuItem Header="啦啦啦"></MenuItem>

23                 <MenuItem Header="啦啦啦"></MenuItem>

24             </MenuItem>

25         </Menu>

26     </StackPanel>

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