Getting started with Metro Style applications.

Hi All,
          Last days i got a chance to attend a Microsoft training for windows 8 development so i decided to share my learning with the world, In this blog ill start from installation of software and finally lead you to make a sample application.

         It’s better to install Windows 8 Consumer preview in a virtual environment as down gradation is not yet officially announced by Microsoft (or some complex method is there). Restore disk before installation or some factory setting might work. You need to install Virtual Box or VM ware workstation 8.0 to run in virtual environment.  The setup of VM ware workstation can be downloaded from www.vmware.com.

      A detailed link of making the virtual machine for windows 8 can be found here.

     You can get windows 8 developer preview from Windows 8 Consumer Preview as well as Visual Studio 11 Beta Express for Windows 8. 


     Once windows 8 and VS 2011 is installed lets start the development process step by step. 



     Start Visual Studio and use the File - New Project command to create a new Visual C# project named “ContosoCookbook.” Be sure to select “Windows Metro Style” from the list of Visual C# templates, and to select “Grid Application” from the list of template types

 

Select Start Debugging from the Debug menu (or simply press F5) to launch the application in the debugger. The application will start and you’ll see the screen shown in Figure 2. This is the application’s home page or start page

After this you can click on items and categories and grid style application will handle all for you. after this lets move to the application manifest file and to do that double-click Package.appxmanifest to open the application manifest.

 

Here you can set the application icons, titles and the deceives that your application might require. 

You will find a folder name DataModel in the solution explorer, there you can have you own data source or you can modify the sample data source, which can fetch data from any JSON/XML services or data file. 

Open the SampleDataSource class from DataModel folder and in constructor you can fetch the JSON/XML file to populate it, below are two functions to set the source from a local file and a remote location. 

  

 public async void LoadRemoteDataAsync()  
     {  
       // Retrieve data from remote location  
       var client = new HttpClient();  
       client.MaxResponseContentBufferSize = 1024 * 1024; // Read up to 1 MB of data  
       var response = await client.GetAsync(new Uri("URL to fetch the JSON/XML data"));  
       var result = await response.Content.ReadAsStringAsync();  
       // Parse the JSON recipe data  
       var recipes = JsonArray.Parse(result.Substring(1, result.Length - 1));  
       // ADD to Datasource Group after parsing as sample data source did.   
     }  
     public async void LoadLocalDataAsync()  
     {  
       // Retrieve data from JSON.txt  
       var file = await Package.Current.InstalledLocation.GetFileAsync("Data\\JSON.txt");  
       var stream = await file.OpenReadAsync();  
       var input = stream.GetInputStreamAt(0);  
       var reader = new DataReader(input);  
       uint count = await reader.LoadAsync((uint)stream.Size);        
       var result = reader.ReadString(count);  
       // Parse the JSON recipe data  
       var recipes = JsonArray.Parse(result.Substring(1, result.Length - 1));  
       // ADD to Datasource Group after parsing as sample data source did.   
     }  

If you have created a new Data source then you need to modify the calls in following classes accordingly.

In GroupDetailPage.xaml.cs update the var group conversion with you own.

     protected override void OnNavigatedTo(NavigationEventArgs e)  
     {  
       var group = (YOURDataGroup)e.Parameter;  
       this.DefaultViewModel["Group"] = group;  
       this.DefaultViewModel["Items"] = group.Items;  
     }  

Also apply the same to GroupedItemsPage.xaml.cs and ItemDetailPage.xaml.cs, which would lead you to the development of you first sample application.

hope you had a great time working with windows 8 Metro style applications.

Happy coding.