开发者社区> 橘子红了呐> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

ContractedBlock.gifMainPage.xaml
ContractedBlock.gifMainPage.xaml.cs

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



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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Winfrom 使用TabControl控件模拟程序向导步骤
.NET : 隐藏TabControl的标签栏   在给应用程序添加一个向导的做法有很多,但其中比较简便易行的是使用TabControl。如下图所示 但有一个小小的美中不足,就是:作为向导而言,我们可能不希望它显示上面的那几个标签。
706 0
jqm选项卡开发,底部标签式设计,jqm模仿iPhone手机桌面菜单,jqm实战开发,jqm开发例子Demo
我有一个水货的上司,大家都是知道的。所以我就只能自学了,今天我给大家带来的是jQuery Mobile 模仿iphone 手机桌面的选项卡功能。比如电话,短信,浏览器,音乐的标签菜单。好吧,直接上代码:<pre code_snippet_id="378715" snippet_file_name="blog_20140605_1_1293162" name="code" class="ht
1095 0
[C#]模拟实现Visual Stduio工具栏动态效果--扩展控件DocKPanel
weiFenLuo.winFormsUI.Docking.dll是开源项目DockPanel Suite的一个类库,可以实现像Visual Studio的窗口停靠、拖拽等功能。 官方下载地址:http://sourceforge.net/projects/dockpanelsuite/ 具体操作可参考以下: 1.建立一个WinForm工程,默认生成了一个WinForm窗体Form1。
725 0
C#(winform)项目中自制alert提示窗体并引用系统图标资源
先来个图片: 再上代码 代码 using System;using System.Collections.Generic;using System.ComponentModel;using System.
690 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
宏光S导航安装教程
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载