SimpleComboBox 和 SimpleComboBoxItem

此页仅适用于 WPF 项目

组合框是一种下拉列表形式的项目控件。在 Microsoft Expression Blend 中,可以通过双击组合框并在其中绘制元素(如 SimpleComboBoxItem),从而在组合框中放入内容。或者,可以在“对象和时间线”下右键单击组合框,然后单击“添加 SimpleComboBoxItem”以向集合中添加单个项目,或者单击“将 ItemsSource 绑定到数据”以从数据源生成“ComboBoxItem”元素的集合。若要在美工板上查看展开的组合框,可以在“对象和时间线”下右键单击相应的组合框或组合框项,然后单击“展开 ComboBox”。

添加两项之后的 SimpleComboBox 控件的美工板视图

Cc295332.25309636-8547-4686-a578-9aa914190f01(zh-cn,Expression.10).png

控件模板的分类详解

SimpleComboBox 控件模板由下列项组成:

  • 网格面板:用于在组合框中存放多个子元素。同时,使用网格也是为了便于应用程序用户界面 (UI) 的设计人员向模板中添加更多元素。

  • 名为“ContentSite”的 ContentPresenter 元素:该元素包含在网格中,用于显示选定项。

  • 名为“PART_EditableTextBox”的文本框:该文本框包含在网格中,可让用户编辑组合框中的文本。因为类使用名称 PART_EditableTextBox 来查找该文本框,所以不应更改此名称。默认情况下,文本框处于折叠状态,并且在应用此控件模板的组合框的“IsEditable”设置为“True”时才可见。

  • 弹出切换按钮控件:用于创建组合框的展开部分。弹出控件知道如何相对于其他控件进行定位,并呈现在其他所有内容之前。此控件也支持一些内置动画。

  • 包含在弹出控件中的网格控件:其中包含一个 ScrollViewer,可用于滚动项目列表。ScrollViewer 中的 StackPanel 用于定位每一项。StackPanel 的“IsItemsHost”属性设置为“True”,以便组合框控件知道如何在 StackPanel 中定位子元素。如果希望更改项目的显示方式,可在“对象和时间线”下右键单击下拉网格,再为“更改布局类型”选择不同的面板(如“UniformGrid”),以替换此版式面板。

SimpleComboBoxItem 控件模板由下列项组成:

  • 网格面板:用于在组合框项中存放多个子元素。同时,使用网格也是为了便于设计人员向模板中添加更多元素。

  • Border 元素:使用此元素是因为它包含“BorderThickness”属性,而该属性可以用模板绑定到应用此模板的按钮控件的“BorderThickness”属性。

  • ContentPresenter 元素:此元素包含在 Grid 元素中,并且自动绑定到应用此模板的项目控件的“Content”属性。

    对象视图:SimpleComboBox 控件(左图)和 SimpleComboBoxItem 控件(右图)的基本部件(模板)

    Cc295332.e3201103-2125-43d3-b077-6aae64f53947(zh-cn,Expression.10).pngCc295332.4532cb8d-690e-49f7-9c8d-cc2fcb0109ae(zh-cn,Expression.10).png

Cc295332.7e183f1f-37d8-4dcb-980c-19a5d61ca087(zh-cn,Expression.10).gif返回页首

使用的属性触发器

控件模板中的属性触发器可用于使控件响应属性改变。可以在“交互”面板中的“触发器”下单击各项,以查看在激活触发器时更改的属性。例如,在组合框的模板中,当“HasItems”属性为“False”时,DropDownBorder 元素的最小高度将设置为 95,以便在单击组合框时显示空的下拉窗口。如果将最小高度设置为 0,将显示非常小的下拉窗口。在组合框项的模板中,当“IsHighlighted”属性为“True”时,Border 元素的“Background”属性将改变,以指示选定了组合框中的哪一项。

Cc295332.7e183f1f-37d8-4dcb-980c-19a5d61ca087(zh-cn,Expression.10).gif返回页首

使用的画笔

SimpleComboBox 和 SimpleComboBoxItem 模板使用 SimpleStyles.xaml 资源字典中的下列画笔资源:

  • 使用“WindowBackgroundBrush”设置 DropDownBorder 元素的“Background”属性。

  • 使用“SolidBorderBrush”设置 DropDownBorder 元素的“BorderBrush”属性。

  • 在“IsEnabled”为“False”时,使用“DisabledForegroundBrush”设置“Foreground”属性。

  • 如果 SimpleComboBox 中填充了使用 SimpleComboBoxItem 模板的项,则在选定某一项时将使用“SelectedBackgroundBrush”设置该项的“Background”属性,并在“IsEnabled”为“False”时使用“DisabledForegroundBrush”设置“Foreground”属性。

Cc295332.7e183f1f-37d8-4dcb-980c-19a5d61ca087(zh-cn,Expression.10).gif返回页首

最佳实用技巧和设计准则

  • 如果希望设计人员能够向控件中添加更多可视元素,通常可将网格控件用作模板的根元素。Expression Blend 会查找网格控件等版式面板,并且默认将其激活,从而使添加到美工板上的新元素最终成为该版式面板的子元素。

  • 可以通过将 ToggleButton 的“IsChecked”属性以及弹出控件的“IsOpen”属性绑定到应用此控件模板的组合框的“IsDropDownOpen”属性,来设置组合框的展开状态。如果编辑 ToggleButton 或弹出控件,则务必保留这种模板绑定方式。

  • ToggleButton 元素使用名为“ToggleButtonControlTemplate”的单独模板。若要修改此模板,请右键单击“ToggleButton”元素,指向“编辑控件部件(模板)”,然后单击“编辑模板”或“编辑副本”。

  • 若要编辑 SimpleComboBoxItem 模板,请在“资源”面板中单击“SimpleComboBoxItem”样式旁边的“编辑资源”按钮。在样式的编辑模式下,右键单击“对象和时间线”下的“Style”,指向“编辑控件部件(模板)”,然后单击“编辑模板”或“编辑副本”。如果修改 SimpleComboBoxItem 模板,可能需要保留或修改 IsHighlighted 触发器。

Cc295332.7e183f1f-37d8-4dcb-980c-19a5d61ca087(zh-cn,Expression.10).gif返回页首

另请参见

概念

动手试验:自定义 SimpleComboBox 中 Expander 按钮的外观