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

经过上一篇的分析,现在开始动手!

首先来看一下. 我们的菜单他的表现形式是如何的.

比如说我们现在有一个数据库叫  lonix_gls_2  有一个表menu (菜单)

id 为主键,  fore_id 为上级id  , name 为菜单名 , Code为菜单所对面的xaml文件名

菜单为树形结构.数据如下,  红色为 主菜单

SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
IF NOT EXISTS (SELECT * FROM sys.objects WHERE object_id = OBJECT_ID(N'[dbo].[menu]') AND type in (N'U'))
BEGIN
CREATE TABLE [dbo].[menu](
    [id] [int] IDENTITY(1,1) NOT NULL,
    [name] [nvarchar](10) NULL,
    [foreid] [int] NULL,
PRIMARY KEY CLUSTERED 
(
    [id] ASC
)WITH (IGNORE_DUP_KEY = OFF) ON [PRIMARY]
) ON [PRIMARY]
END

我们用RIA SERVICE 所查出来的代码结构应该如下

new List<TestModel> 
            {
                new TestModel {
                    Name = "编码设置",
                    Children = new List<TestModel> { 
                        new TestModel { Name = "00101", Code="Test" } ,
                        new TestModel { Name = "00102", Code="Test1" } ,
                        new TestModel { Name = "00103"  } 
                    } 
                },
                new TestModel {
                    Name = "系统设置",
                    Children = new List<TestModel> { 
                        new TestModel { Name = "00201" } 
                    }
                },
            };

以上为测试数据..

打开VS  新建三个模版控件!

新建的类默认从  Control  继承. 我们需要手动将其改为从 ItemsControl继承..

总共新建 

Desktop(继承ItemsControl[主菜单容器])  以作用于包含任意项的 DesktopGroup

DesktopGroup(继承ItemsControl[分组菜单容器])  以作用于包含任意项的 DesktopItem

DesktopItem(继承ContentControl[子主菜单项])

一. Desktop  主菜单容器

1. 使desktop 中的子项 横向自动布局, 因此我们将他的ItemsPanel 设为StackPanle

2. 使循环绑定子项

3. 容器的布局

代码如下:

    <Style TargetType="local:Desktop">
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <StackPanel x:Name="DesktopRootPanel" Orientation="Horizontal" Background="{x:Null}">
                    </StackPanel>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="ItemTemplate">
            <Setter.Value>
                <common:HierarchicalDataTemplate>
                    <local:DesktopGroup ItemsSource="{Binding Path=Children}" />
                </common:HierarchicalDataTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:Desktop">
                    <Grid>
                        <Border Background="White" Opacity="0.1">
                        </Border>
                        <Border Margin="50,0,50,0">
                            <ItemsPresenter />
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

local 命名空间为 当前项目

xmlns:local="clr-namespace:当前项目"

common 命名空间为

xmlns:common="clr-namespace:System.Windows;assembly=System.Windows.Controls"

Desktop 数据绑循环为 DesktopGroup

二. DesktopGroup子菜单容器

同Desktop 基本相同

  <Style TargetType="local:DesktopGroup">
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <tlk:WrapPanel  x:Name="DesktopGroupRootPanel" Orientation="Vertical" />
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="ItemTemplate">
            <Setter.Value>
                <common:HierarchicalDataTemplate>
                    <local:DesktopItem />
                </common:HierarchicalDataTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:DesktopGroup">
                    <Grid Margin="0,0,50,0" Height="Auto">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <TextBlock Text="{Binding Name}" Grid.Row="0" FontSize="15" FontWeight="Black" />
                        <Border Grid.Row="1"  Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}" >
                            <Border.Effect>
                                <BlurEffect Radius="5" />
                            </Border.Effect>
                        </Border>
                        <ItemsPresenter Margin="2" Grid.Row="1" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

DesktopGroup 数据绑定循环为 DesktopItem

DesktopItem相比这二个之下可能有点繁琐,因此放在下一篇来制作