显示数据

数据是每个用户界面的核心。从酒店预订网站到股票市场可视化,用户界面通常可使您看到某种形式的数据并与之交互。对所使用的用户界面组件以及布置这些组件以提供有用工作流程的方式进行选择,在很大程度上取决于将要使用的数据的性质。

数据源

您的应用程序可能只需要使用内部数据源,例如,对用户在表单中输入的某些数字执行计算。您所创建的其他应用程序可能需要访问外部数据源,例如数据库、Web 源、Web 服务或包含信息的本地文件。Microsoft Expression Blend 支持以下数据源类型:

  • XML 数据源    一个本地或远程 XML 文件,可为应用程序提供 XML 格式的数据。可以使用已添加到项目中的 XML 文件,也可以将数据源设置为网站上的 XML 文件的 URL。

    有关详细信息,请参阅使用实时 XML 数据源

    Note注意:

    Microsoft Silverlight 不支持实时 XML 数据源。但是,可以从 MSDN 上的 XML 数据 Cc295161.xtlink_newWindow(zh-cn,Expression.40).png 下找到使用 XML 数据的相关信息。

  • 对象数据源    一个包含公共属性的对象,可以将目标属性绑定到所包含的公共属性。对于 WPF 应用程序,可以使用 Microsoft .NET Framework 类库,将数据从数据库转换为 ObservableCollection。

    有关详细信息,请参阅使用对象数据源连接到数据库动手试验:显示示例 SQL 数据库中的数据,或参阅 MSDN 上的数据绑定概述 Cc295161.xtlink_newWindow(zh-cn,Expression.40).png 主题。有关 Silverlight 应用程序,请参阅 MSDN 上的数据绑定 Cc295161.xtlink_newWindow(zh-cn,Expression.40).png

    Note注意:

    Microsoft Expression Blend 不支持构造函数中带有参数的 CLR 对象数据源类。

  • 示例数据源    使用“数据”面板中的“创建示例数据”工具创建的一组本地文件。由于您在美工板上看不到外部数据,因此,Expression Blend 支持可以在设计应用程序时使用的示例数据。

    有关详细信息,请参阅创建示例数据

“数据”面板中的数据源列表

Cc295161.5466a442-fd31-47e2-893e-4a738a1eaf2e(zh-cn,Expression.40).png

在 Expression Blend 中,与活动文档关联的数据源将在“数据”面板中的“此文档”下列出。项目中所有文档可用的数据源将在“数据”面板中的“项目”下列出。您可以使用“数据”面板顶部的按钮创建数据源,也可以将数据项拖到美工板上,以创建与这些项建立数据绑定的控件。

有关详细信息,请参阅在控件中显示数据

数据绑定

数据绑定是将数据源中的项连接到用户界面组件(控件)的过程。这意味着,每当数据发生更改时,界面组件将有选择地反映这些更改;同样,当界面组件发生更改时,数据也会相应地发生更改。最简单的数据绑定示例是内部绑定到矩形宽度的滑块条控件。移动滑块条就会放大或缩小矩形。

Expression Blend 提供了一种简单而统一的方法,可将应用程序中的对象绑定到不同的数据源,以及配置用于显示和修改数据的对象。绑定本质上是在源和目标之间建立的。源通常是数据源或其他控件,而目标通常是控件。在滑块条示例中,源是滑块条控件的“Value”属性,而目标是矩形的“Width”属性。

通过使用“属性”面板中与属性关联的“高级选项”按钮 Cc295161.12e06962-5d8a-480d-a837-e06b84c545bb(zh-cn,Expression.40).png,或者将“数据”面板中的各项拖到美工板上,您可以创建绑定。

有关详细信息,请参阅将对象绑定到数据

展开了“高级选项”部分的“创建数据绑定”对话框

Cc295161.8fcdc007-d9cd-430d-81d5-29ac9b88ee31(zh-cn,Expression.40).png

