WPF進階技巧和實戰03-控制元件（4-基於範圍的控制元件及日期控制元件）

蝸牛的希望發表於2021-11-05
控制元件

系列文章連結

基於範圍的控制元件

WPF提供了3種範圍概念的控制元件，這些控制元件使用在特定最小值和最大值之間的數值，ScrollBar、ProgressBar、Slider，他們都繼承自RangeBase類（該類繼承自Control類）。RangeBase類定義的屬性：

名稱 說明
Value 控制元件的當前值，必須在最大值和最小值之間。預設是從0開始。屬性值不是整數，是double，可接受小數值。Value屬性值發生變化時，可響應ValueChanged事件
Maximum 上限，允許的最大值
Minimum 下限，允許的最小值
SmallChange 最小變化（調整的數量）。小變化的含義與控制元件相關，對於ScrollBar和Slider控制元件，這是當使用箭頭鍵時值改變的量，對於ScrollBar控制元件，還可以使用滾動條兩端的箭頭按鈕
LargeChange 最大變化（調整的數量）。大變化的含義與控制元件相關，對於ScrollBar和Slider控制元件，這是當使用PageUp和PageDown鍵或者單擊滑塊兩側時值改變的量

通常不直接使用ScrollBar控制元件，更高階的ScrollViewer控制元件封裝了兩個ScrollBar控制元件，Slider和ProgressBar控制元件更實用，經常被單獨使用。

Slider

當數字本身不是特別重要時，可使用該控制元件設定數值。比如通過滑動條上從一邊向另一邊拖動滑塊設定媒體播放器的音量是非常合理的。滑塊的大致位置指示當前相對音量，但是後面的數字對使用者沒有實際意義。Slider額外的屬性：

名稱 說明
Orientation 豎直滑動條和水平滑動條之間切換
Delay/Interval 當單擊並按下滑動條的兩側，控制滑動塊沿軌跡移動的速度。這兩個屬性都是毫秒值。Delay是單擊後在滑塊移動一個單位之前的時間，而Interval是當繼續按住滑鼠鍵時滑塊再次移動之前的時間
TickPlacement 決定刻度顯示的位置，預設是None不顯示刻度標記。還有TopLeft和BottomRight兩種情況顯示
TickFrequency 設定刻度之間的間隔，決定了顯示多少刻度。例如，可每隔5個單位放置一個刻度，每隔10個單位放置一個刻度等。
Ticks 如果希望在特定的不規則位置放置刻度，可使用Ticks集合，簡單地為每個刻度標記向該集合新增一個數值
IsSnapToTickEnabled 預設false，如果為true時，當移動滑動條時，會自動跳轉到合適的位置（最近的刻度）
IsSelectionRangeEnabled 如果為true，可使用選擇範圍使滑動條的一部分顯示陰影，使用SelectionStart和SelectionEnd屬性設定位置選擇範圍。選擇範圍沒有固有的意義，但可以因為任何有意義的目的而使用，如：媒體播放器有時使用陰影背景工具條指示媒體檔案的下載進度 
<Slider
    Width="400"
    VerticalAlignment="Center"
    IsSnapToTickEnabled="True"
    Maximum="{Binding DataStepMax}"
    Minimum="{Binding DataStepMin}"
    SmallChange="{Binding DataStepStep}"
    TickFrequency="{Binding DataStepStep}"
    Value="{Binding Step}" />

ProgressBar

該控制元件指示長時間執行任務的進度。不能與使用者進行互動。由程式碼傳遞Value屬性值，無法響應滑鼠動作或者鍵盤鍵入。通常方式是將它作為長時間執行的狀態指示器，甚至可能不知道該任務需要執行多長時間，可以通過IsIndeterminate屬性設定為true來完成這一工作（這時不再使用Minimum、Maximum和Value屬性）

<ProgressBar Height="20" Margin="0,5" 
IsIndeterminate="True" Maximum="200" 
Style="{StaticResource ProgressBarDanger}" Value="100" />

日期控制元件

