silverlight自定义控件之时间范围选择控件

其实这样的控件在很多网站都有类似的,但本人没有找到silverlight版本的,只能自己动手开发了,还花了三天的工作量。


在讲具体内容之前还是先唠叨几句(可以直接略过本段),进博客园已经有几年了,但一直未发表过文章,有很多次想写,编辑器都打开了,最多就只保存了草稿,并未敢发布,原因很简单,自己的技术和写作能力不够好,怕误人子弟啊。每当要写文档的时候就觉得很痛苦,还不如写代码来得爽快,但是知道自己的弱项之后还是要努力去填补,希望通过发表博客接受大家的吐槽,接收更多不同的见解,提高自己也分享劳动成果给大家,所以发表的内容仅供参考,如有问题请指出并谅解。

这几天看到这个新闻,【编辑推荐】微软关闭Silverlight官网,该技术逐渐被边缘化 有小小的伤感,其实silverlight还是有很多优势的,至少我们公司有很多的silverlight项目。

 

功能概要:
1、月视图,是选择两个月份范围,例如选择201201到201212的范围。
2、日视图,是选择两个日期的范围,例如选择20121101到20121126的范围。
3、时间视图,是选择两个时间点的范围,可以设置步长,例如选择9点15分到18点30分的范围。

以上是这个控件的主要功能,可以自由拖拽选择范围,并触发返回结果。

开发过程:
首先从功能可以知道这个控件是可以不涉及任何的业务逻辑,所以选择创建模版控件。
silverlight有两种控件,一种是用户控件,另一种是模版控件。本人习惯是与业务关联涉及业务逻辑代码的就选择用户控件,独立于业务并可以提供给其他项目和模块使用的就选择模版控件。
至于两种类型控件如何选择,好处是什么,我认为是用户控件可以快速开发、使用方便、学习难度系数低。模版控件则易于扩展,根据需要重新自定义模版和样式以适合不同项目的风格。
其实两种类型的控件都能满足项目开发所需要的业务功能。

如图所示:

该控件可以由两个滑块点和一条时间轴组成,至于其他的元素都属于时间轴的一部分。

所以先创建模板控件“SilverPointer”,用blend编辑样式。

其实这个文件的结构比较简单,具体的过程就直接看源码吧。其中比较隐蔽一点的是添加了自定义的状态机,用于控制鼠标进去、移除使滑块突出显示。

 

然后创建“BetweenSilver”模板控件,这个相对比较复杂,还是直接看源码吧。

 

主要属性:

主要属性
  1         /// <summary>
  2         /// 选择范围类型
  3         /// </summary>
  4         public SilverSlecetCycleEnum SilverSlecetCycle
  5         {
  6             get
  7             {
  8                 return this.silverSelectCycle;
  9             }
 10             private set
 11             {
 12                 this.silverSelectCycle = value;
 13             }
 14         }
 15 
 16         /// <summary>
 17         /// 每次切换步长,单位分钟
 18         /// </summary>
 19         public int SilverStep
 20         {
 21             get { return silverStep; }
 22             private set
 23             {
 24                 silverStep = value;
 25             }
 26         }
 27 
 28         /// <summary>
 29         /// 可以选择的最大时间值
 30         /// </summary>
 31         public DateTime MaxDateTime
 32         {
 33             get { return maxDateTime; }
 34             private set { maxDateTime = value; }
 35         }
 36 
 37         /// <summary>
 38         /// 可以选择的最小时间值
 39         /// </summary>
 40         public DateTime MinDateTime
 41         {
 42             get { return minDateTime; }
 43             private set { minDateTime = value; }
 44         }
 45 
 46         /// <summary>
 47         /// 选中的开始时间值
 48         /// </summary>
 49         public DateTime StartDateTime
 50         {
 51             get { return startDateTime; }
 52             set
 53             {
 54                 if (startDateTime < minDateTime)
 55                 {
 56                     MessageBox.Show("开始时间必须大于最小时间");
 57                     return;
 58                 }
 59                 this.isSelfArrange = true;
 60                 startDateTime = value;
 61                 this.InvalidateArrange();
 62             }
 63         }
 64 
 65         /// <summary>
 66         /// 选中的结束时间值
 67         /// </summary>
 68         public DateTime EndDateTime
 69         {
 70             get { return endDateTime; }
 71             set
 72             {
 73                 if (endDateTime > maxDateTime)
 74                 {
 75                     MessageBox.Show("结束时间必须小于最大时间");
 76                     return;
 77                 }
 78                 endDateTime = value;
 79                 this.isSelfArrange = true;
 80                 this.InvalidateArrange();
 81             }
 82         }
 83 
 84         /// <summary>
 85         /// 显示或隐藏划动锚点的提示,默认显示
 86         /// </summary>
 87         public Visibility SilverPointerToolTipVisility
 88         {
 89             get
 90             {
 91                 return this.silverPointerToolTipVisility;
 92             }
 93             set
 94             {
 95                 this.silverPointerToolTipVisility = value;
 96                 if (this.silverPointerStart != null && this.silverPointerEnd != null)
 97                 {
 98                     this.silverPointerStart.ToolTipVisibility = this.silverPointerToolTipVisility;
 99                     this.silverPointerEnd.ToolTipVisibility = this.silverPointerToolTipVisility;
100                 }
101             }
102         }

