通过

ComboBox 控件样式设置提示

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

可以使用内置的 ComboBox 控件模板创建自定义的 ComboBox 模板。 Popup 控件包含使用户能够从列表中选择一项的 ListBox 控件。默认情况下， ComboBox 控件如下所示：

Ee341409.f2dbcfc2-1ccd-49d5-9de9-6be35c73ad67(zh-cn,Expression.40).png

ComboBox 模板的部件

ComboBox 模板包含以下部件：

Ee341409.69fada84-8d77-4b89-a14c-18fcbd2da5a9(zh-cn,Expression.40).png

部件名称 对象类型

Ee341409.25182a96-9a69-478a-9cfe-5b360e6a9bea(zh-cn,Expression.40).png  ContentPresenter

ContentPresenter

Ee341409.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(zh-cn,Expression.40).png  ContentPresenterBorder

FrameworkElement

Ee341409.f0c1ff71-7814-42ba-806b-7ea92d616e69(zh-cn,Expression.40).png  DropDownToggle

ToggleButton

Ee341409.eb6fad93-f17e-4f62-a926-8c8651862891(zh-cn,Expression.40).png  Popup

Popup
tip note提示：

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

ComboBox 提示

组合框由三部分组成：包含项列表的弹出窗口 (4)、显示当前选定项的区域 (1)，以及用于打开和关闭弹出窗口的切换按钮 (3)。

ContentPresenter 部件

ContentPresenter 部件是必需的，用于显示当前项。如果在模板中的 ContentPresenter 部件内放入一些内容，则在未选定任何项时将显示这些内容。

ContentPresenterBorder 部件

如果 IsHitTestVisible 为 true，则可以单击 ContentPresenterBorder 部件以打开和关闭弹出窗口，而且弹出窗口将位于 ContentPresenterBorder 的左下角 (2)。版式面板对于 ContentPresenterBorder 部件是一个很好的选择。

DropDownToggle 部件是可选的，但可以使用它作为打开和关闭弹出窗口的另一种方式。

Popup 部件是必需的。这是在其中显示各项的部件。 ItemsPresenter 用于指示应在哪里显示各项。 ItemsPresenter 应放入 ScrollViewer 部件内。 Popup 是相对于模板根对象的边界打开的。

ComboBox 控件的状态

默认情况下， ComboBox 控件的状态可以是“CommonStates”状态组中的以下三种状态之一，在修改 ComboBox 模板时，您可以在“状态”面板中查看这些状态：

状态名称 描述

Normal

ComboBox 控件没有交互时的外观。

MouseOver

用户将指针移到 ComboBox 控件上时该控件的外观。

Disabled

在 IsEnabled 属性设置为 False 时， ComboBox 控件的外观。

ComboBox 控件所处的状态可以为“FocusStates”状态组中的以下三种状态之一：

状态名称 描述

Unfocused

控件上没有键盘焦点时 ComboBox 控件的外观。

Focused

ComboBox 控件有键盘焦点并且未展开 ComboBox 时该控件的外观。例如，用户可能会按 Tab 键来循环选择应用程序中的各个对象，直至键盘焦点位于 ComboBox 控件上为止。

FocusedDropDown

ComboBox 控件有键盘焦点并且展开 ComboBox 时该控件的外观。

ComboBox 控件所处的状态可以为“ValidationStates”状态组中的以下三种状态之一：

状态名称 描述

Valid

控件有效时 ComboBox 控件的外观。

InvalidUnfocused

ComboBox 控件无效且没有键盘焦点时的外观。

InvalidFocused

控件无效但有键盘焦点时 ComboBox 控件的外观。
tip note提示：

状态组包含属于同一逻辑类别并且无法同时显示的可视状态。例如，“CommonStates”组包含的状态和用户与输入设备（例如鼠标）的交互相关。一次只能显示状态组中的一种状态，但一个组中的状态可与另一个状态组中的状态同时显示。

当您选择状态时，状态记录功能将启用，并且将为该状态记录您进行的任何更改。若要禁用状态记录功能，请在美工板上单击记录按钮 Ee341409.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(zh-cn,Expression.40).png，或者在“状态”面板中选择“Base”。若要在两个独立状态处于活动状态时修改控件的外观，您可以固定一个状态组中状态的预览，同时修改另一个状态组中的状态。

模板绑定

可以对“Background”、“BorderBrush”、“Foreground”或“BorderThickness”属性进行模板绑定。有关详细信息，请参阅在模板中使用对象属性。

将对象转换为 ComboBox 控件

下图是组合框的一种设计综合 (comp)。

ComboBox

Note注意：

请务必注意，前面的图形尚不是 ComboBox 控件，而是类似于 ComboBox 控件的作品。

