原文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分的范围。
以上是这个控件的主要功能，可以自由拖拽选择范围，并触发返回结果。
开发过程：
首先从功能可以知道这个控件是可以不涉及任何的业务逻辑，所以选择创建模版控件。
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 }
通过这两个公共方法，进行切换展示时间维度类型，时间范围。
演示示例：
如需源代码，请猛点击下载
