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
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:
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.
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
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.
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
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.
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
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 view
GroupDetailPage.xaml which has the description of the group and its image the items in each group with their description and images
ItemDetailPage.xaml which has the item title, item subtitle, image and content.
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
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
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
This is the output of the sample run