ScrollBar 控制項樣式提示

ScrollBar 控制項代表一個範圍的值，其中目前的值是由稱為 Thumb 的物件類型所在位置來代表。ScrollBar 物件通常使用於其他控制項 (例如 ListBox 或 ScrollViewer 控制項) 的範本內，以提供捲動功能。

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

相關的 ScrollBar 控制項屬性

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

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

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

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

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

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

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

ScrollBar 範本的組件

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

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

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

組件名稱	物件類型	描述
VerticalRoot HorizontalRoot	FrameworkElement	此版面配置面板包含定義垂直 (或水平) 方向之 ScrollBar 控制項外觀的物件。 此組件為強制項目。
VerticalSmallDecrease HorizontalSmallDecrease	RepeatButton	此物件會在按一下 ScrollBar 時縮減其 [Value] 屬性。[Value] 屬性會根據 [SmallChange] 屬性中的值依次遞減。
VerticalLargeDecrease HorizontalLargeDecrease	RepeatButton	此物件會在按一下 ScrollBar 時縮減其 [Value] 屬性。[Value] 屬性會根據 [LargeChange] 屬性中的值依次遞減。 此組件為強制項目。 秘訣： RepeatButton 物件具備您可以設定的屬性，但如果要新增、刪除或修改組成 RepeatButton 物件的物件，請開啟其範本。
VerticalThumb HorizontalThumb	Thumb	此物件在軌跡上的位置代表 ScrollBar 控制項目前的值。 此組件為強制項目。 秘訣： Thumb 物件具備您可以設定的屬性，但如果要新增、刪除或修改組成 Thumb 物件的物件，請開啟其範本。
VerticalLargeIncrease HorizontalLargeIncrease	RepeatButton	此物件會在按一下 ScrollBar 時增加其 [Value] 屬性。[Value] 屬性會根據 [LargeChange] 屬性中的值依次遞增。 此組件為強制項目。
VerticalSmallIncrease HorizontalSmallIncrease	RepeatButton	此物件會在按一下 ScrollBar 時增加其 [Value] 屬性。[Value] 屬性會根據 [SmallChange] 屬性中的值依次遞增。

ScrollBar 控制項的狀態

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

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

當您選取狀態時，狀態錄製功能便會開啟，以錄製您對該狀態所做的任何變更。若要關閉狀態錄製功能，請按一下錄製按鈕 ，或在 [狀態] 面板中選取 [基本]。

將物件轉換成 ScrollBar 控制項

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

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

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

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

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

1. 將您的物件群組到版面配置面板中，選取版面配置面板，然後在 [工具] 功能表上按一下 [變成控制項]。

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

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

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

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

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

5. 若要建立 VerticalRoot (或 HorizontalRoot) 組件的物件，請執行下列動作：

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

      

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

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

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

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

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

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

   2. 將新的版面配置面板移至 [VerticalRoot] (或 [HorizontalRoot]) 物件的中間列 (或欄)。

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

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

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

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

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

   7. 將 Thumb 物件的 [Width] 和 [Height] 屬性設為 [自動]，將 [MinHeight] (或 [MinWidth]) 屬性的值設為大於 0，並將 [Margin] 屬性設為 0。

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

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

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

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

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

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

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

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

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

   8. 針對 [VerticalSmallIncrease] (或 [HorizontalSmallIncrease]) 物件重複上述步驟，將物件移到 [VerticalRoot] 物件的最後一列 (或 [HorizontalRoot] 物件的最後一欄)。

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

   1. 在 Thumb 物件任一端的每列 (或欄) 中繪製 RepeatButton 控制項。

   2. 以滑鼠右鍵按一下會縮減 ScrollBar 物件值的 RepeatButton 物件，然後指向 [變成 ScrollBar 的組件]，再按一下 [VerticalLargeDecrease] (或 [HorizontalLargeDecrease])。

   3. 以滑鼠右鍵按一下會增加 ScrollBar 物件值的 RepeatButton 物件，然後指向 [變成 ScrollBar 的組件]，再按一下 [VerticalLargeIncrease] (或 [HorizontalLargeIncrease])。

   4. 如果您不希望顯示 RepeatButton 物件，可以將它們的 [Opacity] 屬性設為 0。

      秘訣：
      您可以選擇性地將現有物件轉換成 RepeatButton 控制項範本，正如您轉換 [VerticalSmallDecrease] (或 [HorizontalSmallDecrease]) 物件一樣。請確定將轉換後的 RepeatButton 物件移入 Thumb 物件任一端的列 (或欄) 中。

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

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

    • Background

    • BorderBrush

    • Foreground

    • BorderThickness

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

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

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

參照

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

請參閱

工作

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

概念

一般 Silverlight 控制項的樣式提示

SimpleScrollBar

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