本例在以下过程的步骤 2 中使用 XAML 代码。

  1. 打开新的 Microsoft Silverlight 项目。在“代码”视图中，找到以下代码，然后删除结尾斜线标记 (/)。

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

  2. 复制以下代码，然后将它们粘贴到您的新项目中（粘贴到您在步骤 1 中找到的代码之后）。

    <Grid Height="70" Width="120">
<Rectangle 
   x:Name="contentarea" Fill="#FF333333" RadiusX="5" RadiusY="5" 
   Height="20" VerticalAlignment="Top" />
<Rectangle 
   Fill="#FF666666" RadiusX="3" RadiusY="3" HorizontalAlignment="Right" 
   Width="14" Height="18" Margin="0,1,1,0" VerticalAlignment="Top" />
<Path 
   Fill="White" Stretch="Fill" Width="8" Height="5" 
   Data="M6,12 L2,16 L-1,12 L-4,12 L1,17 L3,17 L9,12 z" Margin="0,8,4,0" 
   HorizontalAlignment="Right" VerticalAlignment="Top" />
<Rectangle 
   x:Name="popupbackground" Fill="#FF333333" Stroke="#FF4C4C4C" 
   Margin="0,20,0,0" />
<TextBlock Margin="5,25,0,0" Foreground="White" Text="Lorem"/>
<TextBlock Margin="5,46,0,0" Foreground="White" Text="Ipsum"/>
</Grid>

  3. 在您刚粘贴的代码之后添加一个 Grid 结束标记 (</Grid>)。

  4. 在“对象和时间线”面板中，右键单击“Grid”，然后单击“构成控件”。在“构成控件”对话框中，单击“ComboBox”，然后单击“确定”。

  5. 在“对象和时间线”面板中，按 Ctrl，然后单击两个 TextBlock 项。右键单击任一选定的项，然后单击“剪切”。单击“返回到范围”Ee341409.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(zh-cn,Expression.40).png，然后单击“粘贴”。在“属性”面板的“布局”类别中，在“Width”旁边单击“高级选项”，然后单击“重置”。对“Height”重复该步骤。

  6. 在“对象和时间线”面板中，右键单击“ComboBox”，单击“编辑模板”，然后单击“编辑当前模板”。

  7. 在“对象和时间线”面板中，右键单击 contentarea ，单击“分组”，然后单击“Grid”。

  8. 右键单击“Grid”，单击“构成 ComboBox 的部件”，然后单击“ContentPresenterBorder”。

  9. 在“部件”面板中，双击“ContentPresenter”。在“属性”面板的“布局”类别下，将“Margin”设置为以下值：

    • Left   5

    • Right   5

    • Top   1

    • Bottom   0

  10. 在“对象和时间线”面板中，单击“Rectangle”，按 Ctrl，然后单击“路径”。右键单击所选内容，单击“分组”，然后单击“Grid”。

  11. 在“对象和时间线”面板中，右键单击“Grid”，单击“构成 ComboBox 的部件”，然后单击“DropDownToggle”。单击“确定”。

  12. 右键单击“路径”，然后单击“剪切”。单击“返回到范围”Ee341409.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(zh-cn,Expression.40).png，单击“DropDownToggle”，然后按 Ctrl+V 粘贴内容。

  13. 在“对象和时间线”面板中，选择“Grid”。在“部件”面板中，双击“Popup”。

  14. 在“工具”面板中，双击“Grid”。在“属性”面板的“布局”类别中，在“Width”旁边单击“高级选项”，然后单击“重置”。对“Height”重复该步骤。

  15. 在“对象和时间线”面板中，单击“popupbackground”，然后将它拖到您刚创建的网格上。在“属性”面板的“布局”类别中，在“Width”旁边单击“高级选项”，然后单击“重置”。对“Height”、“HorizontalAlignment”、“VerticalAlignment”和“Margin”重复这样做。

  16. 在“对象和时间线”面板中，将“ScrollViewer”拖到新的网格上。在“属性”面板的“布局”类别中，在“Width”旁边单击“高级选项”，然后单击“重置”。对“Height”、“HorizontalAlignment”、“VerticalAlignment”和“Margin”重复这样做。

  17. 单击“返回到范围”Ee341409.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(zh-cn,Expression.40).png。在“属性”面板的“布局”类别中，将“Height”设置为 20。

  18. 按 Ctrl+Shift+B 生成项目，然后按 F5 测试项目。

有关向其他 ComboBox 对象应用新的 ComboBox 模板的信息，请参阅应用或删除资源。

引用

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

另请参阅

概念

常用 Silverlight 控件的样式提示
SimpleComboBox 和 SimpleComboBoxItem
设置支持模板的控件的样式

Microsoft Corporation 版权所有 ⓒ 2011。保留所有权利。

  • Last updated on