試試看：自訂 SimpleScrollBar 的外觀

在 Microsoft Expression Blend 中，您可以使用 SimpleScrollBar 控制項範本輕鬆地自訂捲軸的外觀。

自訂 SimpleScrollBar 的外觀

1. 在 Expression Blend 中的畫板上繪製 SimpleScrollBar。

   秘訣：
   在 [資產庫] 中，可以從 [控制項] 索引標籤的 [簡單樣式] 類別中取得簡單樣式 (Simple Styles) 控制項。從清單中選取簡單樣式 (Simple Styles) 控制項之後，就可以在畫板上繪製該控制項。

2. 以滑鼠右鍵按一下 [物件與時間軸] 下的捲軸，指向 [編輯控制項組件 (範本)]，然後按一下 [編輯範本]。若不想變更 SimpleStyles.xaml 資源字典，您可以按一下 [編輯複本] 代替 [編輯範本] 來建立新範本並儲存至文件中。如需有關建立複本的詳細資訊，請參閱建立資源。

   秘訣：
   若要結束範本編輯模式並返回您的文件範圍，請在 [互動] 面板中的元素樹狀目錄上方，按一下 [選定範圍] 按鈕 。 若要返回現有範本的範本編輯模式，請在 [物件與時間軸] 下，以滑鼠右鍵按一下要編輯範本的元素，指向 [編輯控制項組件 (範本)]，然後按一下 [編輯範本]。

3. 在 [物件與時間軸] 下，按一下 [IncreaseRepeat] 元素，然後在 [屬性] 面板的 [筆刷] 下，將 [Background] 與 [BorderBrush] 屬性的 [Alpha] 屬性 (在調色盤右邊以 A 表示) 設為 0%。

4. 在 [物件與時間軸] 下，按一下 [IncreaseArrow] 路徑元素，然後將 [Stroke] 與 [Fill] 屬性設為白色的 [單色筆刷] 。對於 [Stroke] 屬性，您必須先按一下 [進階屬性選項] 按鈕 ，再按一下 [重設]，才能移除繫結。

5. 以滑鼠右鍵按一下 [物件與時間軸] 下的 [IncreaseRepeat] 元素，指向 [編輯控制項組件 (範本)]，然後執行下列一項動作：

   • 若您在步驟 2 中選取 [編輯範本]，現在請按一下 [編輯範本]，以編輯 SimpleStyles.xaml 中儲存的 SimpleRepeatButton 控制項範本。

   • 若您在步驟 2 中選取 [編輯複本]，現在請按一下 [編輯複本] 以建立 SimpleRepeatButton 控制項範本的複本，並將它儲存在與 ScrollBar 的範本相同的位置。

6. 在 SimpleRepeatButton 的編輯範圍中，刪除 [互動] 面板中 [觸發程序] 下名為 [IsMouseOver = True] 和 [IsPressed = True] 的事件觸發程序，作法是選取每一個觸發程序，然後按一下 [刪除觸發程序] 按鈕。

7. 執行下列其中一項動作，以返回 [SimpleScrollBar] 範本的編輯範圍：

   • 若您在步驟 5 中選擇 [編輯範本]，而目前正在編輯 Simple Styles.xaml 文件，請在畫板頂端按一下主文件的索引標籤 (例如 Window1.xaml 索引標籤)。以滑鼠右鍵按一下 ScrollBar 元素，指向 [編輯控制項組件 (範本)]，然後按一下 [編輯範本]，返回您先前編輯的 ScrollBar 範本。

   • 若您正在編輯主文件，請按一下 [選定範圍] 按鈕 。

8. 對 [DecreaseRepeat] 元素重複執行上一個步驟。

9. 在 [物件與時間軸] 下按兩下 [GridRoot] 元素以啟用此元素，再按一下 [工具箱] 上的 [Border] 控制項，然後在 GridRoot 內繪製框線。自動調整新 Border 元素的大小，方法是在 [物件與時間軸] 下以滑鼠右鍵按一下該元素，指向 [自動調整大小]，然後按一下 [填滿]。

10. 在 [物件與時間軸] 下的新 Border 元素仍為選取狀態時，將 [屬性] 面板中 [外觀] 下的 [CornerRadius] 屬性變更為 4,4,4,4。這樣會使框線變成圓角。

11. 以滑鼠右鍵按一下 [物件與時間軸] 下的 [Thumb] 元素，指向 [編輯控制項組件 (範本)]，然後按一下 [編輯複本]。在 ScrollBarStyle 的編輯範圍中，按一下 [Rectangle] 元素，然後將 [Fill] 屬性變更為深灰色的 [單色筆刷] ，並將左右兩邊的 [Margin] 屬性設為 2。

12. 測試您的應用程式 (F5) 以查看效果。

請參閱

概念

SimpleScrollBar