首页 > 学院 > 开发设计 > 正文

在Avalon中建立数据识别的应用程序

2019-11-17 04:41:19
字体:
来源:转载
供稿:网友

  在WPF(Windows PResentation Foundation)中,可以将UI元素绑定在多种数据源上,其中包括xml数据、Web服务、数据库等等。本文的示例项目使用XML数据源演示了在Windows显示基础(Presentation Foundation)中数据绑定是如何工作的。

  在WPF中你可以把UI(用户界面)元素绑定到多种数据源,包括XML数据、Web服务、数据库等等。数据绑定是WPF的一个很大的话题;讨论数据绑定的细节和裂隙则超出了本文的范围。为了简单,我将演示如何把一个典型的WPF应用程序绑定到XML数据源,并解释其后台的细节信息。为了让这个例子有实际用处,我将建立一个简单的rss阅读器,它接受RSS XML文档,并使用数据绑定显示文档中的多个数据项。图1显式了完整的应用程序。

在Avalon中建立数据识别的应用程序
图1:Avalon RSS阅读器应用程序。

  在这个例子中,使用DevX新文章RSS资源生成示例应用程序的数据。

  绑定到静态的XML源

  为了建立本文中的示例应用程序,你必须有Visual Studio 2005 Beta 2,并安装WinFX SDK。请使用Visual Studio 2005 Beta 2建立一个新的AvalonNavigation应用程序(图2所示),应用程序的名称叫做DataBinding。

在Avalon中建立数据识别的应用程序
图2:建立一个新的AvalonNavigation应用程序。

  像通常一样新建Visual Studio项目,选择AvalonNavigation类型。

  在默认的Page1.xaml中,首先需要用相关的XAML元素来填充页面,建立应用程序UI。

  首先,给页面添加一个<DockPanel>元素,把它的背景色设置为Cornsilk:

<Page x:Class="Page1"
 xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
 xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005"

<DockPanel
 xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
 xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005"
 Background="Cornsilk"

 给页面添加一个<DockPanel.Resources>元素(见列表1)。<DockPanel.Resources>元素答应你定义XML数据源(就是大家所知道的XML数据岛)供这个应用程序使用。在例子中,XML源是一个RSS文档。其XPath属性被设置为"/rss/channel",它是RSS文档树的起始节点,这样你就可以简单地使用相对路径来引用子元素了。该XML数据源的键(key)是RSSData。代码如列表1所示。

  列表 1: <DockPanel.Resources>

  <DockPanel.Resources>元素答应你定义一个XML数据源供这个应用程序使用。

<DockPanel.Resources>
 <XmlDataSource x:Key="RSSData" XPath="/rss/channel">
 <rss version="2.0" xmlns="">
 <channel>
  <title>DevX: Latest Published Articles</title>
  <link>http://www.devx.com</link>
  <description>Latest DevX Content</description>
  <language>en-us</language>
  <copyright>Copyright 2002 DevX</copyright>
  <docs>http://backend.userland.com/rss</docs>
  <lastBuildDate>Sun, 28 Aug 2005 23:36:13 PST</lastBuildDate>
  <image>
   <title>DevX</title>
   <url>http://services.devx.com/outgoing/devxwire.gif</url>
   <link>http://www.DevX.com</link>
  </image>
  <item>
   <title>Discover the Eclipse Modeling Framework (EMF) and Its Dynamic Capabilities</title>
   <description>Given a model, EMF can generate java source code that will allow
you to create, query, update, serialize, deserialize, validate, and track changes to instances of your
models. EMF provides an efficient reflective API and allows you to work with dynamic, non-generated,
models.</description>
   <link>http://www.devx.com/Java/Article/29093?trk=DXRSS_LATEST</link>
   <author> (Dave Steinberg) editorial@devx.com</author>
   <pubDate>Fri, 26 Aug 2005 19:43:34 PST</pubDate>
  </item>

  <item>
   <title>...</title>
   <description>...</description>
   <link>...</link>
   <author>...</author>
   <pubDate>...</pubDate>
  </item>

  <item>
   <title>...</title>
   <description>...</description>
   <link>...</link>
   <author>...</author>
   <pubDate>...</pubDate>
  </item>

 </channel>
</rss>
</XmlDataSource>
  下一步,给<DockPanel.Resources>元素添加一个<DataTemplate>元素。我们使用<DataTemplate>元素把XML数据岛的内容绑定到一个控件(例子中是TextBlock控件)。TextBlock数据模板被绑定到(XML树的)<title>元素,我们给它命名为RSSTemplate:


<DataTemplate x:Key="RSSTemplate">
 <TextBlock FontSize="Small">
 <TextBlock.TextContent>
 <Binding XPath="title"/>
</TextBlock.TextContent>
</TextBlock>
</DataTemplate>
</DockPanel.Resources>
  下一步,在页面上添加一个标题("Titles"),同时在XML数据岛(图3所示)中建立一个列表框控件来显示所有的标题(封装在<title>元素内)。请注重,我们使用ItemsSource属性来指定数据源(Binding Source={StaticResource RSSData}是简洁的绑定表达式)和开始搜索的节点(XPath=item)。

