Silverlight实用窍门系列:8. Accordion模拟菜单,Accordion动态绑定数据,模拟菜单点击【附带源码实例】
2011-02-19 15:12
816 查看
在实际应用中,我们常常会遇到创建菜单树的情况,而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类是二级菜单,所以一级菜单除了自己需要名字之外,还需要有多个二级菜单项。在这里,我们贴出数据源的两个实体类代码如下:
声明了这两个实体类之后,我们需要构造数据源集合,然后绑定到Accordion菜单,其关键代码如下:
我们再贴出XAML关键代码即可。在这里
其中SelectionMode="ZeroOrMore"是设置本菜单的可以打开0个一级菜单也可以同时打开多个菜单项。Accordion.ItemTemplate是一级菜单的绑定列,Accordion.ContentTemplate是二级菜单的绑定列,在这里,二级菜单里面我们再内嵌了一个ListBox,然后这个ListBox再绑定了一个TextBlock列,并且这个列还有一个鼠标点击事件,在这个事件里面弹出触发事件的TextBlock的Tag标签值。通过这个标签值,我们可以控制点击菜单某项之后显示什么页面。
至此,我们使用Accordion控件模拟了一个菜单,并且可以根据数据源自动生成菜单项。在这里我们贴出完整的源代码如下:
MainPage.xaml.cs
本实例采用VS2010+Silverlight 4.0编写。点击 SLAccordion.rar 下载源码。
在本节中,我们使用绑定的方式来动态的显示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.cs
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 下载源码。
相关文章推荐
- Silverlight实用窍门系列:5.绑定webService数据到DataGrid,设置DataGrid模板,模拟数据库数据的绑定【附带实例源码】
- 8. Accordion模拟菜单,Accordion动态绑定数据,模拟菜单点击
- Silverlight实用窍门系列:48.DataGrid行详细信息的绑定--DataGrid.RowDetailsTemplate【附带实例源码】
- Silverlight实用窍门系列:9.动态生成实体类,根据XML模板使用Emit生成动态类绑定到DataGrid【附代实例源码】
- Silverlight实用窍门系列:15.Visifire图表控件的使用二(DataPoint点击事件和Legend文字标注栏的点击事件)【附带源码实例】
- Silverlight实用窍门系列:2.Silverlight动态加载外部XML指定地址的WebService---(动态加载外部XML文件中指定的WebService地址)【附带实例源码】
- Silverlight实用窍门系列:13.基于Popup浮动窗体控件模拟ToolTip的实现【附带实例源码】
- Silverlight实用窍门系列:4.Silverlight 4.0添加鼠标右键菜单和Silverlight全屏模式的进入退出。【附带源码实例】
- Silverlight实用窍门系列:28.Silverlight制作随机分布雷达扫描点,模拟雷达扫描图之被扫描设备【附带源码实例】
- Silverlight实用窍门系列:38.Silverlight读取服务器端格式化的Json数据【附带实例源码】
- Silverlight实用窍门系列:2.Silverlight动态加载外部XML指定地址的WebService---(动态加载外部XML文件中指定的WebService地址)【附带实例源码】
- Silverlight实用窍门系列:33.OOB模式下WebBrowser的简单应用--模拟浏览器和百度地图【附带源码实例】
- Silverlight实用窍门系列:13.基于Popup浮动窗体控件模拟ToolTip的实现【附带实例源码】
- Silverlight实用窍门系列:25.Silverlight多线程技术Timer的应用,模拟心电图、模拟CPU、内存状态图【附带源码实例】
- Silverlight实用窍门系列:27.Silverlight二维旋转+平面渐变+动画,模拟雷达扫描图之基本框架【附带源码实例】
- Silverlight实用窍门系列:4.Silverlight 4.0添加鼠标右键菜单和Silverlight全屏模式的进入退出。【附带源码实例】
- Silverlight实用窍门系列:33.OOB模式下WebBrowser的简单应用--模拟浏览器和百度地图【附带源码实例】
- Silverlight实用窍门系列:18.DataGrid内绑定ComboBox和ListBox以及取值【附带源码实例】
- Silverlight实用窍门系列:10.动态生成DataGrid,动态绑定DataGrid模板列【附带实例源码】
- Silverlight实用窍门系列:39.Silverlight中使用Frame和Page控件制作导航【附带实例源码】