Silverlight实用窍门系列：8. Accordion模拟菜单,Accordion动态绑定数据,模拟菜单点击【附带源码实例】

        在实际应用中，我们常常会遇到创建菜单树的情况，而Silverlight的TreeView有时候不能满足要求，在这里我们将使用Accordion模拟一个效果比较好的菜单。

        在本节中，我们使用绑定的方式来动态的显示ObservableCollection数据源集合。

        首先我们需要在项目中引入System.Windows.Controls.Toolkit.dll和System.Windows.Controls.Layout.Toolkit.dll两个DLL文件。然后再XAML和XAML.CS代码中引用他们。

        然后我们开始准备数据源部分，首先我们声明两个实体类，Catalog类和TestSimple类。其中Catalog类有一个属性为TestSimple类的集合（通俗的说就是Catalog类的一个属性是多个TestSimple类对象的实体）。Catalog类是一级菜单，TestSimple类是二级菜单，所以一级菜单除了自己需要名字之外，还需要有多个二级菜单项。在这里，我们贴出数据源的两个实体类代码如下：

    /// <summary>
    /// 一级菜单
    /// </summary>
    public class Catalog
    {
        public Catalog()//实例化本类的时候，调用本构造函数让初始化TestSimples属性
        {
            TestSimples = new ObservableCollection<TestSimple>();
        }

        public string CatalogName { get; set; } //一级菜单名称
        public ObservableCollection<TestSimple> TestSimples { get; set; }//二级菜单项的集合。
    }
    /// <summary>
    /// 二级菜单项
    /// </summary>
    public class TestSimple
    {
        public string Name { get; set; } //二级菜单名称
        public string TestID { get; set; } //二级菜单ID
    }

        声明了这两个实体类之后，我们需要构造数据源集合，然后绑定到Accordion菜单，其关键代码如下：

 ObservableCollection<Catalog> catalogsk = new ObservableCollection<Catalog>();
            string BlackStr = "           ";
            catalogsk.Add(
                new Catalog()
                {
                    CatalogName = "配置菜单",
                    TestSimples = new ObservableCollection<TestSimple>() 
                    { 
                        new TestSimple(){Name=BlackStr+"系统配置",TestID="configSystem"},
                            new TestSimple(){Name=BlackStr+"用户配置",TestID="configUser"},
                            new TestSimple(){Name=BlackStr+"日志配置",TestID="configCatalog"},
                            new TestSimple(){Name=BlackStr+"网络配置",TestID="configNetwork"},
                    }
                }
                );
            catalogsk.Add(
                new Catalog()
                {
                    CatalogName = "查询菜单",
                        TestSimples = new ObservableCollection<TestSimple>() 
                        { 
                            new TestSimple(){Name=BlackStr+"查询成绩",TestID="SearchSystem"},
                                new TestSimple(){Name=BlackStr+"查询日志",TestID="SearchUser"},
                                new TestSimple(){Name=BlackStr+"查询新闻",TestID="SearchNews"},
                                new TestSimple(){Name=BlackStr+"查询数目",TestID="SearchNumber"},
                                new TestSimple(){Name=BlackStr+"查询地理",TestID="SearchAddr"},
                                new TestSimple(){Name=BlackStr+"查询书籍",TestID="SearchProgram"},
                        }
                }
            );
            catalogsk.Add(
                new Catalog()
                {
                    CatalogName = "修改菜单",
                    TestSimples = new ObservableCollection<TestSimple>() 
                        { 
                            new TestSimple(){Name=BlackStr+"查询成绩",TestID="EditSystem"},
                                new TestSimple(){Name=BlackStr+"修改日志",TestID="EditUser"},
                                new TestSimple(){Name=BlackStr+"修改新闻",TestID="EditNews"},
                                new TestSimple(){Name=BlackStr+"修改数目",TestID="EditNumber"},
                                new TestSimple(){Name=BlackStr+"修改地理",TestID="EditAddr"},
                                new TestSimple(){Name=BlackStr+"修改书籍",TestID="EditProgram"},
                        }
                }
            );
            theList.ItemsSource = catalogsk;

我们再贴出XAML关键代码即可。在这里

  <layoutToolkit:Accordion x:Name="theList" SelectionMode="ZeroOrMore"  Grid.Column="0" HorizontalAlignment="Left"  VerticalAlignment="Top" Width="200" Margin="5" BorderBrush="#FF849AAD" Height="Auto" BorderThickness="1">
            <layoutToolkit:Accordion.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <TextBlock Text="{Binding Name}"  />
                    </StackPanel>
                </DataTemplate>
            </layoutToolkit:Accordion.ItemTemplate>
            <layoutToolkit:Accordion.ContentTemplate>
                <DataTemplate>
                    <ListBox ItemsSource="{Binding TestSimples}" BorderThickness="0" Width="200" HorizontalAlignment="Stretch">
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding Name}" Tag="{Binding TestID}"  MouseLeftButtonDown="TextBlock_MouseLeftButtonDown"/>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>
                </DataTemplate>
            </layoutToolkit:Accordion.ContentTemplate>
        </layoutToolkit:Accordion>

        其中SelectionMode="ZeroOrMore"是设置本菜单的可以打开0个一级菜单也可以同时打开多个菜单项。Accordion.ItemTemplate是一级菜单的绑定列，Accordion.ContentTemplate是二级菜单的绑定列，在这里，二级菜单里面我们再内嵌了一个ListBox，然后这个ListBox再绑定了一个TextBlock列，并且这个列还有一个鼠标点击事件，在这个事件里面弹出触发事件的TextBlock的Tag标签值。通过这个标签值，我们可以控制点击菜单某项之后显示什么页面。

        至此，我们使用Accordion控件模拟了一个菜单，并且可以根据数据源自动生成菜单项。在这里我们贴出完整的源代码如下：

