ScrollBar 控制項樣式提示

您可以使用內建的 ScrollBar 控制項範本來建立自訂 ScrollBar 範本。 ScrollBar 控制項範本的預設外觀如下：

ScrollBar 範本的組件

ScrollBar 範本包含兩組組件：一組用於垂直捲軸，另一組則用於水平捲軸。根據捲軸的方向而定，組件名稱會加上 "vertical" 或 "horizontal" 一字作為前置字元。

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

ScrollBar 提示

Root 組件

此組件為強制項目。 Root 組件包含組成特定方向之 ScrollBar 的所有元素。

若要建立 Root 組件，請建立名為 HorizontalRoot 或 VerticalRoot 的格線，內含大小為 [自動]、[自動]、[自動]、[星號] 及 [自動] 的五欄 (水平方向) 或五列 (垂直方向)。

Thumb 組件

此組件為強制項目。指標是捲軸中可移動的元素。

若要將代表指標的物件變成 Thumb 控制項 ( HorizontalThumb 或 VerticalThumb )，請將 Thumb 組件放在 Root 組件的中間欄/列，並設定 Thumb 組件的 Width 和 Height 屬性，讓該欄 (或列) 能夠配合指標調整大小。

請勿設定指標的 Margin 屬性。若要達到相同的效果，請設定 Thumb 範本之根物件的邊界。

軌跡

指標移動的空間稱為軌跡。軌跡並不是組件，且屬於選用項目。

若要包含軌跡，請將代表軌跡的物件放入 Root 組件，使其跨越所有五欄 (或列) 或只跨越中間三欄 (或列)。

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

以較大的增量沿著軌跡移動指標

如果您想讓使用者能夠按一下指標任一側的軌跡，以較大的增量移動指標，請將 RepeatButton 控制項放在 Thumb 組件任一側的兩欄 (或列) 中，並將它們命名為 VerticalLargeDecrease 和 VerticalLargeIncrease (或是 HorizontalLargeDecrease 和 HorizontalLargeIncrease )。若要讓 RepeatButtons 發揮功能但不顯示，請將其 Opacity 指定為零。或者，請將包含 Opacity 為零之單一物件的範本套用到 RepeatButton 控制項。

以較小的增量沿著軌跡移動指標

如果您要讓使用者可以按一下軌跡任一端，以較小的增量移動指標，請將代表這些按鈕的物件變成 RepeatButton 控制項，並將它們命名為 VerticalSmallDecrease 和 VerticalSmallIncrease (或是 HorizontalSmallDecrease 和 HorizontalSmallIncrease )。請將它們放在兩端的欄 (或列) 中。

ScrollBar 控制項的狀態

您也可以將狀態與 ScrollBar 控制項範本搭配使用。根據預設， ScrollBar 控制項可以處於 CommonStates 狀態群組中下列三種狀態的其中一種：

秘訣：
若要檢視可用的狀態，請在修改 ScrollBar 範本時開啟 [狀態] 面板。

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

如需詳細資訊，請參閱定義控制項的不同視覺狀態。

範本繫結

您可以對 Background 、 BorderBrush 、 Foreground 、 BorderThickness 或 Padding 屬性進行範本繫結。如需詳細資訊，請參閱完成範本的物件屬性。

將物件轉換成 ScrollBar 控制項

下圖是捲軸的詳細設計圖 (comp)，此捲軸包含 VerticalThumb 、 VerticalSmallDecrease 和 VerticalSmallIncrease 組件的 MouseOver 和 Pressed 狀態。

Normal

MouseOver

Pressed

Disabled

此範例使用下列程序步驟 1 中的 XAML 程式碼 (對應於前面的圖形)，利用 ScrollBar 控制項範本來建立自訂捲軸。

秘訣：
按一下 [分割檢視]，即可在執行此程序時同時查看 [設計] 檢視和 [程式碼] 檢視中的變更。

1. 開啟新的 Microsoft Silverlight 專案。在 [程式碼] 檢視中，找出下列程式碼，然後刪除結尾的斜線符號 (/)。

   <Grid x:Name="LayoutRoot" Background="White"/>
   

