动手试验:更改 SimpleListBox 中选定项的外观

此页仅适用于 WPF 项目

在 Microsoft Expression Blend 中,可以使用 SimpleListBoxItem 控件模板,轻松自定义列表框中选定项的外观。

更改 SimpleListBox 中选定项的外观

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

    Cc295254.alert_tip(zh-cn,Expression.10).gif提示:

    “资源库”Cc295254.0224cabd-5da1-4e01-bddd-4a647401a098(zh-cn,Expression.10).png 中的“控件”选项卡的“简单样式”类别中提供了简单样式控件。从列表中选择简单样式控件后,即可在美工板上进行绘制。

  2. 在“对象和时间线”下右键单击列表框,然后单击“添加 SimpleListBoxItem”,向列表框中添加一项。

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

    Cc295254.alert_tip(zh-cn,Expression.10).gif提示:

    若要退出模板编辑模式并返回到文档范围:请单击位于“交互”面板中的元素树上方的“范围上移”Cc295254.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(zh-cn,Expression.10).png 按钮。

    若要返回到现有模板的模板编辑模式:请在“对象和时间线”下,右键单击要编辑其模板的元素,指向“编辑控件部件(模板)”,然后单击“编辑模板”。

  4. 在“交互”面板的“触发器”下,单击“IsSelected = True”。默认情况下,当选定某一项时,边框背景颜色将会更改,正如“触发器”的“活动时的属性”下显示的一样。在“对象和时间线”下单击“Border”,然后在“属性”面板的“画笔”下修改“Background”属性,可将背景改为不同的颜色。

    Cc295254.alert_tip(zh-cn,Expression.10).gif提示:

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

  5. 若要向使用刚才修改的模板的列表框中添加更多项,可以单击“范围上移”Cc295254.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(zh-cn,Expression.10).png 按钮返回到文档的编辑范围,双击列表框元素将其激活,然后从“资源库”的“本地样式”选项卡中添加自定义样式。

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

使用 ItemContainerStyle 模板更改选定项的外观

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

    Cc295254.alert_tip(zh-cn,Expression.10).gif提示:

    “资源库”Cc295254.0224cabd-5da1-4e01-bddd-4a647401a098(zh-cn,Expression.10).png 中的“控件”选项卡的“简单样式”类别中提供了简单样式控件。从列表中选择简单样式控件后,即可在美工板上进行绘制。

  2. 在“对象和时间线”下双击列表框将其选定,然后在美工板上的列表框中绘制“Rectangle”Cc295254.ae750268-92e8-403a-9e07-b662da4e9e1e(zh-cn,Expression.10).png 或其他控件,从而向列表框中添加一些项。或者,可以右键单击列表框元素,然后单击“添加 SimpleListBoxItem”。

    Cc295254.alert_tip(zh-cn,Expression.10).gif提示:

    如果希望尝试通过数据绑定自动生成列表框的项,则可以按照《用户指南》的动手试验:创建 RSS 新闻阅读器中的过程执行操作。

  3. 在“对象和时间线”下单击“ListBox”对象。在“对象”菜单上,指向“编辑其他样式”,指向“编辑 ItemContainerStyle”,然后单击“编辑副本”。

    此时,将显示“创建样式资源”窗口。若要了解有关“创建样式资源”窗口中的选项的详细信息,请参阅创建资源。在此过程中,请接受默认设置并单击“确定”。

    Expression Blend 将进入 ListBoxItem 样式的编辑模式。

  4. 模板封装在样式元素中,因此,若要编辑 ListBoxItem 的模板,请在“对象和时间线”下右键单击“Style”元素,指向“编辑控件部件(模板)”,然后单击“编辑模板”。

    Cc295254.alert_note(zh-cn,Expression.10).gif说明:

    在此,请单击“编辑模板”而不是“编辑副本”,因为控件模板封装在样式元素中,并且已在步骤 3 中单击“编辑副本”来创建样式的副本。

    Expression Blend 将进入 ListBoxItemStyleTemplate(列表框中的每一项均使用此模板)的编辑范围。此模板中包含一个名为“Bd”的 Border 元素、一个 ContentPresenter 元素和两个用于 IsSelected 状态的触发器。

  5. 在“交互”面板中的“触发器”下,单击其中一个“IsSelected”触发器以进入该触发器的记录模式,然后更改“Bd”元素的属性。

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

另请参见

概念

SimpleListBox 和 SimpleListBoxItem