“创建数据绑定”对话框将显示三个用于选择数据源的基本选项以及一些高级选项:

  • 数据字段 此选项可显示在项目中创建的 XML 和 CLR 对象数据源及其关联字段。您可以添加新的 XML 数据源或 CLR 对象数据源,也可以使用已创建的现有连接。若要选择要绑定到的字段,请在“数据源”下选择一项,然后在“字段”下选择数据项。除非拥有可应用的值转换器(请参阅本主题下文中的“高级选项”),否则数据项的类型必须与所绑定到的属性的类型匹配。创建数据绑定之后,将用数据项填充目标属性的值。

  • 元素属性****   通过使用此选项,可以在同一个可扩展应用程序标记语言 (XAML) 文件中,将某个对象的一个属性绑定到该对象的另一个属性,这与本主题前文提到的示例中将矩形的 Width 属性绑定到滑块条的 Value 属性类似。若要创建该绑定,请执行下列操作之一:

    • 在“属性”面板中找到目标属性(在本例中为矩形的 Width 属性),单击“高级选项”Cc295161.12e06962-5d8a-480d-a837-e06b84c545bb(zh-cn,Expression.40).png,然后单击“数据绑定”。单击“元素属性”选项卡,在左侧窗格中浏览对象以找到滑块条(源对象),然后在右侧窗格中浏览属性列表以找到并选择 Value 属性。

    • 在“属性”面板中找到目标属性(在本例中为矩形的 Width 属性),单击“高级选项”Cc295161.12e06962-5d8a-480d-a837-e06b84c545bb(zh-cn,Expression.40).png,然后单击“元素属性绑定”。请注意,光标更改为“美工板元素选取器”“美工板元素选取器”图标。在美工板上单击要绑定属性的对象。在“创建数据绑定”下拉框中,选择 Value 属性。

  • 显式数据上下文   通过使用此选项,可以绑定到针对当前对象或其某个父对象所指定的上下文中的数据源。数据上下文是一种在多个控件之间共享数据的简便方法,该方法建立一个范围,使此范围内的所有数据绑定属性均继承一个公共源。例如,可以向包含 ListBox 对象和 TextBlock 对象的网格对象指定数据上下文,并将这两个对象的属性绑定到同一上下文中的不同数据项。如果需要创建“列表-细节”设计,这种方法将很有用。在这种设计中,如果单击列表(列表窗格)中的某个项,就会在另一个对象(细节窗格)中显示该项的相关信息。“显式数据上下文”选项卡中的“字段”窗格中列出了所继承的数据上下文提供的数据连接字段,您可以在此窗格中为目标属性选择适当的数据连接字段。

    也可以在“数据”面板底部的“数据上下文”类别中访问数据上下文信息。如果对在美工板上选择的对象进行了数据绑定,则“数据上下文”类别将为当前选中的内容或范围显示数据上下文属性 ( DataContext ) 或设计时数据上下文属性 ( d:DataContext )。

    “数据”面板中的“数据上下文”类别

    当您在“数据”面板中在“列表模式”和“详细信息模式”之间切换时,“数据上下文”类别会显示变化。也可以通过将所要的数据直接从“数据上下文”类别中拖到美工板上的元素上来创建数据绑定。

    Note注意:

    可以为数据绑定键入自定义路径或 XML Path 语言 (XPath) 表达式。系统将使用您在“字段”下选择的项的路径自动填充“XPath”字段。不过,您可以在该路径上附加限制以减少从数据源引入的数据,例如标识所需的 XML 数据中的特定节点(如数组中的一项)。有关如何使用 XPath 的详细信息,请参阅 MSDN 上的主题 XPath 语法 Cc295161.xtlink_newWindow(zh-cn,Expression.40).png如何:使用 XMLDataProvider 和 XPath 查询绑定到 XML 数据 Cc295161.xtlink_newWindow(zh-cn,Expression.40).png

  • 显示高级属性   对话框的高级属性部分,可以通过单击底部的展开器 Cc295161.de239c9d-42ce-4f5e-83b9-5f9924c0431f(zh-cn,Expression.40).png 进行访问,可用于设置高级属性,例如数据流的方向(请参阅本主题下文中的“数据流”)、目标属性的默认值、值转换器和转换器参数。值转换器是用于转换值类型的 .NET Framework 类方法。当源属性和目标属性的类型不匹配时,就需要使用值转换器。通过单击值转换器框旁边的“添加新的值转换器”Cc295161.3f9fe48b-caf8-4989-8a91-017ba1e0cb77(zh-cn,Expression.40).png,再从“添加值转换器”对话框中选择一个值转换器,即可添加值转换器。也可以指定转换器参数(例如,若要从双精度转换为小数,可能需要指定小数点后显示的小数位数的值)。

    有关值转换器的示例,请参阅动手试验:将数据从一种类型转换为另一种类型

数据流

数据流定义为数据在源和目标之间流动的方向。如果是用于缩放矩形的滑块条,只需要从滑块条(源)到矩形(目标)的单向绑定。对于数据流,支持以下绑定配置:

  • 默认值    默认设置为 OneWay 。对源所做的更改会自动更新目标,而对目标所做的更改不会更新源。

  • OneWay    对源所做的更改会自动更新目标,而对目标所做的更改不会更新源。

  • TwoWay    对源所做的更改会自动更新目标,反之亦然。

  • OneWayToSource    对目标所做的更改会自动更新源,而对源所做的更改不会更新目标。这与 OneWay 相反。当目标属性不属于依赖属性时,会出现在“属性”面板中看不到目标属性的情况。在这种特殊情况下,此方法非常有用。使用 OneWayToSource 绑定时,可以改为对目标设置数据绑定。Silverlight 项目中不支持此选项。

  • OneTime    不进行任何更改。在初始化应用程序时,目标将设为源值。在此之后,目标不会有任何更新。

