以前制作类似于垂直菜单功能的控件我都是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>
代码不多一点点，没有实现具体的什么功能，要是真要这么用还得做一部分工作的，这只是个显示效果而已。