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         }

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

 

演示示例：

 

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