创建项控件

此页适用于 WPF 和 Silverlight 2

项控件 具有一个“Items”属性,其中包含一个子元素集合。可以向项集合中添加任意类型的子元素,也可以使用数据绑定来显示数据源中的一组项。项控件没有内容属性和标题属性。子元素将被添加到项控件的项承载区。例如,“ListBox”控件的项承载区是一个堆叠面板,该面板以垂直堆叠方式排列项。在 Microsoft Expression Blend 中,除非正在编辑项控件的模板,否则在“对象和时间线”下不会显示项承载区。

以下过程显示如何创建项控件(“ListBox”)并向项集合中添加元素。也可以对 MSDN 上的 ItemsControl 类型(此链接可能指向英文页面)主题中的“类型”下列出的其他项控件使用此过程。如果要显示数据源中的一组项,请参阅主题动手试验:创建 RSS 新闻阅读器

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

项控件在 Microsoft Silverlight 1.0 项目中不可用。但是,可以在“画布”版式面板上分层显示“TextBlock”对象,然后将这些对象与 JavaScript 事件处理程序挂钩,以使项显示或消失。有关 JavaScript 的信息,请参阅 Silverlight 脚本编写和鼠标事件(此链接可能指向英文页面)。

创建项控件

  1. 在 Expression Blend 左侧的“工具箱”中,单击“资源库”Cc294882.0224cabd-5da1-4e01-bddd-4a647401a098(zh-cn,Expression.10).png 按钮。在“控件”选项卡中,单击“系统控件”(如果尚未将其选中),再从列表中选择“ListBox”Cc294882.ffd7a7c3-6bcd-4ed3-a59e-1f28d06ec4ae(zh-cn,Expression.10).png。“ListBox”控件的图标将显示在“资源库”按钮上方,并且处于选中状态,以便您向美工板上添加“ListBox”。

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

    最常用的用户界面 (UI) 元素(如“Button”控件)已显示在“资源库”按钮上方的下拉列表中,以便您可以快速添加这些元素。

  2. 若要向美工板上添加按钮,请双击“ListBox”控件的“工具箱”图标。

    按照默认大小和位置(左上角)在美工板上创建的 ListBox 对象

    Cc294882.cd6e2b8c-8640-474d-81b3-5c476113947a(zh-cn,Expression.10).png

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

    也可以通过在“工具箱”中选择一个控件,然后单击美工板并拖动鼠标以指定该控件的范围框,从而将该控件添加到美工板上。

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

    将 UI 设计元素(如“ListBox”控件)添加到美工板上后,该元素就会成为应用程序中的对象。

  3. 在“对象和时间线”下,双击“ListBox”对象以将其激活。请注意,该元素周围将显示黄色突出显示框。激活对象后即可向其中添加子元素。

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

    也可以先从“工具箱”中选择“选择”Cc294882.2ff91340-477e-4efa-a0f7-af20851e4daa(zh-cn,Expression.10).png 工具,然后双击美工板上的对象,从而将其激活。

  4. 使用“工具箱”中的元素(如“TextBlock”Cc294882.42165963-00f7-4a33-abcd-b0849edebada(zh-cn,Expression.10).png、“Button”Cc294882.05df1779-a68f-436b-b834-a91b7995a3ec(zh-cn,Expression.10).png 或“Rectangle” Cc294882.ae750268-92e8-403a-9e07-b662da4e9e1e(zh-cn,Expression.10).png),在“ListBox”中绘制一些形状。请注意列表是如何以垂直堆叠方式排列这些子元素的。

    添加到 ListBox 对象中的子对象

    Cc294882.926bd9e5-e1d9-47a3-a37a-33cd351984b4(zh-cn,Expression.10).png

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

    如果添加的元素个数超过了项控件能容纳的个数,则会在运行应用程序时显示一个滚动条。您可以使用滚动条查看额外的元素。

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

    通过在“对象和时间线”下拖放对象,或者通过选择“选择”Cc294882.2ff91340-477e-4efa-a0f7-af20851e4daa(zh-cn,Expression.10).png 工具以在美工板上拖放对象,可以在列表中重新排列元素的顺序。

  5. 可以查看“ListBox”中的项,并在“集合编辑器”窗口中添加其他项。若要打开“集合编辑器”,请在“属性”面板中,单击“Items (集合)”属性旁边的“编辑此集合中的项”Cc294882.180d50dc-77e2-4d23-a353-1822e9056f2f(zh-cn,Expression.10).png 按钮。

  6. 生成项目 (F5) 以查看所得到的应用程序。