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控件模拟了一个菜单,并且可以根据数据源自动生成菜单项。在这里我们贴出完整的源代码如下:

MainPage.xaml
MainPage.xaml.cs

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



    本文转自程兴亮博客园博客,原文链接:http://www.cnblogs.com/chengxingliang/archive/2011/02/19/1958522.html,如需转载请自行联系原作者

相关文章

热门文章

最新文章