×
Namespaces

Variants
Actions
Revision as of 05:07, 27 June 2013 by hamishwillee (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Listing Flickr images in a grid using Qt and Windows Phone

From Nokia Developer Wiki
Jump to: navigation, search

This article demonstrates how to layout images from Flickr in a grid in Qt and Windows Phone.

WP Metro Icon Porting.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata
Code ExampleTested with
SDK: Windows Phone SDK 8.0, Qt 1.2 SDK
Devices(s): Nokia Lumia 820, Lumia 920
Compatibility
Platform(s): Windows Phone 8.0/ 7.1
Windows Phone 8
Windows Phone 7.5
Symbian
Article
Keywords: Grid View/ WP7 Toolkit
Created: somnathbanik (15 Nov 2011)
Last edited: hamishwillee (27 Jun 2013)

Contents

Introduction

This article shows how to list images in a Grid in both Qt and Windows Phone. We will obtain the images from Flickr and demonstrates how to parse XML data and bind it for display in the UI.

For Qt we will use GridView element. For Windows Phone we will use WrapPanel from WP7 Toolkit. WrapPanel enables users to position child elements sequentially from left to right or top to bottom. When elements extend beyond the panel edge, they are positioned in the next row or column.

Implementation

First create an empty project for both Qt and WP7.

Qt Project (main.qml)

Let’s create a text box to enter the search option

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

Add a button, so that when user clicks on the button it takes the search string from the text box and display images from Flickr.

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

The JavaScript refresh() function reload the content.

Qt Project (RssModel.qml)

We use XmlListModel to store the parsed data.

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)

To display the content we create a rectangle and an image and text inside it. Each text is the name of the corresponding 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"
}
}

The JavaScript trimString() function trim the name of the image if its exit 11 characters.

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

This set of code will display the images in Grid View but can only be scrolled vertically.

Windows Phone 7 (MainPage.xaml)

  • Add the reference
    Microsoft.Phone.Controls.Toolkit to the project.
  • Add namespace in XAML:
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
  • Create a button and a text box to enter the Flickr search string
    <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" />

Now we will add a ListBox to display the content. To display the images in grid view we use the WrapPanel as a content presenter instead of the default panel. This will help us to bring the images in the next line when it exits the panel edge. Thus we see a listing of images, and can scroll the images in vertical manner.

<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>

We use data binding between ListBox and parsed data. First we parse the Flickr data using XElement class and then bind it to the 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)
};

This code will display the Flickr images as that of the Qt project.

Summary

The Windows Phone 7 WrapPanel from the Silverlight Toolkit is a new control which can be found here:

C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Toolkit\Nov10\Bin\Microsoft.Phone.Controls.Toolkit.dll

The ItemHeight and ItemWidth are the key property of WrapPanel which sets the height and width of the layout area for each item that contains in WrapPanel.

And in Qt we use cellWidth and cellHeight to define the area of the panel.


Source Code

This page was last modified on 27 June 2013, at 05:07.
136 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.

×