試試看：自訂 SimpleScrollBar 的外觀

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

自訂 SimpleScrollBar 樣式的外觀

1. 在 Expression Blend 中的畫板上繪製一個 [SimpleScrollBar] 物件。

   秘訣：
   在 [資產] 面板的 [樣式] 類別中，[簡單樣式] 下提供可用的簡單樣式控制項。從清單中選取簡單樣式 (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 控制項範本的複本，並將它儲存在與 SimpleScrollBar 樣式的範本相同的位置。

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

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

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

   • 若您正在編輯主文件，請按一下 [將範圍傳回]。

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

9. 在 [物件與時間軸] 面板中按一下 [GridRoot] 物件，將它啟動。按一下 [工具] 面板中的 [Border] 控制項，然後在 GridRoot 物件內繪製 Border 物件。自動調整新 Border 物件的大小，方法是在 [物件與時間軸] 面板中以滑鼠右鍵按一下該物件，指向 [自動調整大小]，然後按一下 [填滿]。

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

11. 以滑鼠右鍵按一下 [物件與時間軸] 面板中的 [Thumb] 物件，指向 [編輯範本]，然後按一下 [編輯複本]。在 SimpleThumbStyle 樣式的編輯範圍中，按一下 [Rectangle] 物件，然後將 [Fill] 屬性變更為深灰色的 [單色筆刷]，並將左右兩邊的 [Margin] 屬性設為 2。

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

請參閱

概念

SimpleScrollBar