WPF包含兩種日期控制元件：Calender和DatePicker。

Calender控制元件顯示日曆，與WIndows作業系統中看到的日曆相似，該控制元件每次顯示一個月份，允許從一個月份調到另一個月份，或者調到某個特定的月份（通過單擊月份的標題頭檢視一年中的月份，然後單擊月份）

DatePicker控制元件需要的控制元件較少。它模仿簡單的文字框，該文字框以長日期或者短日期格式儲存日期字串。提供了一個下來箭頭，單擊時，會彈出完整的日曆檢視（同Calender）。

兩個控制元件提供屬性允許確定顯示哪些日期以及哪些如期可供選擇（以連續的範圍提供這些日期），可供使用的屬性：

名稱 說明
DisplayDateStart
DisplayDateEnd		 設定在日曆檢視中顯示日期範圍。從第一個最早的日期DisplayDateStart到最後的日期DisplayDateEnd。不能導航到未包含能夠顯示的日期的月份。為顯示所有日期，可將DisplayDateStart屬性設定為DateTime.MinValue，並將DisplayDateEnd設定成DateTime.MaxValue
BlackoutDates 儲存在日曆中將被禁用或者不能選擇的日期集合。如果這些日期不在可顯示的日期範圍內，或者如果已經選擇了這些日期中的某個日期，那麼將接收到異常。為阻止選擇過去的任何日期，可呼叫BlackoutDates.AddDatesInPass（）方法
SelectedDate 作為DateTime物件提供選擇的日期（或者在沒有日期選中時使用null值）可以通過程式碼或者單擊日曆中的日期或者通過鍵盤輸入日期字串設定該屬性。在日曆檢視中，選擇的日期使用具有陰影的方框標識，只有當日期控制元件具有焦點時才會顯示該方框
SelectedDates 作為DateTime物件的集合提供選擇的日期。Calender控制元件支援該屬性，並且只有當修改SelectionMode屬性允許選擇多個日期時，該屬性才有用。
DisplayDate 使用DateTime物件確定在日曆檢視中最初顯示的日期。如果該屬性是null，將顯示SelectedDate屬性的值。如果兩者都為null，則顯示當前日期。
FirstDayOfWeek 確定在日曆中每行的開始位置（最左邊的位置）顯示一星期中的哪一天
IsTodayHighlighted 確定日曆檢視是否通過突出顯示指出當前日期
DisplayMode
（Calender控制元件）		 確定日曆最初的月份顯示模式。如果設定為Month，則顯示標準的單一月份檢視，如果是Year，則顯示當前年份中的月份，一旦單擊了某個月份，就顯示月份的完整檢視
SelectionMode
（Calender控制元件）		 確定日期選擇型別。預設值是SingleDate，允許選擇單個日期。None（完全禁止選擇日期），SingleRange（可選擇一組連續的日期），MultipleRange（可選擇任意日期的組合）。在後兩種模式下，可以通過拖動選擇多個日期，或者當按下Ctrl鍵時通過單擊選擇多個日期，可使用SelectedDates屬性獲取所有選擇的日期集合
IsDropDownOpen
(DatePicker控制元件）		 確定是否開啟DatePicker控制元件中的下拉日曆檢視。可通過程式碼設定該屬性顯示和隱藏日曆
SelectedDateFormat
（DatePicker控制元件）		 確定在此控制元件文字部分顯示選擇的日期方式，可選擇Short或者Long，實際的顯示格式取決於客戶計算機的區域設定。長日期通常包含月份和天的名稱

日期控制元件提供了不同的事件，最常見的是DatePicker控制元件的SelectedDateChanged事件或者Calender控制元件的SelectedDatesChanged事件，該事件新增了對多個日期選擇的支援。

Calender控制元件還新增了DisplayDateChanged事件，DatePicker控制元件還新增了CalenderOpened和CalenderClosed事件（日曆控制元件開啟或者關閉），DateValidationError事件（當用在文字輸入部分不能被轉換成合法的時間時觸發該事件）。

相關文章