ListBox 控件样式设置提示

项目
10/11/2017

Ee371162.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(zh-cn,Expression.40).png

可以使用内置的 ListBox 控件模板创建自定义的 ListBox 模板。默认情况下， ListBox 控件如下所示：

Ee371162.3cc2d3af-6781-4937-b068-c3448a56406d(zh-cn,Expression.40).png

ListBox 模板的部件

ListBox 控件具有一个部件： ContentElement 部件。此部件是必需的。

提示：
若要查看模板的部件，请在修改模板的同时打开“部件”面板。

ListBox 控件的状态

默认情况下， ListBox 控件所处的状态可以为“ValidationStates”状态组中的以下三种状态之一：

状态名称	描述
Valid	控件有效时 ListBox 控件的外观。
InvalidUnfocused	控件无效并且没有键盘焦点时 ListBox 控件的外观。
InvalidFocused	控件无效但有键盘焦点时 ListBox 控件的外观。

当您选择状态时，状态记录功能将启用，并且将为该状态记录您进行的任何更改。若要禁用状态记录功能，请在美工板上单击记录按钮 Ee371162.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(zh-cn,Expression.40).png ，或者在“状态”面板中选择“Base”。

将对象转换为 ListBox 控件

下图是设计人员创建的 ListBox 的设计综合 (comp)：

ListBox

本例在以下过程的步骤 2 中使用 XAML 代码，此过程对应前面的图形，通过使用 ListBox 控件模板来创建自定义密码框。

注意：
请务必注意，前面的图形尚不是 ListBox 控件，而是可转换为 ListBox 控件的作品。

打开新的 Microsoft Silverlight 项目。在“代码”视图中，找到以下代码，然后删除结尾斜线标记 (/)。
```
<Grid x:Name="LayoutRoot" Background="White"/>
```

复制以下代码，然后将它们粘贴到您的新项目中（粘贴到您在步骤 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>

在您刚粘贴的代码之后添加一个 Grid 结束标记 (</Grid>)。
在“对象和时间线”面板中，右键单击“root”，然后单击“构成控件”。在“构成控件”对话框中，单击“ListBox”，然后单击“确定”。
在“对象和时间线”面板中，右键单击“ScrollViewer”，然后单击“删除”。
按 Shift 并选择两个 TextBlock 元素。单击鼠标右键，然后单击“剪切”。
单击“返回到范围”，然后按 Ctrl+V 四次以创建八个新的“TextBlock”元素。按 Shift，然后选择每个“TextBlock”元素。
在“属性”面板的“布局”类别中，单击“Width”框右边的“高级选项”，然后单击“重置”。对“Height”重复该步骤。
在“对象和时间线”面板中，右键单击“ListBox”，单击“编辑模板”，然后单击“编辑当前模板”。
在“对象和时间线”面板中，右键单击“root”，单击“构成 ListBox 的部件”，然后单击“ScrollViewer”。单击“确定”。
在“对象和时间线”面板中，右键单击“ContentPresenter”，然后单击“删除”。
在“对象和时间线”面板中，单击“root”。在“部件”面板中，双击“ScrollContentPresenter”。
在“对象和时间线”面板中，右键单击“VerticalScrollBar”，单击“构成 ScrollViewer 的部件”，然后单击“VerticalScrollBar”。单击“确定”。

若要设置 VerticalScrollBar 的样式，请参阅 ScrollBar 控件样式提示。
单击“返回到范围” 以返回到 ScrollViewer 模板。
通过单击控件左侧的蓝色标尺，同时将标尺向右拖到滚动条旁边，将 root 划分为两列，如下图中所示：
对于右侧的列，单击“星形” 两次。“自动”图标将会出现。
在“属性”面板的“布局”类别中，单击“显示高级属性”。在“MinWidth”右侧单击“高级选项”，然后单击“重置”。
在“对象和时间线”面板中，单击“ScrollContentPresenter”。在“属性”面板的“布局”类别中，在“ColumnSpan”右侧单击“高级选项”，然后单击“重置”。
在“对象和时间线”面板中的“VerticalScrollBar”处于选定状态的情况下，切换到“拆分”视图。将以下代码复制然后粘贴到以 <ScrollBar x:Name="VerticalScrollBar" 开头的 XAML 行中。
```
Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" 
Maximum="{TemplateBinding ScrollableHeight}" 
Value="{TemplateBinding VerticalOffset}" 
ViewportSize="{TemplateBinding ViewportHeight}"
```
注意：

也可以使用自定义表达式设置这些属性。
单击“返回到范围”。在“对象和时间线”面板中，单击“ScrollViewer”。通过依次单击“控件”、“全部”，然后单击“ItemsPresenter”，从“资产”面板中添加“ItemsPresenter”。在美工板上 ListBox 的左侧列中绘制“ItemsPresenter”。
在“对象和时间线”面板中的“ItemsPresenter”处于选定状态的情况下，在“属性”面板的“布局”类别中，单击“Width”属性右侧的“高级选项”，然后单击“重置”。对“Height”重复该步骤。
按 Ctrl+Shift+B 生成项目，然后按 F5 测试项目。

重要须知：

除非按照步骤 13 所述使用 ScrollBar 控件样式提示设置了 ScrollBar 的样式，否则 ListBox 将不会按预期方式工作。

注意：
也可以使用自定义表达式设置这些属性。

重要须知：
除非按照步骤 13 所述使用 ScrollBar 控件样式提示设置了 ScrollBar 的样式，否则 ListBox 将不会按预期方式工作。

引用

您可以在 MSDN 上的 Silverlight Control Gallery Ee371162.xtlink_newWindow(zh-cn,Expression.40).png （Silverlight 控件库）中找到关于 Silverlight ListBox 控件的属性和事件的详细信息。

另请参阅

任务

使用 DataGrid 控件
 使用 TreeView 控件

概念

常用 Silverlight 控件的样式提示
 SimpleListBox 和 SimpleListBoxItem
设置支持模板的控件的样式
 设置显示数据的控件的样式

通过

ListBox 控件样式设置提示

ListBox 模板的部件

ListBox 控件的状态

将对象转换为 ListBox 控件

引用

另请参阅

任务

概念

其他资源