2. 複製下列程式碼，然後將它貼到新專案中，接在步驟 1 找到的程式碼後面。

   <Grid x:Name="verticalscrollbar" Width="17" Height="146" >
      <Rectangle x:Name="track" Fill="#FF3D3D3D" StrokeThickness="0" />
      <Path x:Name="smalldecrease" Fill="Gray" Stretch="Fill" Width="7" Height="7" 
         Data="M200,312 L204,312 L200,305 z" Margin="0,5,0,0" VerticalAlignment="Top"/>
      <Rectangle x:Name="thumb" Fill="Gray" RadiusX="3" RadiusY="3" Height="61" Width="7" 
         Margin="0,24,0,0" VerticalAlignment="Top"/>
      <Path x:Name="smallincrease" Fill="Gray" Stretch="Fill" Width="7" Height="7" 
         Data="M200,305 L200,312 L204,305 z" Margin="0,0,0,5" 
         VerticalAlignment="Bottom" />
   </Grid>
   

3. 在剛貼上的程式碼後面新增結尾 Grid 標籤 (</Grid>)。

4. 在 [物件與時間軸] 面板中，以滑鼠右鍵按一下 verticalscrollbar ，然後按一下 [變成控制項]。在 [變成控制項] 對話方塊中，按一下 [ScrollBar]，然後按一下 [確定]。

   請注意，在 [程式碼] 檢視中，您在前一個步驟中貼上的程式碼已被取代為新 ScrollBar 控制項的程式碼 (請找出以 <Grid x:Name="verticalscrollbar"> 開頭的程式碼)。此外，Microsoft Expression Blend 也已將 verticalscrollbar 變成新 ScrollBar 樣式的範本，並將該範本套用至 verticalscrollbar (請找出 <Style x:Key="ScrollBarStyle1" TargetType="ScrollBar">)。

   秘訣：
   請注意，在 [物件與時間軸] 面板中，[UserControl] 已由 [Template] 所取代。

5. 若要將 verticalscrollbar 變成範本的根元素，請在 [物件與時間軸] 面板中，以滑鼠右鍵按一下 verticalscrollbar ，按一下 [變成 ScrollBar 的組件]，然後按一下 [VerticalRoot]。請注意， verticalscrollbar 已重新命名為 VerticalRoot 。

6. 若要新增列至 Root 組件格線，請依下圖所示，在 [設計] 檢視中，按一下控制項左邊的藍色尺規來新增列：

   

   如果您依上圖所示新增列，組件將會位於正確的列。 Track 的 RowSpan 為 5， smalldecrease 位於 Row 0， thumb 位於 Row 2，而 smallincrease 則位於 Row 4。

   注意：
   由於編號由 0 開始，因此這 5 列的編號是從 0 到 4。

   現在您必須將圖案的元素定義成範本的組件。定義元素時，您也可以指派值給特定的屬性。

7. 在 [物件與時間軸] 面板中，以滑鼠右鍵按一下 smalldecrease ，按一下 [變成 ScrollBar 的組件]，然後按一下 [VerticalSmallDecrease]。在 [變成組件] 對話方塊中，按一下 [確定]。

   smalldecrease 元素已經變成一種 RepeatButton ，屬於 ScrollBar 控制項範本的 VerticalSmallDecrease 組件。

8. 根據預設，Expression Blend 會建立組件的 ContentPresenter 。在這個範例中，您不會使用 ContentPresenter ，因此可以透過下列方式將它刪除：以滑鼠右鍵按一下 [物件與時間軸]] 中的 [ContentPresenter]，然後按一下 [刪除]。

9. 若要設定 VerticalSmallDecrease 組件的屬性，請在 [物件與時間軸] 面板中，按一下 smalldecrease ，然後開啟 [屬性] 面板。在 [版面配置] 類別中，將 [Width] 和 [Height] 設定為 7 。

10. 若要新增狀態至 VerticalSmallDecrease 組件，請在 [狀態] 面板中，按一下 [MouseOver]。在 [屬性] 面板中，將 [Fill] 設為 #FFCCCCCC 。返回 [狀態] 面板，然後按一下 [Base]，結束狀態錄製作業。

    注意：
    您也可以按一下文件視窗左上角的 [記錄模式指標] ，結束狀態錄製作業。

    在 [狀態] 面板中，按一下 [Pressed]。在 [屬性] 面板中，將 [Fill] 設為 #FFE5E5E5 。返回 [狀態] 面板，然後按一下 [Base]。

    在 [狀態] 面板中，按一下 [Normal]，按一下 [新增切換]，然後按一下 [Normal 到 MouseOver]。在 [切換持續時間] 方塊中輸入 .2 ，然後按一下 [Base]。

11. 在 [物件與時間軸] 面板中，按一下 [Grid]。在 [屬性] 面板的 [筆刷] 類別中，按一下 [單色筆刷] ，然後將 [Alpha] 屬性設定為 1 。

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

    針對 smallincrease 元素重複步驟 7 到 12。

13. 若要將 thumb 定義成範本的組件，請在 [物件與時間軸] 面板中，以滑鼠右鍵按一下 thumb ，按一下 [變成 ScrollBar 的組件]，然後按一下 [VerticalThumb]。在 [變成組件] 對話方塊中，按一下 [確定]。

14. 若要設定 VerticalThumb 的屬性，請按一下 [將範圍傳回] ，回到 ScrollBar 控制項 [ScrollBarStyle1 (ScrollBar Template)] 的範本編輯模式，然後在 [物件與時間軸] 面板中按一下 [VerticalThumb]。在 [屬性] 面板的 [版面配置] 類別中，將 [Width] 和 [Height] 設定為 7 。請將 [Margin] 的值設定如下：

    • 左： 5

    • 右： 5

    • 上： 0

    • 下： 0

    按一下 [進階屬性]，然後將 [MinHeight] 設定為 7 。這個動作會將最小的高度值指派給指標，讓它永遠顯示。

15. 若要新增狀態至 thumb 組件，請在畫板頂端的階層連結列中按一下 [thumb]，回到 Thumb 範本 [ThumbStyle1(ThumbTemplate)]。在 [狀態] 面板中，按一下 [MouseOver]。在 [屬性] 面板中，將 [Fill] 設為 #FFCCCCCC 。返回 [狀態] 面板，然後按一下 [Base]。

    在 [狀態] 面板中，按一下 [Pressed]。在 [屬性] 面板中，將 [Fill] 設為 #FFE5E5E5 。返回 [狀態] 面板，然後按一下 [Base]。

    在 [狀態] 面板中，按一下 [Normal]，按一下 [新增切換]，然後按一下 [Normal 到 MouseOver]。在 [切換持續時間] 方塊中輸入 .2 ，然後按一下 [Base]。

16. 在 [物件與時間軸] 面板中按一下 [將範圍傳回] ，回到 [ScrollBarStyle1 (ScrollBar Template)]。在 [物件與時間軸] 面板中，按一下 [VerticalRoot]。在 [組件] 面板中按兩下 [VerticalLargeDecrease]，以建立該組件，並將它變成 VerticalRoot 的子項。在 [屬性] 面板中，將 [Row] 設為 1 ，並將 [Opacity] 設為 0 。

17. 在 [物件與時間軸] 面板中，按一下 [VerticalRoot]。在 [組件] 面板中按兩下 [VerticalLargeIncrease]，以建立該組件，並將它變成 [VerticalRoot] 的子項。在 [屬性] 面板中，將 [Row] 設為 3 ，並將 [Opacity] 設為 0 。

18. 針對列 0、1、2 和 4，按一下 [星號] 圖示  兩次，直到 [自動] 圖示  出現為止。針對列 3，請確定是否出現 [星號] 圖示。如此即可將列高設定如下：[自動]、[自動]、[自動]、[星號] 和 [自動]。按一下每一個自動調整大小的列分隔線，然後在 [屬性] 面板中，按一下 [顯示進階屬性]。按一下 [MinHeight] 值右側的 [進階選項]，然後按一下 [重設]。

    

19. 在 [物件與時間軸] 面板中，按一下 [VerticalRoot]。在 [狀態] 面板中，按一下 [Disabled]。在 [屬性] 面板中，將 [Opacity] 設為 50 。

20. 按一下 CTRL+SHIFT+B，建置您的專案。建置完成後，請按 F5 執行專案，然後再測試捲軸。

參照

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

另請參閱

工作

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

概念

一般 Silverlight 控制項的樣式提示
SimpleScrollBar
設定支援範本之控制項的樣式

Copyright © 2011 by Microsoft Corporation. All rights reserved.