Developing Windows 8 Metro Style Apps with GridView in XAML – Part I


  • Development of Windows 8 Metro Style apps in Windows 8 Developer Preview is quite easy with the help of Visual Studio 11 Developer Preview or Visual Studio 11 Express Developer Preview(Available only with Windows 8 Developer Preview x64 with Windows SDK Tools). In Metro Style apps creation you will get option to create five types of applications in VS 11 developer preview templates.
  • Application
  • Grid Application
  • Split Application
  • Class Library
  • Unit Test Library

  • Next, we will create a Grid Application for Windows 8 Metro Style applications in XAML 4.5 to develop an PhotoViewer app.
  • So, after creation of Grid application in VS 11 Developer Preview you can find the following files:
  • App.xaml: The Configuration file responsible for launch, Application Event Handling, Splash Screen handling.
  • CollectionSummaryPage.xaml: This page is responsible for summing up ListView along with FlipViews with User Control Styles & Templates binding.
  • DetailPage.xaml: The Page controls the basic UI binding of the Items retrieved from Service URL or local database.
  • GroupCollectionPage.xaml: Responsible for UI layout & formatting.
  • Package.appxmanifest: The overall configuration file of the app, responsible for logo designing & selection of Splash Screen, Logo of the Application, Device access capability, Code signing, Certificates & credentials control etc.
  • Lets , I have added some Image files in the existing Images folder of the project & created a new file called PhotoDataSource.cs.
  • PhotoDataSource.cs :

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using Windows.UI.Xaml.Data;

using Windows.UI.Xaml.Media;

using Windows.UI.Xaml.Media.Imaging;

using System.Xml.Linq;

using System.Net.Http;

namespace PhotoViewer