若要查看数据流的实际效果,请考虑以下包含 Slider 控件(源)和 TextBox 控件(目标)的用户界面示例:

演示数据流通过绑定类型的情况

Cc295161.955af9ad-a12d-41c6-9106-1ec4be43d0d4(zh-cn,Expression.40).png

在上述示例图中,按照以下过程为文本框(目标)设置绑定:

  1. 在“属性”面板中,单击与 TextBoxText 属性(在“公共属性”下)关联的“高级选项”按钮 Cc295161.12e06962-5d8a-480d-a837-e06b84c545bb(zh-cn,Expression.40).png,然后单击“数据绑定”。

  2. 在显示的“创建数据绑定”对话框中的“元素属性”选项卡中,选择“Slider”节点的 Value 属性。

下表根据绑定类型说明了此示例的绑定行为:

绑定类型 结果

OneWay

移动滑块条(源)将更新文本框(目标)。但是,在文本框中键入数值不会移动滑块条。

TwoWay

移动滑块条(源)将更新文本框(目标)。此外,如果在文本框中键入数值,再用鼠标单击文本框外部,则滑块条的位置会改变。

OneWayToSource

如果在文本框(目标)中键入数值,再单击文本框外部,则会移动滑块条(源)。但是,移动滑块条不会更新文本框。

OneTime

在应用程序启动时,滑块条(源)的初始值将更新文本框(目标)。对滑块条所做的后续更改不会更新文本框,而在文本框中键入数值也不会更新滑块条。

有关用于说明此方案的过程,请参阅将对象绑定到用户输入或其他内部值

绑定到数据源的方法

工作流程 1:从源绑定到目标

在创建外部数据源之后,可以将该数据源绑定到用户界面控件。有两种方法可以完成此任务:

  • 绑定现有控件    如果控件已经存在于文档中,则可以将数据节点从“数据”面板拖到控件上,从而将该控件绑定到数据。拖动数据节点时,会出现一条消息,告知您数据将绑定到的对象属性。

    Cc295161.054f8f1c-c18a-4268-a963-390e84fa2809(zh-cn,Expression.40).png

    如果要指定其他属性,可以按住 Shift 键,然后再松开鼠标按钮。

    Cc295161.a1b9bdb2-3bb6-436d-a955-b2153b6ffba0(zh-cn,Expression.40).png

  • 创建新控件    可以将“数据”面板中的任何数据节点拖到文档中。这种方式将在文档中插入新控件。

有关详细信息,请参阅下列主题:

工作流程 2:从目标绑定到源

尽管前一个工作流始终从数据源开始并在目标控件结束,但是如果您已经创建控件并且知道要将哪个属性绑定到数据源或控件的另一个属性,则可使这一过程反向进行。此工作流程对于对象到对象的绑定尤其有用。

有关详细信息,请参阅将对象绑定到用户输入或其他内部值

在“属性”面板中的每个属性值编辑器旁边,都会显示一个“高级选项”按钮 Cc295161.12e06962-5d8a-480d-a837-e06b84c545bb(zh-cn,Expression.40).png,以用于设置包括数据绑定在内的高级选项。单击高级选项菜单上的“数据绑定”,将打开与本主题前文的“工作流程 1”中所述相同的“创建数据绑定”对话框。

数据模板

某些情况下,您可能需要显示数据源中的项列表。包含项列表的数据项由项名称中的“(Array)”标识。在将“数据”面板中的某个列表节点拖到 DataGrid 控件上之后,您的数据会显示在其模板可供修改的对象中。

有关修改数据模板的示例,请参阅以下主题:

数据模板将像其他任何样式或模板一样作为资源存储起来。如果要修改现有数据模板,可以在“资源”面板中单击该数据模板旁边的“编辑资源”按钮。Expression Blend 将进入模板编辑模式,并在“对象和时间线”下显示模板的结构。在此编辑模式下,可以向模板中添加控件,并通过“属性”面板来使用数据绑定,以将这些控件的属性绑定到数据源中的新项。

数据行为

除了能够将属性拖到美工板上以绑定到现有对象、创建新的绑定对象或设置设计时数据上下文之外,您还可以将命令和方法从“数据”面板中拖到美工板上的对象上。

将命令拖到对象上时,Expression Blend 会创建一个 InvokeCommandAction 操作以调用命令。然后,可以在“属性”面板中配置对象将如何触发命令。同样,将方法拖到美工板上时,Expression Blend 会创建一个可以按照相同的方式配置的 CallMethodAction 操作。

有关 InvokeCommandActionCallMethodAction 的详细信息,请参阅 InvokeCommandActionCallMethodAction

另请参阅

概念

设置对象的样式
排列对象

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