绘制项目控件

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

以下过程显示如何创建项目控件 ( ListBox ) 并向项目集合中添加对象。也可以对 MSDN 上的 ItemsControl Types Cc294882.xtlink_newWindow(zh-cn,Expression.40).png(ItemsControl 类型)主题中的“类型”下列出的其他项目控件使用此过程。

如果要显示数据源中的一组项,请参阅主题动手试验:创建 RSS 新闻阅读器

有关详细信息,请参阅使用 StackPanel 版式面板

创建项控件

  1. 在 Expression Blend 左侧的“工具”面板中,单击“资产”Cc294882.0d8b8d29-1af9-418f-8741-be3097d76eab(zh-cn,Expression.40).png。在“控件”类别中,从列表中选择 ListBox  Cc294882.ffd7a7c3-6bcd-4ed3-a59e-1f28d06ec4ae(zh-cn,Expression.40).pngListBox 控件的图标将显示在“资产”按钮下方,并且处于选中状态以便您可以向美工板添加 ListBox

    tip note提示:

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

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

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

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

    tip note提示:

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

    tip note提示:

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

  3. 在“对象和时间线”面板中,单击 ListBox 对象以将其激活。激活对象后即可向其中添加子对象。

    tip note提示:

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

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

    添加到 ListBox 对象中的子对象

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

    Note注意:

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

    tip note提示:

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

  5. 可以查看 ListBox 中的项,并在“集合编辑器”窗口中添加其他项。若要打开“集合编辑器”,请在“属性”面板中,单击“Items (Collection)”属性旁边的“编辑此集合中的项”Cc294882.3f9fe48b-caf8-4989-8a91-017ba1e0cb77(zh-cn,Expression.40).png

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

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