SimpleSlider

本頁僅適用 WPF 專案

滑桿是簡單的控制項,可讓使用者藉由移動 Thumb 控制項,在各式各樣的值中選擇。根據預設,滑桿會以水平方式顯示,但您可以在 Microsoft Expression Blend 的 [屬性] 面板中的 [一般屬性] 下設定 [Orientation] 屬性,將它變更為以垂直方式顯示。若要設定滑桿值,請使用 Minimum、Maximum 和 Value 屬性。

SimpleSlider 控制項的畫板檢視

Cc295377.50295968-6423-4517-9479-ed886201b731(zh-tw,Expression.10).png

深入控制項範本

SimpleSlider 控制項範本由下列項目組成:

  • 名稱為 GridRoot 的 [格線] 面板:在滑桿內用來存放多個子元素。Grid 可讓應用程式使用者介面 (UI) 設計師輕鬆地將更多元素新增至範本。GridRoot 會分割成三列:最上列會保留 TopTick 元素,中間列會保留 Thumb 元素,而最下列則保留 BottomTick 元素。

  • 名稱為 TopTick 和 BottomTick 的兩個 TickBar 元素:用來顯示滑桿上的記號。根據預設,Visibility 屬性會設為 [折疊]。TickBar 元素會根據這個範本所套用的屬性 (在滑桿控制項上設定),決定要顯示的刻度數。TickBar 元素不會提供可編輯的範本,但是您可以設定滑桿控制項上的 Foreground 屬性 (這個 TickBar 是受限於範本之滑桿控制項的 Foreground 屬性),即可設定用來顯示記號的筆刷。

  • [框線] 元素:此元素有 BorderThickness 屬性,可以透過範本繫結至套用此範本之按鈕控制項的 BorderThickness 屬性。

  • 名稱為 PART_Track 的 Track 元素:用來顯示沿著捲軸的 Thumb 元素。使用者可以拖曳 Thumb 元素。根據預設,Thumb 元素會使用您可以編輯的 SimpleThumbStyle 範本。

  • 兩個 RepeatButton 元素:包含在 PART_Track 元素內,可讓使用者按一下捲動方塊的任一邊來對滑桿值做較大的變更。您可以在滑桿的 LargeChange 屬性中 (而非範本),對這些變更指定步驟值。當使用者以方向鍵來移動捲動方塊時,會使用 SmallChange 屬性所指定的間距值。

  • 版面配置轉換:用來顯示水平方向的滑桿。這項設計讓您不需費力編輯兩個不同的範本,省事許多。不過,如果需要使用兩個差異極大的方向,則需要不同的範本。在這種情況下,您可以在 Expression Blend 的 XAML 檢視中,在 <Style> 元素中使用 XAML 資源庫,根據方向來切換範本。系統 Slider 控制項的預設範本中可找到此範例。

    Cc295377.alert_caution(zh-tw,Expression.10).gif警告:

    請勿重新命名以 "PART_" 作為名稱開頭的任何元素,因為實作控制項的程式碼會參照這些元素。

    物件檢視:SimpleSlider 控制項的基本部分 (範本)

    Cc295377.29dedf1c-7f1c-41d0-82a6-8bfccb4eb726(zh-tw,Expression.10).png

Cc295377.7e183f1f-37d8-4dcb-980c-19a5d61ca087(zh-tw,Expression.10).gif回到頁首

使用屬性觸發程序

控制項範本中的屬性觸發程序,可讓控制項回應屬性變更。您可以在 [互動] 面板中,按一下 [觸發程序] 底下的項目,檢視觸發程序啟動時變更的屬性。例如,在 SimpleSlider 範本中,觸發程序便是根據 TickPlacement 屬性,決定是否顯示 TickBar 元素。該屬性可以設定 TopTick 和 BottomTick 元素的可見度。在 SimpleSlider 範本的觸發程序中,還可設定水平和垂直方向。方法是在滑桿上套用版面配置轉換,將滑桿以 90 度旋轉。由於追蹤會自行自動定位,因此會強制回復原狀以避免旋轉兩次。

Cc295377.7e183f1f-37d8-4dcb-980c-19a5d61ca087(zh-tw,Expression.10).gif回到頁首

使用筆刷

在 SimpleStyles.xaml 資源字典中,SimpleSlider 範本會使用下列筆刷資源:

  • 當沒有任何作用中的觸發程序時,Background 屬性是使用 LightBrush 來設定,而當 IsEnabled 為 False 時,則是使用 DisabledBackgroundBrush 來設定。

  • 當沒有任何作用中的觸發程序時,BorderBrush 屬性是使用 NormalBorderBrush 來設定,而當 IsEnabled 為 False 時,則是使用 DisabledBorderBrush 來設定。

  • TopTick 元素的 Foreground 屬性是使用 GlyphBrush 來設定。

  • SimpleThumb 範本的 Fill 屬性是使用 NormalBrush 來設定,而 Stroke 屬性是使用 NormalBorderBrush 來設定。

Cc295377.7e183f1f-37d8-4dcb-980c-19a5d61ca087(zh-tw,Expression.10).gif回到頁首

最佳作法與設計方針

  • 一般而言,如果您希望設計師在控制項上新增更多視覺元素,請使用 Grid 控制項作為範本的根。Expression Blend 會搜尋類似 Grid 控制項的版面配置面板,並且將它設為預設啟用,讓新增至畫板的新元素成為版面配置面板的子元素。

  • 若有需要,您可以將觸發程序新增至 SimpleSlider 範本,或修改 PART_Track 元素,讓滑桿看起來更有趣,但請勿重新命名以 "PART_" 作為名稱開頭的任何元素,因為實作控制項的程式碼會參照這些元素。Thumb 和重複按鈕必須放置在 Track 內正確的元素中。追蹤控制項知道如何根據 Slider 值來放置 Thumb 元素。重複按鈕會使用命令繫結來增加或減小滑桿的值。

  • 當您編輯 SimpelSlider 的範本時,可以使用 [互動] 面板的 [觸發程序] 區域來選取適當的觸發程序,強制顯示 TickBar 元素。例如,在 SimpleSlider 範本中,當 TickPlacement 設為 [兩者] 時,如果將 Visibility 屬性設為 [可見] 即可顯示這兩個 TickBar 元素。

Cc295377.7e183f1f-37d8-4dcb-980c-19a5d61ca087(zh-tw,Expression.10).gif回到頁首

請參閱

概念

試試看:自訂 SimpleSlider 的 Thumb 元素