以前制作類似於垂直菜單功能的控件我都是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>
代碼不多一點點，沒有實現具體的什么功能，要是真要這么用還得做一部分工作的，這只是個顯示效果而已。