Silverlight自定义控件系列 – TreeView (2) 基本布局和States
TreeView的树形结构都以缩进方式显示,现在来完成这部分。
首先,要定义出每个节点上都包含什么东西。先看看Win7资源管理器的TreeView:
图2.1 资源管理器
一个通用的TreeView至少有缩进,箭头,Header。但是我们常常会用到勾选功能,也会用到图标来达到更高的友好度,因此这里暂时先按一下的格局来定义:
缩进 | 箭头 | 选择框 | 图标 | 显示文字 |
子节点 |
那么开始了。用上次的模板,把Root分成两行,在Root的第一行中添加一个Border,用来放置节点的所有物件;在第二行中添加一个ItemsPresenter,名为ItemsHost,用来表示子节点集合。
接着在Border中再添加一个Grid用来布局,Grid分5列(原因看上表格),第一列添加一个Grid名为Indention,缩进用;第二列添加一个ToggleButton名为Expander作箭头按钮(非常好用);第三列放CheckBox;第四列放一个Image;把Header拖到第五列上。这样,简单的基础布局做好了。
图2.2.1 基础布局(1)
图2.2.2 基础布局(2)
图2.3 基础布局效果图
现在我们开始实现通过点击Expander来显示和隐藏子节点。首先增加展开和收起的模板状态:
1: [TemplateVisualState(Name = "Expanded", GroupName = "ExpandedStates")]
2: [TemplateVisualState(Name = "Collapsed", GroupName = "ExpandedStates")]
3: public class FancyTreeViewItem : HeaderedItemsControl
4:
编译之后,在Blend 4的States界面上会看到:
图2.4 States中的新状态
现在我们在Base下把ItemsHost的Visibility设为Collapsed,然后点选Expanded,当左边圆点变红后,把ItemsHost的Visibility设为Visible。
图2.5 录制不同的States
States已经录制好了,但是现在点击Expander还不能转到相应的State,所以要添加一个状态变量用来记录目前是被展开还是收起状态,当状态改变的时候转到相应的State。
记录状态的IsExpanded以及回叫方法OnIsExpandedPropertyChanged:
1: /// <summary>
2: /// Using a DependencyProperty as the backing store for IsExpanded. This enables animation, styling, binding, etc...
3: /// </summary>
4: public static readonly DependencyProperty IsExpandedProperty =
5: DependencyProperty.Register("IsExpanded", typeof(bool), typeof(FancyTreeViewItem),
6: new PropertyMetadata(false, new PropertyChangedCallback(FancyTreeViewItem.OnIsExpandedPropertyChanged))
7: );
8:
1: /// <summary>
2: /// Call back when IsExpanded property has been changed
3: /// </summary>
4: /// <param name="o">The target object</param>
5: /// <param name="e">The property changed event arrguments</param>
6: private static void OnIsExpandedPropertyChanged(DependencyObject o, DependencyPropertyChangedEventArgs e)
7: {
8:
9: }
10:
1: #region Properties
2:
3: /// <summary>
4: /// Gets or sets a value indicating whether the items have been expanded
5: /// </summary>
6: public bool IsExpanded
7: {
8: get { return (bool)GetValue(IsExpandedProperty); }
9: set { SetValue(IsExpandedProperty, value); }
10: }
11:
12: #endregion
13:
转向状态的方法和事件的触发:
1: /// <summary>
2: /// To raise the event handler
3: /// </summary>
4: /// <param name="handler">The target event handler</param>
5: /// <param name="e">The routed event arrguments</param>
6: private void RaiseEvent(RoutedEventHandler handler, RoutedEventArgs e)
7: {
8: if (handler != null)
9: {
10: handler(this, e);
11: }
12: }
13:
14: /// <summary>
15: /// To update the control's visual state
16: /// </summary>
17: /// <param name="userTransitions">The flag that whether allow to update</param>
18: internal virtual void UpdateVisualState(bool userTransitions)
19: {
20: if (this.IsExpanded)
21: {
22: VisualStateManager.GoToState(this, "Expanded", userTransitions);
23: }
24: else
25: {
26: VisualStateManager.GoToState(this, "Collapsed", userTransitions);
27: }
28: }
29:






0
Silverlight自定义控件系列 – TreeView (2) 基本布局和States的更多相关文章
- Silverlight自定义控件系列 – TreeView (1)
原文路径:http://blog.csdn.net/wlanye/article/details/7265457 很多人都对MS自带的控件不太满意(虽然MS走的是简约风格),都会试图去修改或创建让 ...
- Silverlight自定义控件系列 – TreeView (4) 缩进
接下来是缩进,没有缩进的Tree怎么看都不顺眼. 首先,定义节点深度Depth(注:回叫方法暂没有代码,以后要用到): 1: /// <summary> 2: /// Using a De ...
- Silverlight自定义控件系列 – TreeView (3) 添加展开和收起事件
由于Writer嫌我文章过长,只能把上篇拆开两半了.以下是接着上篇的. 准备工作做完了,现在就要完成点击事件. 定义Expander和单击事件: 1: /// <summary> 2: / ...
- 一步一步学Silverlight 2系列(3):界面布局
述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...
- 一步一步学Silverlight 2系列文章
概述 由TerryLee编写的<Silverlight 2完美征程>一书,已经上市,在该系列文章的基础上补充了大量的内容,敬请关注.官方网站:http://www.dotneteye.cn ...
- 一步一步学Silverlight 2系列(22):在Silverlight中如何用JavaScript调用.NET代码
概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...
- 一步一步学Silverlight 2系列(20):如何在Silverlight中与HTML DOM交互(下)
述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...
- 一步一步学Silverlight 2系列(19):如何在Silverlight中与HTML DOM交互(上)
概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...
- 一步一步学Silverlight 2系列(18):综合实例之RSS阅读器
一步一步学Silverlight 2系列(18):综合实例之RSS阅读器 概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支 ...
随机推荐
- 20154312 曾林 Exp5_MSF基础应用
--目录-- MSF渗透测试-CVE-2017-11882 1.基础内容回答 2.实践过程记录 2.1.主动攻击实践-ms08_067 2.2.针对浏览器的攻击-ms10_046 2.3.针对客户端的 ...
- 【百度统计】设置页面元素点击事件转化pv、uv
html元素点击事件内添加代码:_hmt.push(['_trackEvent', category, action, opt_label, opt_value]); 1. '_trackEvent' ...
- mustache多次渲染和多个赋值
mustache多次渲染和多个赋值, html页面的script标签中的代码,设置多个键: <!-- 项目列表 --> <script type="text/x-templ ...
- Linux服务器配置---tftpserver
安装tftp-server 1.安装tftp-server [root@localhost weijie]# yum install -y tftp-server Loaded plugins: fa ...
- Linux配置自动时间同步
Linux配置自动时间同步时间同步命令:ntpdate -s time.windows.com自动时间同步:让linux从time.windows.com自动同步时间vi /etc/crontab加上 ...
- 音响理论基础入门:Gain(增益)
谈到放大器就必须先了解增益:一个小的信号Level(电平)经过放大电路成为大的信号Level ,也就是说由小变大之间的差异就叫增益,也叫放大率,反过来的叫衰减率.在音响系统内,一般以信号源的输入电平决 ...
- 教你如何用Nginx搭建一个安全的、快速的微服务架构
今天我们要谈论微服务以及如何使用Nginx构建一个快速的.安全的网络系统.最后,我们将向您展示一个使用Fabric模式如何非常快速和轻松地构建一个微服务的demo. 在我们探讨Fabric模式之前,我 ...
- I/O复习
I/O流之字符流 问题:字节流和字符流区别? java1.0只提供了字节流,分为输出流(Inputstream)和输入流(Outputstream), 以字节为单位来读取或写入数据,以二进制来处理数据 ...
- (二)github的价值意义篇
为什么需要社会化编程? 如果您是程序员面试官,两者之间你会选择哪一位呢? 能查看以前所写代码的程序员 or 无法查看的程序员 精通最新软件的程序员 or 不精通的程序员 对语言或软件差异带来的不同文化 ...
- Android 拖动条 和 Handle