{

classPhotoItem : INotifyPropertyChanged

{

public event PropertyChangedEventHandler PropertyChanged;

protectedvoid OnPropertyChanged(string propertyName)

{

if (this.PropertyChanged != null)

{

this.PropertyChanged(this,

new PropertyChangedEventArgs(propertyName));

}

}

private PhotoCollection _collection;

public PhotoCollection Collection

{

get

{

returnthis._collection;

}

set

{

if (this._collection != value)

{

this._collection = value;

this.OnPropertyChanged(“Collection”);

}

}

}

private String _category = String.Empty;

public String Category

{

get

{

returnthis._category;

}

set

{

if (this._category != value)

{

this._category = value;

this.OnPropertyChanged(“Category”);

}

}

}

privateString _title = String.Empty;

publicString Title

{

get

{

returnthis._title;

}

set

{

if (this._title != value)

{

this._title = value;

this.OnPropertyChanged(“Title”);

}

}

}

privateString _description = String.Empty;

publicString Description

{

get

{

returnthis._description;

}

set

{

if (this._description != value)

{

this._description = value;

this.OnPropertyChanged(“Description”);

}

}

}

privateString _owner = String.Empty;

publicString Owner

{

get

{

returnthis._owner;

}

set

{

if (this._owner != value)

{

this._owner = value;

this.OnPropertyChanged(“Owner”);

}

}

}

privateString _dateTaken;

publicString DateTaken

{

get

{

returnthis._dateTaken;

}

set

{

if (this._dateTaken != value)

{

this._dateTaken = value;

this.OnPropertyChanged(“DateTaken”);

}

}

}

privateImageSource _image = null;

privateUri _imageBaseUri = null;

privateString _imagePath = null;

publicImageSource Image

{

get

{

if (_image == null && _imageBaseUri != null &&

_imagePath !=

null)

{

_image =

newBitmapImage(newUri(_imageBaseUri, _imagePath));

}

returnthis._image;

}

set

{

if (this._image != value)

{

this._image = value;

this._imageBaseUri = null;

this._imagePath = null;

this.OnPropertyChanged(“Image”);

}

}

}

publicvoid SetImage(Uri baseUri, String path)

{

_image =

null;

_imageBaseUri = baseUri;

_imagePath = path;

this.OnPropertyChanged(“Image”);

}

privatestring _url = string.Empty;

publicstring Url

{

get

{

returnthis._url;

}

set

{

if (this._url != value)

{

this._url = value;

this.OnPropertyChanged(“Url”);

}

}

}

}

classPhotoCollection : PhotoItem, IGroupInfo

{

publicObject Key

{

get { return Title; }

}

privateList<PhotoItem> _itemCollection = newList<PhotoItem>();

publicvoid Add(PhotoItem item)

{

_itemCollection.Add(item);

}

publicIEnumerator<Object> GetEnumerator()

{

return _itemCollection.GetEnumerator();

}

System.Collections.

IEnumerator

System.Collections.

IEnumerable.GetEnumerator()

{

return GetEnumerator();

}

}

classPhotoDataSource

{

publicList<PhotoCollection> GroupedCollections { get; privateset; }

privatevoid AddCollection(String category, String title,

String description, Uri baseUri, String imagePath)

{

var collection = newPhotoCollection();

collection.Category = category;

collection.Title = title;

collection.Description = description;

collection.SetImage(baseUri, imagePath);

GroupedCollections.Add(collection);

}

privatevoid AddItem(String category, String title, String description,

String owner, String dateTaken, Uri baseUri, String imagePath)

{

PhotoCollection lastCollection = GroupedCollections.LastOrDefault() as

PhotoCollection;

var item = newPhotoItem();

item.Category = category;

item.Title = title;

item.Description = description;

item.Owner = owner;

item.DateTaken = dateTaken;

item.SetImage(baseUri, imagePath);

item.Collection = lastCollection;

if (lastCollection != null)

{

lastCollection.Add(item);

}

}

public PhotoDataSource(Uri baseUri)

{

GroupedCollections = newList<PhotoCollection>();

AddCollection( “Pike Place Market”, ” Pike Place Market “,

“Pike Place Market is a public market overlooking the Elliott Bay waterfront in Seattle, Washington, United States. The Market opened August 17, 1907, and is one of the oldest continually operated public farmers’ markets in the United States. It is a place of business for many small farmers, craftspeople and merchants. Named after the central street, Pike Place runs northwest from Pike Street to Virginia Street, and remains one of Seattle’s most popular tourist destinations.”,

baseUri, “Images/PikePlaceMarket.jpg”);

AddItem(“Pike Place Market”, “Picture 1”,

“A picture of Pike Place Market”,

string.Empty, string.Empty,

baseUri, “Images/PikePlaceMarket.jpg”);

AddItem(“Pike Place Market”, “Picture 2”,

“A picture of Pike Place Market”,

string.Empty, string.Empty,

baseUri, “Images/PikePlaceMarket.jpg”);

AddItem( “Pike Place Market”, “Picture 3”,

“A picture of Pike Place Market”,

string.Empty, string.Empty,

baseUri, “Images/PikePlaceMarket.jpg”);

//AddPhotos(“Pike Place Market”, 1);

//AddPhotos(“Pike Place Market”, 2);

AddCollection( “Space Needle”, ” Space Needle “,

“The Space Needle is a tower in Seattle, Washington and is a major landmark of the Pacific Northwest region of the United States and a symbol of Seattle. Located at the Seattle Center, it was built for the 1962 World’s Fair. The Space Needle features an observation deck at 520 feet (160 m), and a gift shop with the rotating SkyCity restaurant at 500 feet (150 m).[5] From the top of the Needle, one can see not only the Downtown Seattle skyline, but also the Olympic and Cascade Mountains, Mount Rainier, Mount Baker, Elliott Bay and surrounding islands.”,

baseUri, “Images/SpaceNeedle.jpg”);

//AddPhotos(“Space Needle”, 1);

//AddPhotos(“Space Needle”, 2);

AddItem( “Space Needle”, “Picture 1”,

“A picture of the Space Needle”,

string.Empty, string.Empty,

baseUri, “Images/SpaceNeedle.jpg”);

AddItem( “Space Needle”, “Picture 2”,

“A picture of the Space Needle”,

string.Empty, string.Empty,

baseUri, “Images/SpaceNeedle.jpg”);

AddItem(“Space Needle”, “Picture 3”,

“A picture of the Space Needle”,

string.Empty, string.Empty,

baseUri, “Images/SpaceNeedle.jpg”);

AddItem( “Space Needle”, “Picture 4”,

“A picture of the Space Needle”,

string.Empty, string.Empty,

baseUri, “Images/SpaceNeedle.jpg”);

AddCollection( “Pioneer Square”, ” Pioneer Square “,

“Pioneer Square was once the heart of the city: Seattle’s founders settled there in 1852, following a brief six-month settlement at Alki Point on the far side of Elliott Bay. The early structures in the neighborhood were mostly wooden, and nearly all burned in the Great Seattle Fire of 1889. By the end of 1890, dozens of brick and stone buildings had been erected in their stead; to this day, the architectural character of the neighborhood derives from these late 19th century buildings, mostly examples of Richardsonian Romanesque.”,

baseUri,“Images/PioneerSquare.jpg”);

//AddPhotos(“Pioneer Square”, 1);

//AddPhotos(“Pioneer Square”, 2);

AddItem(“Pioneer Square”, “Picture 1”,

“A picture of Pioneer Square”,

string.Empty, string.Empty,

baseUri, “Images/PioneerSquare.jpg”);

AddCollection(“Snoqualmie Falls”, ” Snoqualmie Falls “,

“Snoqualmie Falls is a 268 ft (82 m) waterfall on the Snoqualmie River between Snoqualmie and Fall City, Washington, USA. It is one of Washington’s most popular scenic attractions, but is perhaps best known internationally for its appearance in the cult television series Twin Peaks. More than 1.5 million visitors come to the Falls every year, where there is a two acre (8,000 m²) park, an observation deck, and a gift shop.”,

baseUri, “Images/SnoqualmieFalls.jpg”);

//AddPhotos(“Snoqualmie Falls”, 1);

//AddPhotos(“Snoqualmie Falls”, 2);

AddItem(“Snoqualmie Falls”, “Picture 1”,

“A picture of Snoqualmie Falls”,

string.Empty, string.Empty,

baseUri, “Images/SnoqualmieFalls.jpg”);

AddItem(“Snoqualmie Falls”, “Picture 2”,

“A picture of Snoqualmie Falls”,

string.Empty, string.Empty,

baseUri, “Images/SnoqualmieFalls.jpg”);

AddItem( “Snoqualmie Falls”, “Picture 3”,

“A picture of Snoqualmie Falls”,

string.Empty, string.Empty,

baseUri, “Images/SnoqualmieFalls.jpg”);

AddItem(“Snoqualmie Falls”, “Picture 4”,

“A picture of Snoqualmie Falls”,

string.Empty, string.Empty,

baseUri, “Images/SnoqualmieFalls.jpg”);

AddCollection(“About Me”, ” About Me ““Hi,Myself Anindita Basak.Senior Software Engineer by role.”,

baseUri, “Images/me.jpg”);

AddItem(“About Me”, “About Me”,

“Hi,Myself Anindita Basak.Senior Software Engineer by profession.”,

string.Empty, string.Empty,

baseUri, “Images/me.jpg”);

AddItem(“About Me”, “About Me”,

“Hi,Myself Anindita Basak.Senior Software Engineer by profession.”,

string.Empty, string.Empty,

baseUri, “Images/me.jpg”);

}

}

}

  • Add the following code in DetailPage.xaml by commenting out the ContentPanel1,ContentPanel2,ContentPanel3:

<StackPanel x:Name=”ContentPanel1″ Style=”{StaticResource

PrimaryContentPanelStyle}”>

<TextBlock x:Name=”DetailTitle” Height=”74″ Style=”{StaticResource

LargeContentFontStyle}” Text=”{Binding Title}” />

<Grid x:Name=”ImageGrid” Width=”Auto” Margin=”0,8,0,0″

Background=”#FF3B3B3B” HorizontalAlignment=”Stretch” VerticalAlignment=”Top”>

<Image x:Name=”Image” Height=”300″ Margin=”0″ Stretch=”UniformToFill”

Source=”{Binding Image}” />

</Grid>

 

  • Lets check the PhotoViewer screen in Windows 8 Metro Style apps.

  • Next, Run the Metro Style Apps in Windows 8  Slate Simulator . Select it from VS 2011 developer Preview Debugging option pane.

 

Advertisements

About Anindita
Anindita Basak is working as Big Data Cloud Consultant in Microsoft. Worked in multiple MNCs as Developer & Senior Developer on Microsoft Azure, Data Platform, IoT & BI , Data Visualization, Data warehousing & ETL & of course in Hadoop platform.She played both as FTE & v- employee in Azure platform teams of Microsoft.Passionate about .NET , Java, Python & Data Science. She is also an active Big Data & Cloud Trainer & would love share her experience in IT Training Industry. She is an author, forum contributor, blogger & technical reviewer of various books on Big Data Hadoop, HDInsight, IoT & Data Science, SQL Server PDW & PowerBI.

3 Responses to Developing Windows 8 Metro Style Apps with GridView in XAML – Part I

  1. jservingo says:

    Hi Anindita

    Great blog!!

    I want to develop an app using the Grid Application. I copy and paste your code in a new project but I think that something is missing (maybe it was my mistake). Could you please email me your whole code (including the xaml) I thank you in advance. My email is jservingo@gmail.com Greetings Jorge

  2. Arun says:

    nice work, i tried to download and work on it, bt the solution file was not running properly, can u send me the sourse file??

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: