Slider 控制項樣式提示

發行項
10/11/2017

Ee371160.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(zh-tw,Expression.40).png

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

Ee371160.42dd6b3d-3876-435a-b401-1f9d2c815454(zh-tw,Expression.40).png

Slider 範本的組件

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

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

Ee371160.7db0aaf3-dcb4-427a-9ebc-3d192e34df54(zh-tw,Expression.40).png

組件名稱	物件類型
HorizontalTemplate VerticalTemplate	FrameworkElement
HorizontalTrackLargeChangeDecreaseRepeatButton VerticalTrackLargeChangeDecreaseRepeatButton	RepeatButton
HorizontalThumb VerticalThumb	Thumb
HorizontalTrackLargeChangeIncreaseRepeatButton VerticalTrackLargeChangeIncreaseRepeatButton	RepeatButton

Slider 提示

Template 組件

此組件為強制組件。 template 組件包含組成特定方向之 Slider 的所有元素。

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

Thumb 組件

此組件為強制組件。指標是滑桿中可移動的元素。

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

軌跡

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

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

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

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

Slider 控制項的狀態

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

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

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

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

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

當您選取狀態時，狀態錄製功能便會開啟，以錄製您對該狀態所做的任何變更。若要關閉狀態錄製功能，請按一下錄製按鈕 Ee371160.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(zh-tw,Expression.40).png ，或在 [狀態] 面板中選取 [Base]。若要修改控制項在兩種個別狀態同時作用時的外觀，您可以鎖定其中一個狀態群組之狀態的預覽，同時修改另一個狀態群組中的狀態。

範本繫結

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

將物件轉換成 Slider 控制項

下圖是設計人員建立之滑桿的詳細設計圖 (comp)，此滑桿包含 HorizontalThumb 組件的 MouseOver 和 Pressed 狀態。

Normal

處於 Normal 狀態的 Slider

MouseOver

處於 MouseOver 狀態的 Slider

Pressed

處於 Pressed 狀態的 Slider

Disabled

處於 Disabled 狀態的 Slider

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

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

在 [程式碼] 檢視中，找出下列程式碼，然後刪除結尾的斜線符號 (/)。
```
<Grid x:Name="LayoutRoot" Background="White"/>
```

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

<Grid Width="146" Height="17" >
<Rectangle x:Name="track" Fill="#FF3D3D3D" StrokeThickness="0" Margin="0,6" />
<Rectangle x:Name="thumb" Fill="Gray" RadiusX="3" RadiusY="3" Width="7"/>
</Grid>

在剛貼上的程式碼後面新增結尾 Grid 標籤 (</Grid>)。
在 [物件與時間軸] 面板中，以滑鼠右鍵按一下 Grid ，然後按一下 [變成控制項]。在 [變成控制項] 對話方塊中，按一下 [Slider]，然後按一下 [確定]。

請注意，在 [程式碼] 檢視中，您在前一個步驟中貼上的程式碼已被取代為新 [Slider] 控制項的程式碼。此外，Expression Blend 也已將 Grid 變成新 Slider 樣式的範本，並將該範本套用至 Grid 。
若要新增欄至 Template 組件格線，請依下圖所示，在 [設計] 檢視中，按一下控制項左邊的藍色尺規來新增列：

如果您依上圖所示新增列，組件將會位於正確的列。 Track 的 ColumnSpan 為 3，而 thumb 則位於 Column 1。

注意：

由於編號由 0 開始，因此這 3 欄的編號是從 0 到 2。
若要將範本的根元素變成 [HorizontalTemplate] 組件，請在 [物件與時間軸] 面板中，以滑鼠右鍵按一下 [Grid]，按一下 [變成 Slider 的組件]，然後按一下 [HorizontalTemplate]。請注意， Grid 已重新命名為 HorizontalTemplate 。
在 [物件與時間軸] 面板中，以滑鼠右鍵按一下 thumb ，按一下 [變成 Slider 的組件]，然後按一下 [HorizontalThumb]。
若要新增狀態至 [HorizontalThumb] 組件，請執行下列動作：
1. 在 [物件與時間軸] 面板中，按一下 [thumb]。
2. 在 [狀態] 面板中，按一下 [MouseOver]。
3. 在 [屬性] 面板中，將 [Fill] 設為 #FFCCCCCC 。
4. 返回 [狀態] 面板，然後按一下 [Base]，結束狀態錄製作業。
  
  注意：
  
  您也可以按一下文件視窗左上角的 [記錄模式指標] ，結束狀態錄製作業。
以滑鼠右鍵按一下 [狀態] 面板中的 [MouseOver]，按一下 [將狀態複製到]，然後按一下 [Pressed]。
若要建立位移，請在 [狀態] 面板中選取 [Pressed] 狀態，然後在 [屬性] 面板的 [轉換] 類別中，將 [X] 和 [Y] 設定為 1 。按一下 [Base]，結束狀態錄製作業。
在 [狀態] 面板中，按一下 [Normal]。按一下 [新增切換]，然後按一下 [Normal 到 MouseOver]。將 [切換持續時間] 設定為 .2 。按一下 [Base]，結束狀態錄製作業。
按一下 [物件與時間軸] 面板中的 [將範圍傳回] ，回到 Slider 控制項 [SliderStyle1 (Slider 範本)] 的範本編輯模式。
在 [物件與時間軸] 面板中，按一下 [HorizontalThumb]。在 [屬性] 面板的 [版面配置] 類別中，按一下 [Margin] 旁的 [進階選項]，然後按一下 [重設]。
在 [物件與時間軸] 面板中，按一下 [HorizontalTemplate]。在 [組件] 面板中按兩下 [HorizontalTrackLargeChangeDecreaseRepeatButton]，以建立該組件，並將它變成 [HorizontalTemplate] 的子項。在 [屬性] 面板的 [外觀] 類別中，將 [Opacity] 設定為 0 。
在 [物件與時間軸] 面板中，按一下 [HorizontalTemplate]。在 [組件] 面板中按兩下 [HorizontalTrackLargeChangeIncreaseRepeatButton]，以建立該組件，並將它變成 [HorizontalTemplate] 的子項。在 [屬性] 面板的 [外觀] 類別中，將 [Opacity] 設定為 0 。
針對欄 0 和 1，按一下 [星號] 圖示兩次，直到 [自動] 圖示出現為止。針對欄 2，請確定是否出現 [星號] 圖示。按一下中間欄的分隔線，然後在 [屬性] 面板中，按一下 [顯示進階屬性]。按一下 [MinHeight] 值右側的 [進階選項]，然後按一下 [重設]。
在 [物件與時間軸] 面板中，按一下 [HorizontalTemplate]。在 [狀態] 面板中，按一下 [Disabled]。在 [屬性] 面板的 [外觀] 類別中，將 [Opacity] 設定為 50 。
按 CTRL+SHIFT+B，建置您的專案。建置完成後，請按 F5 執行專案，然後再測試捲軸。

注意：
由於編號由 0 開始，因此這 3 欄的編號是從 0 到 2。

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

參照

您可以在 MSDN 上的 Silverlight Control Gallery Ee371160.xtlink_newWindow(zh-tw,Expression.40).png (Silverlight 控制項陳列庫) 找到有關 Silverlight Slider 控制項之屬性與事件的詳細資訊。

另請參閱

工作

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

概念

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