Create your first Windows 8 Grid App

After my last post about how to create your first windows 8 application and the different types of windows 8 applications its now the time to create your first app.

In this this post I’ll show the steps to create your first grid app

Open Visual Studio 2012 then create a new project and choose Visual C# and Windows Store then choose Grid App
Image

Then choose the name of your Project (Application) and press OK

now your project files were created and as mentioned in the last post the application is divided into 3 parts:

Assets

This folder contains all of the images that we will use in the application and it comes with the template images and you can add the images you want later.

Image

 

DataModel

This folder contains all of the data that will be used in the application and a template file is created in it named SampleDataSource.cs that we will modify later to add the application data

Image

 

App Pages

Which is the design of the application itself and in the Grid App consists of 3 XAML Pages which will be illustrated with more details.

Image

So now we have 3 XAML Pages that we need to change its Data, Images and Design first all of the information (Data) is found at the SampleDataSource.cs where the Data is divided into group objects and each group has items objects inside it.

Each Group object takes uniqueId , title, subtitle, imagePath and description in its parameter where the

uniqueId is a string that is Unique for every group

title is the title of the group which has a default value of “Group: Title 1” for group1 as an example and can be changed later

subtitle is the group subtitle which has a default value of “Group: Subtitle 1” for group 1 as an example and can be changed later

imagePath is the path for the image of the group that can be changed later

description is the group description that can be changed later 

Image

 

this is an example of the group code that is generated in the sampleDataScource.cs file so what to do with it is simple as we have 5 strings let’s leave the uniqueID as it is and we have 4 strings that we can change the title, subtitle, imagePath which will be changed when we add images to the Assets folder and the description of the group.

the Item object is the same parameters as the group but it has 2 extra parameters

content which has the information that the item talks about and is a string also.

group which takes a group object its to know which group this item will be added.

Image

 

the sample code shows Group-1-Item-1 as an example

In each item we have 7 parameters 6 strings that we will change 5 of them as the first one is the uniqueId, we’ll change the title, the subtitle, the imagePath for the image that we will add later in the assets folder, the description and the content of the item.

however by default the SampleDataSource.cs has 6 groups generated each of them has many items so according to the application you are developing change the items/groups you want and delete the items/groups you don’t need.

Now add the images that will be used in the application by right clicking the Assets folder and choose add then Existing Item and the following window will appear

Image

 

then navigate to the folder you have the images in and select them all then press Add

now they’ll appear in the solution under the Assets folder and you can easily add them to the item/group by changing the imagePath by the image URI.

Now we have the design which is 3 XAML Pages

GroupedItemsPage.xaml which has all of the items grouped together in grid viewImage

GroupDetailPage.xaml which has the description of the group and its image the items in each group with their description and images

Image

 

ItemDetailPage.xaml which has the item title, item subtitle, image and content.

Image

 

each of these pages are written in XAML code however if you are nor familiar with XAML you can  just use the designer view which is easier just select the object you want to change its properties and in the properties window which is below the solution explorer the properties of the object appears so that you can modify them easily Image

For example I selected the Group title in order to change its color so I’ll just select the brush and change the color to red

Image

 

and now we can change any object in the XAML pages using the same method including the Background of the page

after editing the application files press F5 to build and run it

Image

 

This is the output of the sample run

4 thoughts on “Create your first Windows 8 Grid App

  1. Just desire to say your article is as surprising. The clearness for your post is just spectacular and that i could assume you are knowledgeable in this subject. Fine along with your permission allow me to snatch your RSS feed to keep updated with imminent post. Thank you 1,000,000 and please keep up the enjoyable work.

  2. Thank you very very match for this article but i want know how we can add other pages on this Grid app because when i add page on this in Grid app i found page has add in all item.

    • well to add a new page in a grid app its simple just right click your C# Project from the solution explorer and choose Add > New Item then choose the type of page you want to add 🙂

      • thank you very much for your answer, in fact I develop an application in C # and metro xaml subtitle stagaire management to create the template I chose grid app I Update It and all good but the problem exists in my page itemdétail page. my supervisor suggested I make this page a AppBar for an item group but the problem when I make a AppBar in the first item that appears in the flipeview ,AppBar displays all other items in the group, and n ‘is not only in the first item.I want just to know what the app Grid is not used in the application of multipages? if not how can I resolve ca please?
        and thank you in advance.

Leave a Reply

Fill in your details below or click an icon to log in:

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