<UserControl x:Class="SLReadXML.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:layoutToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Layout.Toolkit"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
        <layoutToolkit:Accordion x:Name="theList" SelectionMode="ZeroOrMore"  Grid.Column="0" HorizontalAlignment="Left"  VerticalAlignment="Top" Width="200" Margin="5" BorderBrush="#FF849AAD" Height="Auto" BorderThickness="1">
            <layoutToolkit:Accordion.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <TextBlock Text="{Binding CatalogName}"  />
                    </StackPanel>
                </DataTemplate>
            </layoutToolkit:Accordion.ItemTemplate>
            <layoutToolkit:Accordion.ContentTemplate>
                <DataTemplate>
                    <ListBox ItemsSource="{Binding TestSimples}" BorderThickness="0" Width="200" HorizontalAlignment="Stretch">
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding Name}" Tag="{Binding TestID}"  MouseLeftButtonDown="TextBlock_MouseLeftButtonDown"/>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>
                </DataTemplate>
            </layoutToolkit:Accordion.ContentTemplate>
        </layoutToolkit:Accordion>
    </Grid>
</UserControl>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.IO;
using System.Xml;
using System.Windows.Browser;
using System.ComponentModel;
using System.Collections.ObjectModel;

namespace SLReadXML
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            BindDataSource();
        }

        public void BindDataSource()
        {
            ObservableCollection<Catalog> catalogsk = new ObservableCollection<Catalog>();
            string BlackStr = "           ";
            catalogsk.Add(
                new Catalog()
                {
                    CatalogName = "配置菜单",
                    TestSimples = new ObservableCollection<TestSimple>() 
                    { 
                        new TestSimple(){Name=BlackStr+"系统配置",TestID="configSystem"},
                            new TestSimple(){Name=BlackStr+"用户配置",TestID="configUser"},
                            new TestSimple(){Name=BlackStr+"日志配置",TestID="configCatalog"},
                            new TestSimple(){Name=BlackStr+"网络配置",TestID="configNetwork"},
                    }
                }
                );
            catalogsk.Add(
                new Catalog()
                {
                    CatalogName = "查询菜单",
                        TestSimples = new ObservableCollection<TestSimple>() 
                        { 
                            new TestSimple(){Name=BlackStr+"查询成绩",TestID="SearchSystem"},
                                new TestSimple(){Name=BlackStr+"查询日志",TestID="SearchUser"},
                                new TestSimple(){Name=BlackStr+"查询新闻",TestID="SearchNews"},
                                new TestSimple(){Name=BlackStr+"查询数目",TestID="SearchNumber"},
                                new TestSimple(){Name=BlackStr+"查询地理",TestID="SearchAddr"},
                                new TestSimple(){Name=BlackStr+"查询书籍",TestID="SearchProgram"},
                        }
                }
            );
            catalogsk.Add(
                new Catalog()
                {
                    CatalogName = "修改菜单",
                    TestSimples = new ObservableCollection<TestSimple>() 
                        { 
                            new TestSimple(){Name=BlackStr+"查询成绩",TestID="EditSystem"},
                                new TestSimple(){Name=BlackStr+"修改日志",TestID="EditUser"},
                                new TestSimple(){Name=BlackStr+"修改新闻",TestID="EditNews"},
                                new TestSimple(){Name=BlackStr+"修改数目",TestID="EditNumber"},
                                new TestSimple(){Name=BlackStr+"修改地理",TestID="EditAddr"},
                                new TestSimple(){Name=BlackStr+"修改书籍",TestID="EditProgram"},
                        }
                }
            );
            theList.ItemsSource = catalogsk;
        }


        private void TextBlock_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            TextBlock tb = sender as TextBlock;
            MessageBox.Show(tb.Tag.ToString());
        }

    }
    /// <summary>
    /// 一级菜单
    /// </summary>
    public class Catalog
    {
        public Catalog()//实例化本类的时候，调用本构造函数让初始化TestSimples属性
        {
            TestSimples = new ObservableCollection<TestSimple>();
        }

        public string CatalogName { get; set; } //一级菜单名称
        public ObservableCollection<TestSimple> TestSimples { get; set; }//二级菜单项的集合。
    }
    /// <summary>
    /// 二级菜单项
    /// </summary>
    public class TestSimple
    {
        public string Name { get; set; } //二级菜单名称
        public string TestID { get; set; } //二级菜单ID
    }
}

        本实例采用VS2010+Silverlight 4.0编写。点击 SLAccordion.rar 下载源码。