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

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

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

先看看效果图(颜色搭配不是很合理有些难看):

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

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

WPF一个简单的垂直菜单样式的实现
 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>
WPF一个简单的垂直菜单样式的实现
WPF一个简单的垂直菜单样式的实现
 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>
WPF一个简单的垂直菜单样式的实现

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

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

上一篇:linux下查找文件、排序、查看文件内容


下一篇:代理模式