动手试验：自定义 SimpleComboBox 中展开器按钮的外观

在 Microsoft Expression Blend 中，通过使用 SimpleComboBox 的 ToggleButton 控件模板，可以轻松地自定义组合框中展开器按钮的外观。

自定义 SimpleComboBox 中的展开器按钮

1. 在 Expression Blend 美工板上绘制 SimpleComboBox 。

   提示：
   “资产”面板的“样式”类别中的“简单样式”下提供了简单样式控件。从列表中选择简单样式控件后，即可在美工板上进行绘制。

2. 在“对象和时间线”面板中右键单击组合框，然后单击“添加 SimpleComboBoxItem”，向组合框中添加一项。

3. 通过重复上一步，再向组合框中添加一项或两项。

4. 在“对象和时间线”面板中右键单击 ComboBox ，指向“编辑模板”，然后单击“编辑当前模板”。如果不希望更改 SimpleStyles.xaml 资源字典，则可以单击“编辑副本”（而不是“编辑当前模板”），以创建新模板并将其保存在文档中。有关创建副本的详细信息，请参阅创建资源。

   提示：
   若要退出模板编辑模式并返回到文档范围，请单击位于“对象和时间线”面板中对象树上方的“返回到范围”。 若要返回到现有模板的模板编辑模式，请在“对象和时间线”面板中，右键单击要编辑其模板的对象，指向“编辑模板”，然后单击“编辑当前模板”。

5. 在控件模板的编辑范围中，展开“对象和时间线”面板中的所有节点。

6. 在“对象和时间线”面板中，右键单击 ToggleButton 对象，指向“编辑模板”，然后执行下列操作之一：

   • 如果在步骤 4 中选择了“编辑当前模板”，此时请单击“编辑当前模板”以编辑存储在 SimpleStyles.xaml 中的 ExpanderToggleButton 控件模板。

   • 如果在步骤 4 中选择了“编辑副本”，此时请单击“编辑副本”以创建 ExpanderToggleButton 控件模板的副本，并将其存储在与 ComboBox 的模板相同的位置。

   展开器按钮的外观在 ExpanderToggleButton 控件模板中设计。请注意，模板中的 Grid 扩展了整个组合框的宽度。这种设计使得无论用户在组合框中单击何处，均能显示下拉列表。

7. 在“对象和时间线”面板中选择 Arrow 对象，以便在美工板上识别该对象。 Arrow 对象是一个 Path 对象，表示 ComboBox 控件的展开器按钮。

   可以使用“路径选择”工具 调整路径上的点，从而修改 Arrow 对象。也可以删除 Arrow 对象，然后使用“工具”面板中的“笔”工具 来创建一个新对象。

   提示：
   若要在美工板上进行放大，可以使用美工板底部的“缩放” 文本框，也可以按住 Ctrl 键并使用鼠标上的滚动按钮。

   提示：
   除了使用“笔”工具绘制路径对象之外，还可以使用从 Microsoft Expression Design 导入的作品资源，或者使用已添加到项目中的图像文件。

8. 单击展开器按钮时显示的变换效果由可以更改 ToggleButton 控件模板中的 Rectangle 对象外观的属性触发器定义。可以向现有触发器添加新的属性更改，以便在单击展开器按钮时旋转 Arrow 对象。在“对象和时间线”面板中选定 Arrow 对象，在“触发器”面板中单击 IsChecked = True ，然后在“属性”面板的“转换”下单击“旋转”选项卡，并在“角度”文本框中键入 180 。

   当用户单击展开器按钮以展开组合框时， Arrow 对象将旋转 180 度，并在再次单击展开器按钮时返回到原始旋转角度。

   提示：
   在“触发器”面板中选定属性触发器后，在 Expression Blend 中任何位置所做的任何编辑都将设置一个要在该触发器条件下更改的值。请确保在进行更改之前选择正确的触发器。如果希望所做的更改能够影响控件模板的默认状态，请单击“触发器”面板中的“默认值”。

9. 测试应用程序 (F5) 以查看效果。

另请参阅

概念

SimpleComboBox 和 SimpleComboBoxItem

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