silverlight自定義控件之時間范圍選擇控件

本文轉載自查看原文 2012-12-10 18:38 3229 SilverLight 4.0/ 時間控件/ 時間范圍選擇控件

其實這樣的控件在很多網站都有類似的，但本人沒有找到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         }

通過這兩個公共方法，進行切換展示時間維度類型，時間范圍。

演示示例：

如需源代碼，請猛點擊下載

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Silverlight 用戶控件與自定義控件詳解 Silverlight 用戶控件與自定義控件詳解 silverlight自定義控件之消息提示框 C# 自定義控件，日期時間選擇輸入插件 Android之自定義控件-城市選擇自定義支持多種格式可控范圍的時間選擇器控件 silverlight自定義控件之多媒體視頻播放器 Qt自定義控件 Winform自定義控件實例 Android自定義控件之TextView