Slider 控制項樣式提示

Slider 控制項代表一個範圍的值，其中目前的值是由稱為 Thumb 的物件類型所在位置來代表。

如同所有控制項一樣，Slider 控制項可修改為與其預設外觀非常不同。Slider 控制項的預設外觀如下：

相關的 Slider 控制項屬性

您可以在 [屬性] 面板中的 [一般屬性] 下設定 [Orientation] 屬性，讓 Slider 控制項變成水平或垂直方向。您也可以選取 [IsDirectionReversed] 屬性來反轉數字的方向。設定 [Minimum] 和 [Maximum] 屬性則可指定值的範圍。目前的值 (在 [Value] 屬性中指定) 必須介於最小值和最大值之間。[一般屬性] 類別下還有其他可以設定的屬性，例如 [LargeChange] 和 [SmallChange] 屬性。

您可以用下列方式設定這些屬性：

• 設定物件的屬性   在畫板上繪製 Slider 物件後，您可以直接設定物件的這些屬性。如果希望數個 Slider 控制項使用相同的值，可在樣式中設定這些屬性。

• 在樣式中設定屬性   如果您在 Slider 物件的樣式 中設定這些屬性，任何使用該樣式的 Slider 物件都會使用這些值。您可以覆寫特定物件的值。

  如需詳細資訊，請參閱建立樣式。

Slider 控制項的外觀會隨著狀態變更。您可以在範本編輯模式下選取 [狀態] 面板中的狀態，以便修改每一種狀態的外觀。

如需詳細資訊，請參閱以下表格中所列的狀態，並參閱定義控制項的不同視覺狀態。

Slider 範本的組件

Slider 控制項使用一個範本：Slider 範本。這個範本的每個組件都會影響套用範本之 Slider 物件的外觀和行為。

範本中可以有其他用來裝飾 Slider 控制項外觀的物件，但是下表列出的是在合約中與控制項行為繫結的組件。

若要檢視範本的組件，請在修改範本時開啟 [組件] 面板。

組件名稱	物件類型	描述
HorizontalTemplate  VerticalTemplate	FrameworkElement	此版面配置面板包含定義水平 (或垂直) 方向之 Slider 控制項外觀的物件。 此組件為強制組件。
HorizontalTrackLargeChangeDecreaseRepeatButton  VerticalTrackLargeChangeDecreaseRepeatButton	RepeatButton	此物件會在按一下 Slider 物件時縮減其 [Value] 屬性。[Value] 屬性會根據 [LargeChange] 屬性中的值依次遞減。
HorizontalThumb  VerticalThumb	Thumb	此物件在軌跡上的位置代表 Slider 控制項目前的值。 此組件為強制組件。
HorizontalTrackLargeChangeIncreaseRepeatButton  VerticalTrackLargeChangeIncreaseRepeatButton	RepeatButton	此物件會在按一下 Slider 物件時縮減其 [Value] 屬性。[Value] 屬性會根據 [LargeChange] 屬性中的值依次遞增。

Slider 控制項的狀態

根據預設，Slider 控制項可以處於 [CommonStates] 狀態群組中下列三種狀態的其中一種，您可以在修改 Slider 範本時於 [狀態] 面板中檢視狀態：

狀態名稱	描述
Normal	Slider 控制項沒有互動時的外觀。
MouseOver	使用者將指標移到 Slider 控制項上方時，控制項所顯示的外觀。
Disabled	IsEnabled 屬性設為 False 時，Slider 控制項的外觀。

Slider 控制項可以處於 [FocusStates] 狀態群組的下列兩種狀態之一：

狀態名稱	描述
Unfocused	Slider 控制項沒有鍵盤焦點時的外觀。
Focused	Slider 控制項具有鍵盤焦點時的外觀。例如，使用者可能會按 TAB 鍵來循環顯示應用程式中的物件，直到鍵盤焦點停留在 Slider 控制項為止。

