silverlight自定义控件之时间范围选择控件-阿里云开发者社区

原文http://www.cnblogs.com/lijie198871/archive/2012/12/10/2805086.html

其实这样的控件在很多网站都有类似的，但本人没有找到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         }

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

演示示例：

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

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

热门文章

最新文章

相关电子书