手把手教你:親手打造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相比這二個之下可能有點繁瑣,因此放在下一篇來制作