秘訣：
狀態群組包含屬於相同邏輯類別但無法同時顯示的視覺狀態。例如，[CommonStates] 群組包含的狀態與使用者和輸入裝置 (例如滑鼠) 的互動有關。雖然控制項一次只能顯示同一狀態群組中的一種狀態，但卻可以同時顯示來自不同狀態群組的兩種狀態。

當您選取狀態時，狀態錄製功能便會開啟，以錄製您對該狀態所做的任何變更。若要關閉狀態錄製功能，請按一下錄製按鈕 ，或在 [狀態] 面板中選取 [基本]。若要修改控制項在兩種個別狀態同時作用時的外觀，您可以鎖定其中一個狀態群組之狀態的預覽，同時修改另一個狀態群組中的狀態。

將物件轉換成 Slider 控制項

若要修改 Slider 控制項的範本，請執行下列一項動作：

• 在畫板上繪製 [Slider] ，然後再建立預設範本的複本。

  如需詳細資訊，請參閱建立或修改範本。

• 藉由繪製物件或匯入圖案來設計 Slider 控制項的外觀，然後再使用 [變成控制項] 命令。

如果使用 [變成控制項] 命令，請依照下列步驟，確保您會建立 Slider 範本需要的所有物件：

1. 將要用來定義 Slider 控制項外觀的所有物件群組成 [格線] 版面配置面板。

2. 選取新的 Grid 物件，然後在 [工具] 功能表上，按一下 [變成控制項]。

3. 在出現的對話方塊中，選取 [Slider]、為範本命名，然後選取範本的儲存位置。

   如需有關位置的詳細資訊，請參閱建立資源。

4. 在您按一下 [確定] 之後，Microsoft Expression Blend 便會進入範本編輯模式，並顯示組成垂直 Slider 控制項的物件。

5. Slider 控制項的範本包含 Slider 物件呈水平或垂直方向時使用的組件。您可以將 [組件] 面板中所有的組件指派給範本中的物件，或是只指派與其中一種 Slider 控制項方向相關的組件。如果您只有一組物件，但是想要設計適用於兩種 Slider 控制項方向的範本，可以複製物件，並重新排列複製那一組物件。

   秘訣：
   如果只將 [組件] 面板中的垂直組件指派給範本中的物件，在 Slider 物件 (已套用範本) 設為水平顯示時，這些物件會從畫板上消失。若要變更 Slider 控制項的方向，請按一下畫板頂端階層連結列中的 [Slider]，返回 Slider 物件的編輯範圍，然後將 [Orientation] 屬性設為 [Vertical]，再使用階層連結列上的第三個按鈕返回範本編輯模式。

6. 若要建立 HorizontalTemplate (或 VerticalTemplate) 組件的物件，請執行下列動作：

   1. 繪製一個內含三欄 (或三列) 的 [格線]  版面配置面板。這三個欄的大小應該分別設成 [自動]、[自動] 和以星號調整大小 (*)。

      如需詳細資訊，請參閱新增或移除列或欄與變更列或欄的大小選項。

   2. 以滑鼠右鍵按一下新的 Grid 物件，然後指向 [變成 Slider 的組件]，再按一下 [HorizontalTemplate] (或 [VerticalTemplate])。

7. Thumb 物件移動的空間稱為軌跡。軌跡並不是範本組件，因此屬於選用項目。請將要用來代表軌跡的任何物件放入跨越所有 (共三個) 欄或列的 HorizontalTemplate (或 VerticalTemplate) 物件中。

   秘訣：
   若要讓物件跨越多個欄 (或列)，請選取物件，然後在 [屬性] 面板中，設定 [RowSpan] (或 [ColumnSpan]) 屬性。

