內容 索引 搜尋
 

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

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

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

  1. 在 Expression Blend 的畫板上繪製一個 SimpleListButton。
    提示 在 [資產庫] [資產庫] 按鈕 中，您可以從 [控制項] 索引標籤的 [Simple Styles] 類別中取得簡單樣式 (Simple Styles) 控制項。從清單中選取簡單樣式 (Simple Styles) 控制項之後，就可以在畫板上繪製該控制項。
  2. 以滑鼠右鍵按一下 [物件與時間軸] 下的清單方塊，然後按一下 [新增 SimpleListBoxItem]，將項目新增至清單方塊中。
  3. 以滑鼠右鍵按一下 [物件與時間軸] 下的其中一個清單方塊項目，指向 [編輯控制項組件 (範本)]，然後按一下 [編輯範本]。如果您不想變更 SimpleStyles.xaml 資源字典，您可以按一下 [編輯複本] 代替 [編輯範本] 來建立新範本並儲存至文件中。如需建立複本的詳細資訊，請參閱建立資源。
    提示 若要結束範本編輯模式並返回您的文件範圍，請在 [互動] 面板中的元素樹狀目錄上方按一下 [選定範圍] 按鈕 [選定範圍] 按鈕。

    若要返回現有範本的範本編輯模式，請在 [物件與時間軸] 下，以滑鼠右鍵按一下您要編輯其範本的元素，指向 [編輯控制項組件 (範本)]，然後按一下 [編輯範本]。
  4. 在 [互動] 面板的 [觸發程序] 下按一下 IsSelected = True。根據預設，當您選取某個項目時，框線背景色彩就會變更，如同在 [觸發程序] 面板下的 [使用時的屬性] 下看到的一樣。您可以按一下 [物件與時間軸] 下的 [框線]，然後在 [屬性] 面板的 [筆刷] 下修改 [Background] 屬性，將背景變更為另一種色彩。
    提示 當 [互動] 面板的 [觸發程序] 下已選取某個屬性觸發程序時，您在 Expression Blend 中任何位置所做的編輯動作，都會在該觸發程序條件上設定一個需要變更的值。在進行任何變更之前，請確定已選取正確的觸發程序。如果想要讓變更影響控制項範本的預設狀態，請按一下 [觸發程序] 面板下的 [預設]。
  5. 若要在修改過範本的清單方塊中新增更多項目，可以按一下 [選定範圍] [選定範圍] 按鈕 返回文件的編輯模式，接著按兩下清單方塊元素使其成為使用中狀態，然後從 [資產庫] [資產庫] 按鈕 的 [本機樣式] 索引標籤新增您的自訂樣式。
  6. 測試您的應用程式 (F5) 以查看效果。

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

您也可以使用項目清單方塊的 ItemContainerStyle 範本，變更所選取之非 ListBoxItem 項目的外觀。例如，如果您要在清單方塊中繪製一個矩形，或是在清單方塊的 ItemsSource 屬性上使用資料繫結來產生項目，您可以使用 ItemContainerStyle 範本設定這些項目的樣式。

  1. 在 Expression Blend 的畫板上繪製一個 SimpleListButton。
    提示 在 [資產庫] [資產庫] 按鈕 中，您可以從 [控制項] 索引標籤的 [Simple Styles] 類別中取得簡單樣式 (Simple Styles) 控制項。從清單中選取簡單樣式 (Simple Styles) 控制項之後，就可以在畫板上繪製該控制項。
  2. 在 [物件與時間軸] 下按兩下清單方塊來加以選取，然後在畫板上的清單方塊中繪製 [矩形] [矩形] 工具 或其他控制項，即可在清單方塊中新增幾個項目。或者，您也可以用滑鼠右鍵按一下清單方塊元素，然後按一下 [新增 SimpleListBoxItem]。
    提示 如果您要嘗試以資料繫結來自動產生清單方塊的項目，可以使用本使用者指南中的建立 RSS 新聞閱讀器中的程序。
  3. 按一下 [物件與時間軸] 下的 ListBox 物件。在 [物件] 功能表上，依序指向 [編輯其他樣式]、[編輯 ItemContainerStyle]，然後按一下 [編輯複本]。
    此時會出現 [建立樣式資源] 視窗。若要進一步瞭解 [建立樣式資源] 視窗中的選項，請參閱建立資源。為了配合此程序的目的，請接受預設值，然後按一下 [確定]。
    Expression Blend 會進入 ListBoxItem 樣式的編輯模式。
  4. 範本是包裝在樣式元素中，因此，若要編輯 ListBoxItem 的範本，請以滑鼠右鍵按一下 [物件與時間軸] 下的 [樣式] 元素，接著指向 [編輯控制項組件 (範本)]，然後按一下 [編輯範本]。
    附註 在這裡是按一下 [編輯範本]，不是 [編輯複本]，因為控制項範本是包裝在樣式元素中，且您在步驟 3 已按一下 [編輯複本] 來建立樣式的複本。
    Expression Blend 會進入清單方塊的每一個項目所使用之範本的 ListBoxItemStyleTemplate 編輯範圍。此範本中有一個名稱為 Bd 的 Border 元素、一個 ContentPresenter 元素以及兩個 IsSelected 狀態的觸發程序。
  5. 在 [互動] 面板的 [觸發程序] 下，按一下其中一個 IsSelected 觸發程序來進入該觸發程序的錄製模式，然後變更 Bd 元素的屬性。
  6. 測試您的應用程式 (F5) 以查看效果。