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

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

自定义 SimpleComboBox 中的 Expander 按钮

1. 在 Expression Blend 中的美工板上绘制“SimpleComboBox”。

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

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

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

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

   提示：
   若要退出模板编辑模式并返回到文档范围：请单击位于“交互”面板中的元素树上方的“范围上移” 按钮。 若要返回到现有模板的模板编辑模式：请在“对象和时间线”下，右键单击要编辑其模板的元素，指向“编辑控件部件(模板)”，然后单击“编辑模板”。

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

6. 在“对象和时间线”下，右键单击“ToggleButton”元素，指向“编辑控件部件(模板)”，然后执行下列操作之一：

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

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

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

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

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

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

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

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

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

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

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

另请参见

概念

SimpleComboBox 和 SimpleComboBoxItem