手把手教你:亲手打造Silverlight的Win8 Metro外观(2) 菜单

小雨点点789

　　
　　经过上一篇的分析,现在开始动手!
　　首先来看一下. 我们的菜单他的表现形式是如何的.
　　比如说我们现在有一个数据库叫  lonix_gls_2  有一个表menu (菜单)
　　id 为主键,  fore_id 为上级id  , name 为菜单名 , Code为菜单所对面的xaml文件名
　　菜单为树形结构.数据如下,  红色为 主菜单



T-SQL 代码


1 SET ANSI_NULLS ON
2 GO
3 SET QUOTED_IDENTIFIER ON
4 GO
5 IF NOT EXISTS (SELECT * FROM sys.objects WHERE object_id = OBJECT_ID(N'[dbo].[menu]') AND type in (N'U'))
6 BEGIN
7 CREATE TABLE [dbo].[menu](
8     [id] [int] IDENTITY(1,1) NOT NULL,
9     [name] [nvarchar](10) NULL,
10     [foreid] [int] NULL,
11 PRIMARY KEY CLUSTERED
12 (
13     [id] ASC
14 )WITH (IGNORE_DUP_KEY = OFF) ON [PRIMARY]
15 ) ON [PRIMARY]
16 END
　　
我们用RIA SERVICE 所查出来的代码结构应该如下



1 new List
2             {
3                 new TestModel {
4                     Name = "编码设置",
5                     Children = new List {
6                         new TestModel { Name = "00101", Code="Test" } ,
7                         new TestModel { Name = "00102", Code="Test1" } ,
8                         new TestModel { Name = "00103"  }
9                     }
10                 },
11                 new TestModel {
12                     Name = "系统设置",
13                     Children = new List {
14                         new TestModel { Name = "00201" }
15                     }
16                 },
17             };
　　
以上为测试数据..
　　打开VS  新建三个模版控件!

　　新建的类默认从  Control  继承. 我们需要手动将其改为从 ItemsControl继承..
　　总共新建
　　Desktop(继承ItemsControl[主菜单容器])  以作用于包含任意项的 DesktopGroup
　　DesktopGroup(继承ItemsControl[分组菜单容器])  以作用于包含任意项的 DesktopItem
　　DesktopItem(继承ContentControl[子主菜单项])
　　
　　一. Desktop  主菜单容器
　　1. 使desktop 中的子项 横向自动布局, 因此我们将他的ItemsPanel 设为StackPanle
　　2. 使循环绑定子项
　　3. 容器的布局
　　代码如下:



1     
2         
3            
4                 
5                     
6                     
7                 
8            
9         
10         
11            
12                 
13                     
14                 
15            
16         
17         
18            
19                 
20                     
21                        
22                        
23                        
24                             
25                        
26                     
27                 
28            
29         
30     
　　
　　local 命名空间为 当前项目



xmlns:local="clr-namespace:当前项目"
　　
　　common 命名空间为



xmlns:common="clr-namespace:System.Windows;assembly=System.Windows.Controls"
　　Desktop 数据绑循环为 DesktopGroup
　　二. DesktopGroup子菜单容器
　　同Desktop 基本相同
　　



1   
2         
3            
4                 
5                     
6                 
7            
8         
9         
10            
11                 
12                     
13                 
14            
15         
16         
17            
18                 
19                     
20                        
21                             
22                             
23                        
24                        
25                        
28                             
29                                 
30                             
31                        
32                        
33                     
34                 
35            
36         
37     
　　DesktopGroup 数据绑定循环为 DesktopItem
　　DesktopItem相比这二个之下可能有点繁琐,因此放在下一篇来制作