Silverlight 中的 XML 照片相册

• 下载源代码 - 1.92 MB

引言

在过去的几个月里，我从这个网站学到了很多想法，所以我决定回馈一些东西。 我一直在努力学习 Silverlight，并且与每一项新技术一样，即使你了解如何编程，你仍然需要尝试找出如何做一些更棘手的事情。 在 Visual Studio 中按 F1 真的没有帮助，所以只能去网上冲浪了。

然后乐趣就开始了。 我发现很多例子都过于复杂，而且在 Silverlight 中，大多数例子都是用 C# 写的。

这个应用程序将展示如何通过 XML 文件加载照片，以及如何在客户端的 PC 上保存它们。 这两个操作都使用 Webclient 完成。

背景

大多数例子都表明我想实现的目标无法完全在 Silverlight 中完成。 但是，正如这个应用程序所示，它是可以做到的。 虽然这个例子处理的是 JPG 文件，但这种方法可以应用于任何类型的文件。

Using the Code

这个应用程序是一个非常简单的相册，我希望分享的主要问题是加载和存储 XML 数据，并允许用户使用 Webclient 在他的/她的 PC 上保存照片。

首先，创建一个简单的类来存储照片的 URL。

缩略图和照片的 URL 都将存储在这里。

Namespace Pictures
Public Class Picture
Private strPicture As String
Private strThumbNail As String

Public Sub New(ByVal strPic As String, ByVal strThumb As String)
strPicture = strPic
strThumbNail = strThumb
End Sub

Public ReadOnly Property Picture() As String
Get
Return strPicture
End Get

End Property

Public ReadOnly Property Thumbnail() As String
Get
Return strThumbNail
End Get

End Property
End Class
End Namespace

然后在 XAML 后置代码中，添加以下内容（注意 - 还要导入 system.linq & system.xml.linq）。

首先，通过调用 DownloadStringAsync 方法，Webclient 将加载 XML 文件。 完成后，将触发 DownloadStringCompleted 事件。 然后通过循环遍历 XML 并将每个项目存储在列表中的一个类中来创建一个列表 (xmlList)。

Private xmlList As New List(Of Pictures.Picture)
Public Sub New()
InitializeComponent()
Dim url As New Uri("images.xml", UriKind.RelativeOrAbsolute)
Dim xmlWebClient As New WebClient
AddHandler xmlWebClient.DownloadStringCompleted, 
    AddressOf XMLWebClient_DownloadStringCompleted
xmlWebClient.DownloadStringAsync(url)
End Sub

Private Sub XMLWebClient_DownloadStringCompleted(ByVal sender As Object,
    ByVal e As DownloadStringCompletedEventArgs)
Dim xmlPictures As XDocument
Dim xmlElement As XElement
xmlPictures = XDocument.Parse(e.Result)
For Each xmlElement In xmlPictures.Descendants("all")
xmlList.Add(New Pictures.Picture(xmlElement.Element("pict_path"),
    xmlElement.Element("thumb_path")))
Next
LoadInitialThumbs()
End Sub

就是这样。 Webclient 加载 XML 文件，然后将 URL 添加到列表集合中。 请下载源代码以查看如何处理数据并将其链接到 XAML。

接下来我想谈谈使用 Silverlight 的 SaveFileDialog。 这必须由用户启动。 因此，需要一个点击事件。 直接调用它或从任何其他鼠标事件调用它会导致错误。

首先，你需要在 XAML 页面中添加一个按钮，给它一个名称，然后创建一个点击事件。 在此事件中，创建一个 SaveFileDialog 并应用一个过滤器。 使用 ShowDialog 方法将对话框显示给用户。 接下来，用户输入文件名。 如果一切正常，则文件名存储在流 fs 中。

接下来，实际上从服务器检索文件到 PC。

同样，这可以通过使用带有处理程序的 webclient 来实现，但这次使用 OpenReadAsync 方法以及 OpenReadCompleted 事件。

在触发此事件时，文件将写入 fs 流。

Private Sub btnSavePic_Click(ByVal sender As Object,
   ByVal e As System.Windows.RoutedEventArgs)
Dim sfd As New SaveFileDialog
sfd.Filter = "JPEG Files (*.jpg)|*.jpg"
Dim result As System.Nullable(Of Boolean) = sfd.ShowDialog()
If result = True Then
fs = sfd.OpenFile
SaveFile(mainImage.Tag.ToString)
End If
End Sub

Private fs As Stream
Private Sub SaveFile(ByVal strURL As String)
Dim photoWebClient As New WebClient
Dim url As New Uri(strURL, UriKind.RelativeOrAbsolute)
AddHandler photoWebClient.OpenReadCompleted, AddressOf photoWebClient_OpenReadCompleted
photoWebClient.OpenReadAsync(url)
End Sub
Private Sub photoWebClient_OpenReadCompleted(ByVal sender As Object, 
    ByVal e As OpenReadCompletedEventArgs)
Dim length As Integer = Convert.ToInt32(e.Result.Length)
Dim byteResult As Byte() = New Byte(length - 1) {}
e.Result.Read(byteResult, 0, byteResult.Length)
fs.Write(byteResult, 0, byteResult.Length)
fs.Close()
End Sub

唯一的问题是，你无法将文件名放入保存对话框中。

以上内容花了不少时间才弄清楚，所以我希望其他开发人员会发现以这种方式使用 Webclient 很有用。 它还允许直接保存文件，而不是使用额外的客户端到服务器的流量 - 只有 100% 纯 Silverlight。

历史

• 2010 年 5 月 5 日：初始帖子