共用方式為

試試看：自訂 SimpleScrollBar 的外觀

  • 發行項

本頁僅適用 WPF 專案

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

自訂 SimpleScrollBar 樣式的外觀

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

    tip note秘訣：

    在 [資產] 面板的 [樣式] 類別中，[簡單樣式] 下提供可用的簡單樣式控制項。從清單中選取簡單樣式 (Simple Styles) 控制項之後，就可以在畫板上繪製該控制項。

  2. 以滑鼠右鍵按一下 [物件與時間軸] 面板中的捲軸，指向 [編輯範本]，然後按一下 [編輯目前的項目]。若不想變更 SimpleStyles.xaml 資源字典，您可以按一下 [編輯複本] 代替 [編輯目前的項目] 來建立新範本並儲存至文件中。

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

    tip note秘訣：

    若要結束範本編輯模式並返回您的文件範圍，請在 [物件與時間軸] 面板中的物件樹狀目錄上方，按一下 [將範圍傳回] Cc294792.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(zh-tw,Expression.40).png。

    若要返回現有範本的範本編輯模式，請在 [物件與時間軸] 面板中，以滑鼠右鍵按一下要編輯範本的物件，指向 [編輯範本]，然後按一下 [編輯目前的項目]。

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

  4. 在 [物件與時間軸] 面板中，按一下 IncreaseArrow 路徑物件，然後將 Stroke 和 Fill 屬性設為白色的 [單色筆刷] Cc294792.3a66ec96-47bb-47fc-8876-6b9456feec3a(zh-tw,Expression.40).png。對於 Stroke 屬性，您必須先按一下 [進階選項] Cc294792.12e06962-5d8a-480d-a837-e06b84c545bb(zh-tw,Expression.40).png，再按一下 [重設]，才能移除繫結。

  5. 以滑鼠右鍵按一下 [物件與時間軸] 面板中的 IncreaseRepeat 物件，指向 [編輯範本]，然後執行下列一項動作：

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

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

  6. 在 SimpleRepeatButton 樣式的編輯範圍中，於 [觸發程序] 面板中刪除名為 IsMouseOver = True 和 IsPressed = True 的事件觸發程序，方法是選取這兩個觸發程序，然後按一下 [刪除觸發程序] Cc294792.d31907a6-867b-4e16-b860-f07c9531fbd7(zh-tw,Expression.40).png。

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

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

    • 若您正在編輯主文件，請按一下 [將範圍傳回] Cc294792.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(zh-tw,Expression.40).png。

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

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

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

  11. 以滑鼠右鍵按一下 [物件與時間軸] 面板中的 [Thumb] 物件，指向 [編輯範本]，然後按一下 [編輯複本]。在 SimpleThumbStyle 樣式的編輯範圍中，按一下 Rectangle 物件，然後將 Fill 屬性變更為深灰色的 [單色筆刷] Cc294792.3a66ec96-47bb-47fc-8876-6b9456feec3a(zh-tw,Expression.40).png，並將左右兩邊的 Margin 屬性設為 2 。

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

另請參閱

概念

SimpleScrollBar

Copyright © 2011 by Microsoft Corporation. All rights reserved.