Making a Grid App For Windows 8

In this article, I would like to share my knowledge about developing a grid app for Windows 8.

How to make a grid app for Windows 8

In the past few days I have developed apps for Windows 8. I have developed many apps and many of them are Windows Store apps. So I thought I should share my knowledge about developing a grid app for Windows 8. So to begin we will need a Windows 8 OS and Visual Studio 2012. We will be doing our coding in C#.

Step 1

Open Visual Studio 2012 and click on start new project. Then give the name of the project.

Grid-app-in-Window8.jpg

Step 2

Then go to Solution Explorer and open GroupDeatailPage.xaml, GroupedItemPage.xaml and ItemDetailPage.xaml. Now go to the data model in Solution Explorer and open C#sampleDataSource.cs.

Grid-app-in-Window82.jpg

Step 3

Now start coding in sampleDataSource.cs. What you have to do is just edit in sampleDataSource.cs; see:

var group1 = new SampleDataGroup("Group-1",

 "grid app","windows 8  ","Assets/DarkGray.png",

"this is a simple data app"


Step 4

Now start editing in the group items of the grid app; see:

group1.Items.Add(new SampleDataItem("Group-1-Item-1",

"your first Item","first Item's subtitle","Assets/LightGray.png",

 "description of first Item","content of first Item ",

group1));


Grid-app-in-Window83.jpg

Step 5

How to add images. Adding images is also simple. You have to add images in assets. Just click on "assets" in the Solution Explorer and click on "add from existing images".

Grid-app-in-Window84.jpg

Now, edit in code "Assets/image1.jpg".

Step 6

When you are all done, then click on "local machine" in debug mode.

Grid-app-in-Window85.jpg
                                                                                                 
Now, you are ready with your app. You can now publish it in the Windows Store. You can also change the background color of your app using the following.

Step 1

Open the page you want to change the color; for example if you want to change the background of GroupDeatailPage.xaml then click on the GroupDeatailPage.xaml in Solution Explorer and click on open in blend.

Step 2

After blend is open then click on "grid" in the left part in "objects and timline".

Grid-app-in-Window86.jpg

Step 3

A properties block will appear in the right side. This block will contain many colors. Choose any color from these colors.

Grid-app-in-Window87.jpg

Step 4

Debug your code.
 
In this way you can make your own data app for Windows 8 and can publish it in the Windows Store.