在Avalon中建立数据识别的应用程序
图3:给Data控件绑定XML数据

  在应用程序代码中RSS资源的XML被绑定到Data控件。进入讨论组讨论。

  你可以使用ItemTemplate属性给控件({StaticResource RSSTemplate})应用一个模板。最后,当列表框控件中选择的项发生改变的时候,会调用TitleChanged事件(它是在SelectionChanged属性中指定的):

<StackPanel>
<TextBlock DockPanel.Dock="Left"
 FontSize="18"
 FontWeight="Bold" Margin="10"
 HorizontalAlignment="Left">
 Titles
</TextBlock>

<ListBox HorizontalAlignment="Left"
 Margin="10,0,10,10"
 Width="300"
 Background="LightYellow"
 ItemsSource="{Binding Source={StaticResource RSSData}, XPath=item}"
 ItemTemplate="{StaticResource RSSTemplate}"
 SelectionChanged="TitleChanged" />
</StackPanel>
  当我们选中列表框控件中的数据项的时候,应用程序在页面右边显式该数据项的描述信息。在下一步中,你希望显示标题("Description"),它后面紧跟着<DockPanel>元素,这个元素又包含了一个绑定到描述元素({Binding XPath=description})的<TextBlock>元素。第二个<DockPanel>元素用于显示与选中数据项相关的URL({Binding XPath=link}),如图4所示:

<StackPanel>
<TextBlock DockPanel.Dock="Left"
 FontSize="18"
 FontWeight="Bold" Margin="10"
 HorizontalAlignment="Left">
 Description
</TextBlock>

<DockPanel HorizontalAlignment="Left" Name="dpDescription" Width="500">

<TextBlock Name="txtDescription"
  DockPanel.Dock="Top"
  FontSize="Small"
  HorizontalAlignment="Left"
  TextWrap="wrap"
  Margin="10,0,10,10"
  Background="Black"
  Foreground="White"
  TextContent="{Binding XPath=description}"
/>
</DockPanel>

<DockPanel HorizontalAlignment="Left"
  Name="dpURL"
  Width="500"


<TextBlock Name="txtURL"
  DockPanel.Dock="Top"
  FontSize="Small"
  HorizontalAlignment="Left"
  TextWrap="wrap"
  TextContent="{Binding XPath=link}"
  Margin="10,10,10,10"
  Foreground="Blue"/>
</DockPanel>

</StackPanel>
</DockPanel>
</Page>
在Avalon中建立数据识别的应用程序
图4:显示具体描述信息。被选中的RSS项的描述信息和

  链接被绑定到TextBlock控件。当用户在列表框中选择项目的时候它们会改变。

  最后,你需要完善前面提到的TitleChanged()事件。在这个事件中,当用户选择列表框控件中的某个数据项的时候,你需要改变DataContext属性的dpDescription和dpURL <DockPanel>元素:


Partial Public Class Page1
Inherits Page

Private Sub TitleChanged(ByVal sender As Object, _
ByVal args As SelectionChangedEventArgs)
 Dim lstbox As ListBox = sender
 If lstbox.SelectedItem IsNot Nothing Then
  dpDescription.DataContext = lstbox.SelectedItem
  dpURL.DataContext = lstbox.SelectedItem
 End If
End Sub

End Class
  我们已经完成了!按F5测试应用程序。RSS XML文档中的数据项都显示在列表框控件中。你可以点击列表框控件中的数据项,相应的描述信息和URL就会显示在页面右侧(图1所示)。

  绑定到外部的XML源

  前面的例子演示了如何把XML数据岛绑定到WPF应用程序的多个控件上。在应用程序内使用XML数据岛引起的一个问题是,对XML数据的任何修改都要求修改/编译应用程序。更好的方法是把XML数据存储在外部文件中,在应用程序中引用该文件。例如,你可以把XML数据存储在RSS.xml文件中,接着可以在应用程序中引用它:

<XmlDataSource x:Key="RSSData" Source="RSS.xml" XPath="/rss/channel" />
  动态地载入XML源

  尽管你可以引用外部的XML文件,但是更好的办法可能是从URL动态地载入XML文档。在这个例子中,你可以修改<XmlDataSource>元素:

<XmlDataSource x:Key="RSSData" Source="http://services.devx.com/outgoing/devxfeed.xml" XPath="/rss/channel" />
  你可以使用下面一些URL试一试,可以发现每次都载入了不同的RSS数据项:

  · http://services.devx.com/outgoing/dotnet.xml

  · http://services.devx.com/outgoing/wirelessfeed.xml

  · http://services.devx.com/outgoing/enterprisefeed.xml

  · http://services.devx.com/outgoing/xmlfeed.xml

  进一步改善

  在本文中你看到了在WPF中数据绑定是如何进行的。假如你希望进一步改善示例应用程序,可以考虑修改应用程序,答应用户从URL列表中选择一个(代替手动地修改XML文档源)。进入讨论组讨论。


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表