ListBox 控制項樣式提示

您可以使用內建的 ListBox 控制項範本來建立自訂 ListBox 範本。 ListBox 控制項的預設外觀如下：

ListBox 範本的組件

ListBox 控制項有一個組件： ContentElement 組件。此組件為強制組件。

秘訣：
若要檢視範本的組件，請在修改範本時開啟 [組件] 面板。

ListBox 控制項的狀態

根據預設， ListBox 控制項可以處於 [ValidationStates] 狀態群組的下列三種狀態之一：

當您選取狀態時，狀態錄製功能便會開啟，以錄製您對該狀態所做的任何變更。若要關閉狀態錄製功能，請按一下畫板上的錄製按鈕 ，或在 [狀態] 面板中選取 [Base]。

將物件轉換成 ListBox 控制項

下圖是設計人員建立之 ListBox 的詳細設計圖 (comp)：

此範例使用下列程序步驟 2 中的 XAML 程式碼 (對應於上一個圖形)，利用 ListBox 控制項範本來建立自訂密碼方塊。

注意：
請特別注意，前面的圖形還不是 ListBox 控制項，而是可以轉換為 ListBox 控制項的圖案。

1. 開啟新的 Microsoft Silverlight 專案。在 [程式碼] 檢視中，找出下列程式碼，然後刪除結尾的斜線符號 (/)。

   <Grid x:Name="LayoutRoot" Background="White"/>
   

2. 複製下列程式碼，然後將它貼到新專案中，接在步驟 1 找到的程式碼後面。

   <Grid x:Name="root" Height="146" Width="146">
      <Rectangle Fill="#FF333333" RadiusX="3" RadiusY="3" />
      <TextBlock Margin="5,5,0,0" Foreground="White" Text="Lorem"/>
      <TextBlock Margin="5,26,0,0" Foreground="White" Text="Ipsum"/>
      <Grid x:Name="verticalscrollbar" Width="17" Height="146" 
          HorizontalAlignment="Right" >
         <Rectangle x:Name="track" Fill="#FF3D3D3D" StrokeThickness="0" />
      <Path x:Name="smalldecrease" Fill="Gray" Stretch="Fill" Width="7" Height="7"
         Data="M200,312 L204,312 L200,305 z" Margin="0,5,0,0" 
         VerticalAlignment="Top"/>
      <Rectangle 
         x:Name="thumb" Fill="Gray" RadiusX="3" RadiusY="3" Height="61" Width="7" 
         Margin="0,24,0,0" VerticalAlignment="Top"/>
      <Path x:Name="smallincrease" Fill="Gray" Stretch="Fill" Width="7" Height="7"
         Data="M200,305 L200,312 L204,305 z" Margin="0,0,0,5" 
         VerticalAlignment="Bottom" />
      </Grid>
   </Grid>
   

3. 在剛貼上的程式碼後面新增結尾 Grid 標籤 (</Grid>)。

4. 在 [物件與時間軸] 面板中，以滑鼠右鍵按一下 [root]，然後按一下 [變成控制項]。在 [變成控制項] 對話方塊中，按一下 [ListBox]，然後按一下 [確定]。

5. 在 [物件與時間軸] 面板中，以滑鼠右鍵按一下 [ScrollViewer]，然後按一下 [刪除]。

6. 按住 SHIFT 鍵，並選取兩個 TextBlock 元素。按一下滑鼠右鍵，然後按一下 [剪下]。

7. 按一下 [將範圍傳回]** **，然後按 CTRL+V 四次，建立八個新的 [TextBlock] 元素。按下 SHIFT 鍵，然後選取每個 [TextBlock] 元素。

8. 在 [屬性] 面板的 [版面配置] 類別中，按一下 [Width] 右側的 [進階選項]，然後按一下 [重設]。請針對 [Height] 重複相同的動作。

9. 在 [物件與時間軸] 面板中，以滑鼠右鍵按一下 [ListBox]，按一下 [編輯範本]，然後按一下 [編輯目前的項目]。

10. 在 [物件與時間軸] 面板中，以滑鼠右鍵按一下 [root]，按一下 [變成 ListBox 的組件]，然後按一下 [ScrollViewer]。按一下 [確定]。

11. 在 [物件與時間軸] 面板中，以滑鼠右鍵按一下 [ContentPresenter]，然後按一下 [刪除]。

12. 在 [物件與時間軸] 面板中，按一下 [root]。在 [組件] 面板中，按兩下 [ScrollContentPresenter]。

13. 在 [物件與時間軸] 面板中，以滑鼠右鍵按一下 [VerticalScrollBar]，按一下 [變成 ScrollViewer 的組件]，然後按一下 [VerticalScrollBar]。按一下 [確定]。

    若要設定 VerticalScrollBar 的樣式，請參閱 ScrollBar 控制項樣式提示。

14. 按一下 [將範圍傳回] 回到 ScrollViewer 範本。

15. 按一下控制項左側的藍色尺規並將尺規拖曳到捲軸右側，將 root 分割成兩欄，如下圖所示：

    

16. 針對右欄，按一下 [星號]** ** 兩次。[自動] 圖示  隨即出現。

17. 在 [屬性] 面板的 [版面配置] 類別中，按一下 [顯示進階屬性]。按一下 [MinWidth] 右側的 [進階選項]，然後按一下 [重設]。

18. 在 [物件與時間軸] 面板中，按一下 [ScrollContentPresenter]。在 [屬性] 面板的 [版面配置] 類別中，按一下 [ColumnSpan] 右側的 [進階選項]，然後按一下 [重設]。

19. 在 [物件與時間軸] 面板中選取 [VerticalScrollBar] 後，切換到 [分割] 檢視。複製下列程式碼並貼到以 <ScrollBar x:Name="VerticalScrollBar" 開頭的 XAML 行。

    Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" 
    Maximum="{TemplateBinding ScrollableHeight}" 
    Value="{TemplateBinding VerticalOffset}" 
    ViewportSize="{TemplateBinding ViewportHeight}"
    

    注意：
    您也可以使用自訂運算式設定這些屬性。

20. 按一下 [將範圍傳回] 。在 [物件與時間軸] 面板中，按一下 [ScrollViewer]。在 [資產] 面板依序按一下 [控制項]、[全部] 和 [ItemsPresenter]，以新增 [ItemsPresenter]。在畫板上的 ListBox 左欄中繪製 [ItemsPresenter]。

21. 在 [物件與時間軸] 面板中選取 [ItemsPresenter] 後，在 [屬性] 面板的 [版面配置] 類別中，按一下 [Width] 屬性右側的 [進階選項]，然後按一下 [重設]。請針對 [Height] 重複相同的動作。

22. 建置專案 (CTRL+SHIFT+B)，然後按 F5 來測試您的專案。

    重要訊息：
    除非按照步驟 13 所述，使用 ScrollBar 控制項樣式提示 來設定 ScrollBar 的樣式，否則 ListBox 將無法依預期運作。

參照

您可以在 MSDN 上的 Silverlight Control Gallery  (Silverlight 控制項陳列庫) 找到有關 Silverlight  ListBox 控制項之屬性與事件的詳細資訊。

另請參閱

工作

使用 DataGrid 控制項
使用 TreeView 控制項

概念

一般 Silverlight 控制項的樣式提示
SimpleListBox 及 SimpleListBoxItem
設定支援範本之控制項的樣式
指定顯示資料之控制項的樣式

Copyright © 2011 by Microsoft Corporation. All rights reserved.