試試看:變更 SimpleListBox 中選取之項目的外觀

本頁僅適用 WPF 專案

您可以在 Microsoft Expression Blend 中,使用 SimpleListBoxItem 控制項範本輕鬆地自訂在清單方塊中所選取之項目的外觀。

變更 SimpleListBox 中選取之項目的外觀

  1. 在 Expression Blend 的畫板上繪製一個 [SimpleListButton]。

    Cc295254.alert_tip(zh-tw,Expression.10).gif秘訣:

    在 [資產庫] Cc295254.0224cabd-5da1-4e01-bddd-4a647401a098(zh-tw,Expression.10).png 中,可以從 [控制項] 索引標籤的 [簡單樣式] 類別中取得簡單樣式 (Simple Styles) 控制項。從清單中選取簡單樣式 (Simple Styles) 控制項之後,就可以在畫板上繪製該控制項。

  2. 以滑鼠右鍵按一下 [物件與時間軸] 下的清單方塊,然後按一下 [新增 SimpleListBoxItem],將項目新增至清單方塊中。

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

    Cc295254.alert_tip(zh-tw,Expression.10).gif秘訣:

    若要結束範本編輯模式並返回您的文件範圍,請在 [互動] 面板中的元素樹狀目錄上方,按一下 [選定範圍] 按鈕 Cc295254.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(zh-tw,Expression.10).png

    若要返回現有範本的範本編輯模式,請在 [物件與時間軸] 下,以滑鼠右鍵按一下要編輯範本的元素,指向 [編輯控制項組件 (範本)],然後按一下 [編輯範本]。

  4. 在 [互動] 面板的 [觸發程序] 下,按一下 [IsSelected = True]。根據預設,當您選取某個項目時,框線背景色彩就會變更,如同在 [觸發程序] 面板下的 [使用時的屬性] 下看到的一樣。您可以按一下 [物件與時間軸] 下的 [框線],然後在 [屬性] 面板的 [筆刷] 下修改 [Background] 屬性,將背景變更為另一種色彩。

    Cc295254.alert_tip(zh-tw,Expression.10).gif秘訣:

    當 [互動] 面板的 [觸發程序] 下已選取某個屬性觸發程序時,您在 Expression Blend 中任何位置所做的編輯動作,都會在該觸發程序條件上設定一個需要變更的值。在進行任何變更之前,請確定已選取正確的觸發程序。若要讓變更影響控制項範本的預設狀態,請按一下 [觸發程序] 面板下的 [預設]。

  5. 若要在修改過範本的清單方塊中新增更多項目,可以按一下 [選定範圍] 按鈕 Cc295254.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(zh-tw,Expression.10).png,返回文件的編輯模式,接著按兩下清單方塊元素使其成為使用中狀態,然後從 [資產庫] 的 [本機樣式] 索引標籤,新增您的自訂樣式。

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

使用 ItemContainerStyle 範本來變更所選取之項目的外觀

  1. 在 Expression Blend 的畫板上繪製一個 [SimpleListButton]。

    Cc295254.alert_tip(zh-tw,Expression.10).gif秘訣:

    在 [資產庫] Cc295254.0224cabd-5da1-4e01-bddd-4a647401a098(zh-tw,Expression.10).png 中,可以從 [控制項] 索引標籤的 [簡單樣式] 類別中取得簡單樣式 (Simple Styles) 控制項。從清單中選取簡單樣式 (Simple Styles) 控制項之後,就可以在畫板上繪製該控制項。

  2. 在 [物件與時間軸] 下,按兩下清單方塊加以選取,然後在畫板上的清單方塊中繪製 [矩形] Cc295254.ae750268-92e8-403a-9e07-b662da4e9e1e(zh-tw,Expression.10).png 或其他控制項,即可在清單方塊中新增幾個項目。或是在清單方塊元素上按一下滑鼠右鍵,然後按一下 [新增 SimpleListBoxItem]。

    Cc295254.alert_tip(zh-tw,Expression.10).gif秘訣:

    如果您要嘗試以資料繫結自動產生清單方塊的項目,可以使用本使用者指南中之試試看: 建立 RSS 新聞閱讀器的程序。

  3. 按一下 [物件與時間軸] 下的 [ListBox] 物件。在 [物件] 功能表上,依序指向 [編輯其他樣式]、[編輯 ItemContainerStyle],然後按一下 [編輯複本]。

    [建立樣式資源] 視窗會隨即出現。若要進一步瞭解 [建立樣式資源] 視窗中的選項,請參閱建立資源。為了配合此程序的目的,請接受預設值,然後按一下 [確定]。

    Expression Blend 會進入 ListBoxItem 樣式的編輯模式。

  4. 範本包裝在樣式元素中,因此,若要編輯 ListBoxItem 的範本,請以滑鼠右鍵按一下 [物件與時間軸] 下的 [樣式] 元素,接著指向 [編輯控制項組件 (範本)],然後按一下 [編輯範本]。

    Cc295254.alert_note(zh-tw,Expression.10).gif注意事項:

    此處要按一下 [編輯範本],而非 [編輯複本],因為控制項範本包裝在樣式元素中,且您在步驟 3 已按一下 [編輯複本] 建立樣式的複本。

    Expression Blend 會進入清單方塊的每一個項目所使用之範本的 ListBoxItemStyleTemplate 編輯範圍。此範本中有一個名稱為 Bd 的 Border 元素、一個 ContentPresenter 元素以及兩個 IsSelected 狀態的觸發程序。

  5. 在 [互動] 面板的 [觸發程序] 下,按一下其中一個 [IsSelected] 觸發程序以進入該觸發程序的錄製模式,然後變更 [Bd] 元素的屬性。

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

請參閱

概念

SimpleListBox 及 SimpleListBoxItem