8. 因為 Thumb 物件可以有自己的範本，所以您應該執行下列動作，將所要使用的物件轉換成 Thumb 控制項：

   1. 將代表 Thumb 物件的物件群組為版面配置面板。

   2. 將新的版面配置面板移入 [HorizontalTemplate] (或 [VerticalTemplate]) 物件的中間欄 (或列)。

      秘訣：
      若要將物件放入特定一欄 (或列)，請選取物件，然後在 [屬性] 面板中，設定 [Column] (或 [Row]) 屬性。第一欄 (或列) 的編號是 0。

   3. 以滑鼠右鍵按一下新的版面配置面板，然後指向 [變成 Slider 的組件]，再按一下 [HorizontalThumb] (或 [VerticalThumb])。

   4. 在 [變成組件] 對話方塊中，選取範本的儲存位置。

   5. 在進入新 Thumb 物件的範本編輯模式時，您可以繼續進行修改，例如選取 [狀態] 面板中的狀態來修改 Thumb 物件處於這些狀態時的外觀。如果您想在 Thumb 物件中加上邊界，請設定根物件的 [Margin] 屬性。

   6. 按一下 [物件與時間軸] 面板中的 [將範圍傳回] ，或是按一下畫板頂端階層連結列中的 [VerticalThumb] (或 [HorizontalThumb])，回到 Slider 物件的範本編輯模式。

   7. 將新 Thumb 物件的 [Width] 和 [Height] 屬性設為特定的值，讓中間欄 (或列) 配合 Thumb 物件自動調整大小。

9. 如果您要讓使用者可以按一下軌跡任一端，以較小的增量移動 Thumb 物件，請執行下列動作：

   1. 將您要用於減號按鈕的物件群組為版面配置面板。

   2. 將新的版面配置面板移入 [HorizontalTemplate] 物件的第一欄 (或 [VerticalTemplate] 物件的第一列)。

   3. 以滑鼠右鍵按一下新的版面配置面板，然後指向 [變成 Slider 的組件]，再按一下 [HorizontalTrackLargeChangeDecreaseRepeatButton] (或 [VerticalTrackLargeChangeDecreaseRepeatButton])。

   4. 在 [變成組件] 對話方塊中，選取範本的儲存位置。

   5. 在進入新 RepeatButton 物件的範本編輯模式時，您可以繼續進行修改，例如刪除 ContentPresenter 物件。如果您想在 RepeatButton 物件中加上邊界，請設定根物件的 [Margin] 屬性。

   6. 按一下 [物件與時間軸] 面板中的 [將範圍傳回] ，或是按一下畫板頂端階層連結列中的 [HorizontalTrackLargeChangeDecreaseRepeatButton] (或 [VerticalTrackLargeChangeDecreaseRepeatButton])，回到 Slider 物件的範本編輯模式。

   7. 在 [屬性] 面板中調整 [版面配置] 下的屬性，讓 RepeatButton 物件顯示在適當的位置。如果物件隱藏在其他物件後面，您也可以重新排列物件。

      如需詳細資訊，請參閱變更物件的圖層順序。

   8. 針對 [HorizontalTrackLargeChangeIncreaseRepeatButton] (或 [VerticalTrackLargeChangeIncreaseRepeatButton]) 物件重複上述步驟，將物件移到 [HorizontalTemplate] 物件的最後一欄 (或 [VerticalTemplate] 物件的最後一列)。

10. 您可以在這個模式中繼續修改範本。例如，新增或修改物件，或是選取 [狀態] 面板中的狀態，以修改範本在該狀態時的外觀。

11. 請考慮將範本中物件的部分筆刷屬性繫結到最終使用該範本之 Slider 物件的下列屬性：

    • Background

    • BorderBrush

    • Foreground

    • BorderThickness

    如需詳細資訊，請參閱完成範本的物件屬性。

12. 若要結束範本編輯模式，請按一下畫板頂端階層連結列中的 [Slider]，或按一下 [物件與時間軸] 面板中的 [將範圍傳回] 。

    如需將新 Slider 範本套用至其他 Slider 物件的詳細資訊，請參閱套用或移除資源。

參照

您可以在 MSDN 的 Silverlight Control Gallery (Silverlight 控制項陳列庫) 中找到有關 Microsoft Silverlight Slider 控制項之屬性與事件的詳細資訊。

請參閱

工作

將物件繫結至使用者輸入或其他內部值

概念

一般 Silverlight 控制項的樣式提示

SimpleSlider

設定支援範本之控制項的樣式