可以看到有很多属性都是只读的,是因为有些属性公开可写,比较难控制,所以简单起见就通过调用方法初始化控件了。

公共方法:

初始化控件方法
 1         /// <summary>
 2         /// 初始化控件
 3         /// </summary>
 4         /// <param name="silverSelectCycle">日期类型</param>
 5         /// <param name="silverStep">步长,除Date_Time类型,其他默认为1就可以了</param>
 6         /// <param name="maxDateTime">最大时间</param>
 7         /// <param name="minDateTime">最小时间,除Date_Time类型,其他类型设置该字段无效</param>
 8         public void SetBetweenSilverPropertys(SilverSlecetCycleEnum silverSelectCycle, int silverStep, DateTime maxDateTime, DateTime minDateTime)
 9         {
10             if (silverStep <= 0)
11             {
12                 MessageBox.Show("步长必须大于0");
13                 return;
14             }
15 
16             if (silverSelectCycle == SilverSlecetCycleEnum.Date_Time)
17             {
18                 if (maxDateTime <= minDateTime)
19                 {
20                     MessageBox.Show("最大时间值 必须大于 最小时间值");
21                     return;
22                 }
23             }
24 
25             this.silverSelectCycle = silverSelectCycle;
26             this.silverStep = silverStep;
27             this.maxDateTime = maxDateTime;
28             this.minDateTime = minDateTime;
29 
30             this.CreateSubScript();
31             this.isSelfArrange = true;
32             this.InvalidateArrange();
33         }
34 
35         /// <summary>
36         /// 初始化控件
37         /// </summary>
38         /// <param name="silverSelectCycle">日期类型</param>
39         /// <param name="silverStep">步长,除Date_Time类型,其他默认为1就可以了</param>
40         /// <param name="maxDateTime">最大时间</param>
41         /// <param name="minDateTime">最小时间,除Date_Time类型,其他类型设置该字段无效</param>
42         /// <param name="startDateTime">选择的开始时间</param>
43         /// <param name="endDateTime">选择的结束时间</param>
44         public void SetBetweenSilverPropertys(SilverSlecetCycleEnum silverSelectCycle, int silverStep, DateTime maxDateTime, DateTime minDateTime,
45             DateTime startDateTime, DateTime endDateTime)
46         {
47             if (startDateTime >= endDateTime)
48             {
49                 MessageBox.Show("开始时间必须小于结束时间");
50                 return;
51             }
52 
53             if (silverSelectCycle == SilverSlecetCycleEnum.Date_Time)
54             {
55                 if (startDateTime < minDateTime)
56                 {
57                     MessageBox.Show("开始时间必须大于最小时间");
58                     return;
59                 }
60             }
61 
62             if (endDateTime > maxDateTime)
63             {
64                 MessageBox.Show("结束时间必须小于最大时间");
65                 return;
66             }
67 
68             this.startDateTime = startDateTime;
69             this.endDateTime = endDateTime;
70 
71             this.SetBetweenSilverPropertys(silverSelectCycle, silverStep, maxDateTime, minDateTime);
72         }

通过这两个公共方法,进行切换展示时间维度类型,时间范围。

 

演示示例:

Get Microsoft Silverlight

 

如需源代码,请猛点击下载

 

 

posted @ 2012-12-10 18:38 小李飛菜刀 阅读(...) 评论(...) 编辑 收藏