×
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 05:14.
132 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.

×