×
Namespaces

Variants
Actions

Qt 和 WP7中的Image Listing

From Nokia Developer Wiki
Jump to: navigation, search
WP Metro Icon Porting.png
SignpostIcon WP7 70px.png
Article Metadata

兼容于
文章
翻译:
WS_YiLunLuo
最后由 hamishwillee 在 27 Jun 2013 编辑


Contents

简介

在这篇文章中我们将介绍怎样在Grid View里列出图片。对于Qt来说,使用GridView 元素是最常见的方法。在WP7里我们将利用WP7 Toolkit里的WrapPanel,这样,在grid view里展示图片就有了一种更简单的方法。WrapPanel使得用户能够将子元素从左至右或从上至下顺序地摆放。当元素超出了panel的边沿,它们就换到下一行或下一列。我们将它称作Image Listing是因为我们将图片放到grid form里而不是放到一个List Box中,因此用户可以以垂直的方式在不同的图片之前切换。


Qt Windows Phone
Image Listing in Qt
Image Listing in WP7
Example of Qt Example of WP

基本思想

为了简单化和增强真实生活体验,我们将Flickr(网络相册)作为例子,在这个例子中用户可以输入搜索内容并显示出相应的Flickr图片。这个例子与应用程序开发有着更加动态紧密的联系,在这里我们需要分析XML数据并显示其内容。这个例子还展示了怎样绑定数据并使其显示在应用程序界面上。

实现

为Qt 和 WP7都创建一个空的project。我们先完成Qt project,然后再转到WP7 project。

Qt Project (main.qml)

创建一个文本框用来输入搜索内容

  TextField {
id:textField
width: 260
x:20
y:70
text: ""
placeholderText: "Enter your search"
}

添加一个按钮,当用户点击这个按钮时从文本框中获得字符串并将Flickr中的图片显示出来。

 
Button {
id: button
y:70
x:parent.width -65
text: "Go"
onClicked: {
feedModel.search = textField.text;
feedModel.refresh();
}
}

JavaScript 函数refresh()用来重载这一内容。

Qt Project (RssModel.qml)

我们使用 XmlListModel 来保存解析过的数据。

XmlListModel {
id: feedModel
property string search : ""
source : "http://api.flickr.com/services/feeds/photos_public.gne?tag="+search+"&format=rss2" //flickr
query: "/rss/channel/item" // flickr
namespaceDeclarations: "declare namespace media=\"http://search.yahoo.com/mrss/\";"
// Flickr
XmlRole { name: "title"; query: "title/string()" }
XmlRole { name: "imagePath"; query: "media:thumbnail/@url/string()" }
XmlRole { name: "photoAuthor"; query: "author/string()" }
XmlRole { name: "photoDate"; query: "pubDate/string()" }
function refresh()
{
reload();
}
}


Qt Project (GridDelegate.qml)

为了显示内容,我们创建了一个矩形,在该矩形内部有一个image和text。每个text里显示对应image的名称。

Rectangle {
id: whiteRect; width: 79; height: 79 ; color: "#dddddd"; smooth: true
Image {
id: thumb
source: imagePath
x: 2; y: 2; smooth: true
}
Text {
id: imgTitle
height: 20
y:80
width: 89
text: trimString(title)
font.bold: true;
font.pixelSize: 15;
color: "White";
style: Text.Raised;
styleColor: "Black"
}
}

如果图片名称多于11个字符,JavaScript函数trimString()将剔除多出的字符。


 
function trimString(string) {
var limit = 11;
if(string.length > limit) {
string = string.substr(0, (limit - 3)) + "...";
}
return string;
}

这些代码实现了在Grid View里显示图片,但只能垂直滚动。

WP7(MainPage.xaml)

  • 添加引用
Microsoft.Phone.Controls.Toolkit to the project.
  • 在xaml里添加命名空间
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

创建一个按钮和一个text box以输入Flickr搜索字符串

 
<Button Content="Search" Height="72" HorizontalAlignment="Left" Margin="266,14,0,0" Name="SearchButton" VerticalAlignment="Top" Width="160" Click="FlickrSearch_Click" />
<TextBox Height="72" HorizontalAlignment="Left" Margin="12,11,0,0" Name="SearchBox" Text="" VerticalAlignment="Top" Width="253" />

现在,我们添加一个 ListBox 来显示内容。为了在grid view里显示图片,我们使用WrapPanel来呈现内容而不是使用默认情况下使用的panel。当图片超出panel边沿时,这将帮助我们将图片放到下一行或下一列。这样,我们看到列出的图片,并且能够以垂直的方式滚动图片。


<ListBox Height="563" HorizontalAlignment="Left" Margin="-4,88,0,0" Name="listBox1" VerticalAlignment="Top" Width="460">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel ItemHeight="150" ItemWidth="150"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<Image Source="{Binding ImageSource}" Height="120" Width="120" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock Text="{Binding UserName}" Style="{StaticResource PhoneTextSubtleStyle}"
Width="100" TextAlignment="Center"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

我们在 ListBox 和解析过的数据之间使用数据绑定。首先我们使用XElement 类将Flickr数据解析,然后将其绑定到ListBox.


 
XElement XmlTweet = XElement.Parse(e.Result);
 
XNamespace ns = "http://search.yahoo.com/mrss/"; // flilckr
listBox1.ItemsSource = from tweet in XmlTweet.Descendants("item")
select new FlickrData
{
 
ImageSource = tweet.Element(ns + "thumbnail").Attribute("url").Value,
Message = tweet.Element("description").Value,
UserName = tweet.Element("title").Value,
PubDate = DateTime.Parse(tweet.Element("pubDate").Value)
};

Qt project中,这些代码将显示Flickr图片。

总结

Silverlight Toolkit  的WP7 WrapPanel是一个新控件,你可以在这里找到其dll
C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Toolkit\Nov10\Bin\Microsoft.Phone.Controls.Toolkit.dll

ItemHeight 和 ItemWidth是WrapPanel的核心属性,分别用来设置WrapPanel所包含的每一项的布局区域的高度和宽度。 在Qt中我们使用cellWidth 和 cellHeight 来定义panel区域的高度和宽度。

源代码

This page was last modified on 27 June 2013, at 08:14.
95 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×