Store and Retrieve JSON data from Local storage in Windows Store App

In this tutorial step by step we will learn to save and Retrieve JSON data in Local folder of Windows Store App.

Follow following steps to save and retrieve JSON data in local storage.

Step 1

Right click on project and add Nuget package and add package of Json.NET.

image

Step 2

Let us assume that we need to store Student information in local storage. For that I have created a Student class.

 


public class Student
    {
        public string Name { get; set; }
        public string City { get; set; }
        public string Grade { get; set; }
    }


Step 3

Before saving data we need to serialize the class into JSON. We will serliaze that using JSON.net library. After serializing object into JSON we will save data in local folder of windows store application.

 


            string jsonContents = JsonConvert.SerializeObject(s);           
           StorageFolder localFolder = ApplicationData.Current.LocalFolder;
           StorageFile textFile = await localFolder.CreateFileAsync("a.txt",CreationCollisionOption.ReplaceExisting);
            using (IRandomAccessStream textStream = await textFile.OpenAsync(FileAccessMode.ReadWrite))
            {
        
                using (DataWriter textWriter = new DataWriter(textStream))
                {
                    textWriter.WriteString(jsonContents);
                    await textWriter.StoreAsync();
                }
            }

        }


S is object of class Student. We are reading student properties from various textboxes.

 


            Student s = new Student
            {
                Name =txtName.Text,
                City = txtCity.Text,
                Grade =txtGrade.Text
            };


In above code snippet,

  • We are saving file in application local folder
  • Data is saved in file a.txt
  • Opening file in asynchronous way for read write operation using IRandomAccessStream
  • Using DataWriter to write data in file

In these four steps data can be saved in local folder of Windows Store Application.

Step 4

To read JSON data back we need to first read data from local storage and then deserliaze that to object from JSON. Reading data is very simple.

  • Open local folder
  • Load file asynchronously
  • Open file asynchronously to read the streams
  • Using DataReader reading stream
  • Convert JSON to object
StorageFolder localFolder = ApplicationData.Current.LocalFolder;
           StorageFile textFile = await localFolder.GetFileAsync("a.txt");
                using (IRandomAccessStream textStream = await textFile.OpenReadAsync())
                {
                       
                    using (DataReader textReader = new DataReader(textStream))
                    {                                            
                        uint textLength = (uint)textStream.Size;
                        await textReader.LoadAsync(textLength);
                        string jsonContents = textReader.ReadString(textLength);                      
                        Student s = JsonConvert.DeserializeObject<Student>(jsonContents);
                        txtName1.Text = s.Name;
                        txtCity1.Text = s.City;
                        txtGrade1.Text = s.Grade;
                       
                    }
                }

In above code snippet,

  • We are opening local folder
  • Opening file asynchronously
  • Reading stream in IRandonAccessStream
  • Reading data using DataReader
  • DeSeralizing JSON to object using JsonConver

By following above steps you can save and retrieve data in local folder of Windows Store application. I hope you find this article useful.

Step by Step working with Windows Azure Mobile Service Data in XAML based Windows Store Apps

In this post we will take a look on working with Windows Azure Mobile Service in XAML based Windows Store Application. We will follow step by step approach to learn goodness of Windows Azure Mobile Service. In first part of post we will configure Windows Azure Mobile Service in Azure portal. In second part of post we will create a simple XAML based Windows Store application to insert records in data table. This is first post of this series and in further posts we will learn other features of Windows Azure Mobile Services.

Configure Windows Azure Mobile Service on Portal

Step 1

Login to Windows Azure Management Portal here

Step 2

Select Mobile Services from tabs in left and click on CREATE NEW MOBILE SERVICE

image

Step 3

In this step provide URL of mobile service. You have two choice either to create mobile service in existing database or can create a new database. Let us go ahead and create a new database. In DATABSE drop down select option of Create New SQL database instance. Select SUBSCRIPTION and REGION from drop down as well.

image

Step 4

On next screen you need to create database. Choose either existing database server or create a new one. You need to provide credential to connect with database servers.

image

Step 5

After Successful creation of mobile services you need to select platform. Let us go ahead and choose Windows Store as platform

image

Step 6

After selecting platform click on Data in menu. After selecting Data click on ADD A TABLE

image

Next you need to provide Table name. You can provide permission on table. There are three options available

  1. Anybody with Application Key
  2. Only Authenticated Users
  3. Only Scripts and Admins

Let us leave default permission level for the table.

image

Step 7

Next click on tables. You will be navigated to table dashboard. When you click on Columns you will find one default created column id. This column gets created automatically. This column must be there in Windows Azure Mobile Service table.

image

On enabling of dynamic schema when you will add JSON objects from client application then columns will get added dynamically.

Create Windows Store Application in XAML

Very first you need to install Windows Azure SDK for Windows Phone and Windows 8.

image

After installing create a Windows Store Application by choosing Blank App template.

image

Before we move ahead to create Windows Store App let us go back to portal and mange App URL and key. You need key and application URL to work with Windows Azure Mobile Services from Windows Store application. You will find key and application URL at the portal.

image

Now go ahead and add following namespaces on MainPage.xaml.cs


using Microsoft.WindowsAzure.MobileServices;
using System.Runtime.Serialization;

Next you need to create entity class representing table from the Windows Azure Mobile Service. Let us create entity class as following. We are creating entity class TechBloggers.


public class TechBloggers
 {
 public int id { get; set; }
 [DataMember(Name="name")]
 public string Name { get; set; }
 [DataMember(Name = "technology")]
 public string Technology { get; set; }

}

After creating entity class go ahead and global variables.


MobileServiceClient client;
 IMobileServiceTable<TechBloggers> bloggerstable;

Once global variable is defined in the constructor of page you need to create instance of MobileServiceClient and MobileServiceTable. Let us go ahead and create that in constructor of the page.


public MainPage()
 {
 this.InitializeComponent();
 MobileServiceClient client = new MobileServiceClient("https://youappurl", "appkey");
 bloggerstable = client.GetTable<TechBloggers>();

 }

Now let us go back and design app page. On XAML let us put two textboxes and one button. On click event of button we will insert bloggers in the table.


<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}" >
 <Grid.RowDefinitions>
 <RowDefinition Height="100" />
 <RowDefinition Height="100" />
 <RowDefinition Height="100" />
 </Grid.RowDefinitions>
 <StackPanel Grid.Row="0" Orientation="Horizontal" Margin="40,40,0,0">
 <TextBlock Text="Name" FontSize="40" />
 <TextBox x:Name="txtName" VerticalAlignment="Top" Width="400" />
 </StackPanel>
 <StackPanel Orientation="Horizontal" Grid.Row="1" Margin="40,40,0,0">
 <TextBlock Text="Technology" FontSize="40" />
 <TextBox x:Name="txtTechnology" VerticalAlignment="Top" Width="400" />
 </StackPanel>

 <Button Grid.Row="2" x:Name="btnInsert" Click="btnInsert_Click_1" Content="Insert Record" Height="72" Width="233" Margin="248,42,0,-14" />

 </Grid>

Application will look like as given in below image. I know this is not best UI. Any way creating best UI is not purpose of this post

image

On click event of button we can insert a record to table using Windows Azure Mobile Services using following code


private void btnInsert_Click_1(object sender, RoutedEventArgs e)
 {

TechBloggers itemtoinsert = new TechBloggers
 {
 Name = txtName.Text,
 Technology = txtTechnology.Text
 };

InserItem(itemtoinsert);

}

InsertItem function is written like following,

private async void InserItem(TechBloggers itemtoinsert)
 {

await bloggerstable.InsertAsync(itemtoinsert);

 }

On click event of button you can insert records in Windows Azure Mobile Service data table. To verify inserted records browse to portal and click on table.

image

In further posts we will learn update, delete and view of the records. I hope you find this post useful. Thanks for reading.

Binding Image with Picture Library Images in Windows Store Application using FileOpenPicker

In this post we will take a look on binding image with Picture Library Images in Windows Store. In this post we will follow following steps

  • User will click on a button
  • On button click user will be select an image from Picture Library
  • Selected image will be bind to image control on the page

Application will behave as following,

image

In XAML based Windows Store Application object of FileOpenPicker allows us to choose files from Picture Library and Document Library. Essentially we will create instance of FileOpenPicker on click event of button and then restrict user to select only images. Once user has selected image, we will bind that Image to image control on the page.

Let us start with designing the page. Page design is very simple with button, image control and two text blocks.


<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
 <Grid.RowDefinitions>
 <RowDefinition Height="100" />
 <RowDefinition Height="*" />
 </Grid.RowDefinitions>
 <TextBlock Text="Select Photo from Picture Library" Margin="15,20,0,0" FontSize="40"/>
 <StackPanel Orientation="Horizontal" Grid.Row="1">
 <Button x:Name="btnFilePickerOpen" Click="btnFilePickerOpen_Click_1" Content="Select Image" Width="303" Height="97" Margin="50,50,0,403"/>
 <StackPanel Orientation="Vertical" Margin="50,50,0,0">
 <Image x:Name="imgSelected" />
 <TextBlock x:Name="txtSelectedImagePath" Margin="30,30,0,0" FontSize="30" />
 </StackPanel>
 </StackPanel>
 </Grid>

On click event of button we will create object of FileOpenPicker and allow user to select an image. We need to follow following steps

  • Create object of FileOpenPicker
  • Select ViewMode. There are two ViewModes available Thumbnail and List. Let us choose Thumbnail for our demo.
  • Provide SuggestedStartLocation. Let us select PicturerLibrary since we want to choose an image. Other options are VideosLibrary, DocumetsLibrary etc.
  • Apply filter. We can apply filters on type of files we will allow user to choose. We are adding file types jpg,jpeg and png.
  • In last step asynchronously we are calling PickSingleFileAsync function and taking reference of selected file in StorageFile.
FileOpenPicker openPicker = new FileOpenPicker();
 openPicker.ViewMode = PickerViewMode.Thumbnail;
 openPicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
 openPicker.FileTypeFilter.Add(".jpg");
 openPicker.FileTypeFilter.Add(".jpeg");
 openPicker.FileTypeFilter.Add(".png");
 StorageFile file = await openPicker.PickSingleFileAsync();
 if (file != null)
 {

 }
 else
 {

 }

On successful selection of file we need to convert that in image stream and bind that to image control. We are creating instance of BitmapImage and reading file stream in that. After successful reading setting bitmap image as source of image control.


if (file != null)
 {
 txtSelectedImagePath.Text = file.Name;
 var filestream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read);
 BitmapImage imagetobind = new BitmapImage();
 imagetobind.SetSource(filestream);
 imgSelected.Source = imagetobind;

 }
 else
 {
 txtSelectedImagePath.Text = "Some problem fetching file ";
 }

&nbsp;

This is what all we need to do to fetch an image from picture library and bind it to image control. Full source code of button click is given below,


private async void btnFilePickerOpen_Click_1(object sender, RoutedEventArgs e)
 {
 FileOpenPicker openPicker = new FileOpenPicker();
 openPicker.ViewMode = PickerViewMode.Thumbnail;
 openPicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
 openPicker.FileTypeFilter.Add(".jpg");
 openPicker.FileTypeFilter.Add(".jpeg");
 openPicker.FileTypeFilter.Add(".png");
 StorageFile file = await openPicker.PickSingleFileAsync();
 if (file != null)
 {
 txtSelectedImagePath.Text = file.Name;
 var filestream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read);
 BitmapImage imagetobind = new BitmapImage();
 imagetobind.SetSource(filestream);
 imgSelected.Source = imagetobind;

 }
 else
 {
 txtSelectedImagePath.Text = "Some problem fetching file ";
 }
 }

Now when you run application you will able to choose an image from Picture Library and bind it to image control.

image

I hope you find this post useful. Thanks for reading.

Create Flickr Photo Search Windows Store App in XAML

In this post we will create application shown in below video. Essentially we will see how we can work with

  • GridView and ListView in Windows 8 Application
  • Consuming REST Service in Windows 8 Application
  • Share Contract in Windows 8 Application

To create on Flickr based application you need API Key from Flickr. You can apply for API key here . You need to fill the required information and click on Submit button to create API key. We need this API key in application. You need to submit App information in order to generate key. After submitting app information you will be navigated to App Garden and there you will find APP key and secret key as given in below image.

image

Very first create a Windows Store Application by choosing blank App template. Let us start with initializing variable. To search photos Flickr provides us REST end point. Globally we are initializing Flickr app key we created in previous step and constructing an URL to search on Flickr with search parameter. We are appending app key and search text in URL.


private HttpClient httpClient;
 private string key = "51fc5b3802c6ed36924ed3d6a8cc085a";
 private string flickrSearchUrl = "http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key={0}&text={1}";

Now switch to MainPage.xaml to design application. Very first let us divide content Grid in three rows. In second row we will put text box and button to search Flickr and in third row images returned will be displayed. First row contains header message of application.

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

<Grid.RowDefinitions>
 <RowDefinition Height="100" />
 <RowDefinition Height="100" />
 <RowDefinition Height="700" />
 </Grid.RowDefinitions>

 </Grid>

Next let us put header message and controls. In below XAML we are creating following controls

  • Creating TextBlock in first to display application header message.
  • Creating StackPanel in second row with orientation horizontal.
  • In StackPanel creating TextBlock to get user input to search Flickr.
  • Creating a Button in StackPanel to get user input to search on Flickr.
<TextBlock Text="Flickr Search Application"
 Margin="30"
 FontSize="36" />
 <StackPanel Grid.Row="1" Orientation="Horizontal">
 <TextBox x:Name="txtSearch" Width="200"
 VerticalAlignment="Center"
 HorizontalAlignment="Center"
 Margin="30"/>
 <Button x:Name="btnSearch"
 Content="Search on Flickr"
 Height="40" />
 </StackPanel>

Now let us create output GridView in third row. In this GridView we will display returned images from Flickr. In GridView we are creating ItemTamplate and putting an Image control in that. Image control is been bind to ImageUrl property. We will create class containing this property in later steps.

 <GridView x:Name="grdFlickrImageOutput" Grid.Row="2" Margin="30,0,0,0" >
 <GridView.ItemTemplate>
 <DataTemplate>
 <Image Width="300" Height="300" Source="{Binding ImageUrl}"></Image>
 </DataTemplate>
 </GridView.ItemTemplate>
 </GridView>

We have created design for the application. Now let us go ahead and create a class representing Flickr photo. This class will contain all the properties required to fetch an image from Flickr. Last property ImageUrl is of type URI and we are constructing it using other properties of Flickr Image


using System;

namespace debugmodeflickrsearch
{
 public class FlickrPhoto
 {
 public string ImageId { get; set; }
 public string FarmId { get; set; }
 public string ServerId { get; set; }
 public string Secret { get; set; }
 public string Title { get; set; }

public Uri ImageUrl
 {
 get
 {
 return new Uri(string.Format("http://farm{0}.static.flickr.com/{1}/{2}_{3}.jpg", FarmId, ServerId, ImageId, Secret));
 }
 }
 }
}

On click event of button we need to make a call to Flickr and get the response. To call Flickr REST API we are using HttpClient. We are making async call to get the response from Flickr. After getting reponse ParseIamges function is called to parse the response.


async void btnSearch_Click(object sender, RoutedEventArgs e)
 {
 httpClient = new HttpClient();
 HttpResponseMessage response = await httpClient.GetAsync(String.Format(flickrSearchUrl, key,txtSearch.Text));
 ParseImages(response);
 }

We will parse response using LINQ to XML. After parsing response is set as ItemSource of output GridView.


private async void ParseImages(HttpResponseMessage response)
 {
 XDocument xml = XDocument.Parse(await response.Content.ReadAsStringAsync());
 var returnedphotos = from results in xml.Descendants("photo")
 select new FlickrPhoto
 {
 ImageId = results.Attribute("id").Value.ToString(),
 FarmId = results.Attribute("farm").Value.ToString(),
 ServerId = results.Attribute("server").Value.ToString(),
 Secret = results.Attribute("secret").Value.ToString(),
 Title = results.Attribute("title").Value.ToString()
 };

grdFlickrImageOutput.ItemsSource = returnedphotos;
 }

Now let us go ahead and run application. We should able to search Flickr for images.

clip_image002

Now we want to share photo we like on social media or in a mail. We can achieve that using Windows 8 Share Contract. Very first let us go ahead and add itemclick event to output GridView. After adding event output GridView will get modified as following


<GridView x:Name="grdFlickrImageOutput" Grid.Row="2" Margin="30,0,0,0"
 IsItemClickEnabled="True" ItemClick="grdFlickrImageOutput_ItemClick_1"
 >
 <GridView.ItemTemplate>
 <DataTemplate>
 <Image Width="300" Height="300" Source="{Binding ImageUrl}"></Image>
 </DataTemplate>
 </GridView.ItemTemplate>
 </GridView>

&nbsp;

Next go ahead and define following variable globally,

 private string strTitleToShare = "Debugmode Flickr Photo Search App";
 private string strDescriptionToShare = "Sharing from Debugmode Flickr Photo Search App";
 private string strsharedText = string.Empty;

In constructor of the page create instance of DataTransferManager and add event for DataRequested.


DataTransferManager manager = DataTransferManager.GetForCurrentView();
 manager.DataRequested += manager_DataRequested;

Now we need to write code in DataRequested event to share text from application. In below code we are creating instance of DataRequest and setting Title , Description and Data to share.

void manager_DataRequested(DataTransferManager sender, DataRequestedEventArgs args)
 {
 DataRequest request = args.Request;
 request.Data.Properties.Title = strTitleToShare;
 request.Data.Properties.Description = strDescriptionToShare;
 request.Data.SetText(strsharedText);
 }

Now we need to handle item selection in GridView. When user will select a particular photo we will construct text to be shared with URL of photo. We can do this as following,


private void grdFlickrImageOutput_ItemClick_1(object sender, ItemClickEventArgs e)
 {
 FlickrPhoto selectedPhoto = e.ClickedItem as FlickrPhoto;
 var urt = selectedPhoto.ImageUrl;
 strsharedText= "Hey look at this photo "+urt+" I loved it #CSharpCornerMvpSummit #Demo" ;
 DataTransferManager.ShowShareUI();
 }

Now go ahead and run the application. You should able to search photo from Flickr and share them using the apps.

image

Below find full source code of above discussion.

Mainpage.xaml


<Page
 x:Class="debugmodeflickrsearch.MainPage"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:local="using:debugmodeflickrsearch"
 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 mc:Ignorable="d">

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

<Grid.RowDefinitions>
 <RowDefinition Height="100" />
 <RowDefinition Height="100" />
 <RowDefinition Height="700" />
 </Grid.RowDefinitions>
 <TextBlock Text="Flickr Search Application"
 Margin="30"
 FontSize="36" />
 <StackPanel Grid.Row="1" Orientation="Horizontal">
 <TextBox x:Name="txtSearch" Width="200"
 VerticalAlignment="Center"
 HorizontalAlignment="Center"
 Margin="30"/>
 <Button x:Name="btnSearch"
 Content="Search on Flickr"
 Height="40" />
 </StackPanel>
 <GridView x:Name="grdFlickrImageOutput" Grid.Row="2" Margin="30,0,0,0"
 IsItemClickEnabled="True" ItemClick="grdFlickrImageOutput_ItemClick_1"
 >
 <GridView.ItemTemplate>
 <DataTemplate>
 <Image Width="300" Height="300" Source="{Binding ImageUrl}"></Image>
 </DataTemplate>
 </GridView.ItemTemplate>
 </GridView>

 </Grid>
</Page>

Mainpage.xaml.cs


using System;
using System.Linq;
using System.Net.Http;
using System.Xml.Linq;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;
using Windows.ApplicationModel.DataTransfer;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238

namespace debugmodeflickrsearch
{
 /// <summary>
 /// An empty page that can be used on its own or navigated to within a Frame.
 /// </summary>
 public sealed partial class MainPage : Page
 {
 private string strTitleToShare = "Debugmode Flickr Photo Search App";
 private string strDescriptionToShare = "Sharing from Debugmode Flickr Photo Search App";
 private string strsharedText = string.Empty;
 private HttpClient httpClient;
 private string key = "51fc5b3802c6ed36924ed3d6a8cc085a";
 private string flickrSearchUrl = "http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key={0}&text={1}";

public MainPage()
 {
 this.InitializeComponent();
 DataTransferManager manager = DataTransferManager.GetForCurrentView();
 manager.DataRequested += manager_DataRequested;
 btnSearch.Click += btnSearch_Click;
 }

void manager_DataRequested(DataTransferManager sender, DataRequestedEventArgs args)
 {
 DataRequest request = args.Request;
 request.Data.Properties.Title = strTitleToShare;
 request.Data.Properties.Description = strDescriptionToShare;
 request.Data.SetText(strsharedText);
 }

&nbsp;

async void btnSearch_Click(object sender, RoutedEventArgs e)
 {
 httpClient = new HttpClient();
 HttpResponseMessage response = await httpClient.GetAsync(String.Format(flickrSearchUrl, key,txtSearch.Text));
 ParseImages(response);
 }

private async void ParseImages(HttpResponseMessage response)
 {
 XDocument xml = XDocument.Parse(await response.Content.ReadAsStringAsync());
 var returnedphotos = from results in xml.Descendants("photo")
 select new FlickrPhoto
 {
 ImageId = results.Attribute("id").Value.ToString(),
 FarmId = results.Attribute("farm").Value.ToString(),
 ServerId = results.Attribute("server").Value.ToString(),
 Secret = results.Attribute("secret").Value.ToString(),
 Title = results.Attribute("title").Value.ToString()
 };

grdFlickrImageOutput.ItemsSource = returnedphotos;
 }

/// <summary>
 /// Invoked when this page is about to be displayed in a Frame.
 /// </summary>
 /// <param name="e">Event data that describes how this page was reached. The Parameter
 /// property is typically used to configure the page.</param>
 protected override void OnNavigatedTo(NavigationEventArgs e)
 {
 }

private void grdFlickrImageOutput_ItemClick_1(object sender, ItemClickEventArgs e)
 {
 FlickrPhoto selectedPhoto = e.ClickedItem as FlickrPhoto;
 var urt = selectedPhoto.ImageUrl;
 strsharedText= "Hey look at this photo "+urt+" I loved it #CSharpCornerMvpSummit #Demo" ;
 DataTransferManager.ShowShareUI();
 }
 }
}

In this way we can create a Flickr Photo Search App for Windows Store. I hope you find this post useful. Thanks for reading.

Isolated Storage Helper For C# and XAML based Metro Application

This post and helper class is based on work of Jamie Thomson . I thank him lot for that.

Why to use Metro Application Isolated Storage Helper?

This helper class helps you to perform Read,Write and Delete of structured data in Isolated storage folders.

How to use this?

Download Metro Application Isolated Storage Helper from here

You have a class Student



public class Student
    {
        public string Name { get; set; }
        public int RollNumber { get; set; }
    }


You want to save object of Student then you can save it in Local Folder of isolated storage as below


Student objStudent = new Student { Name = "DJ ", RollNumber = 1 };
            var objectStorageHelper = new StorageHelper<Student>(StorageType.Local);            
            objectStorageHelper.SaveASync(objStudent,"abc");



And you can read back Student from isolated storage as below



public async void ReadData()
        {            
            var objectStorageHelper = new StorageHelper<Student>(StorageType.Local);           
            Student objStudent = await objectStorageHelper.LoadASync("abc");
            
        }


Abc is name of the file. If you want to store List<Student> then you can do that as following,



List<Student> lstStudent = new List<Student>()
                                        {new Student { Name = "DJ ", RollNumber = 1 },
                                         new Student { Name = "debugmode", RollNumber = 2 }
                                        };

            var objectStorageHelper = new StorageHelper<List<Student>>(StorageType.Local);
            objectStorageHelper.SaveASync(lstStudent, "abc");



You can read List<Student> from local folder of isolated storage as following



public async void ReadData()
        {            
            var objectStorageHelper = new StorageHelper<List<Student>>(StorageType.Local);           
            List<Student> lstStudent = await objectStorageHelper.LoadASync("abc");
            foreach (var r in lstStudent)
            {
                string n = r.Name;
            }
        }




Background

I was working with storing and retrieving structured data in Isolated Storage. While Binging I came across nicely written Generic Object Storage Helper for WinRT . This is written by Jamie Thomson . When I tried using this utility I came across an exception. I tried to store object of Student as following.


private void btnSaveData_Click_1(object sender, RoutedEventArgs e)
        {
            Student objStudent = new Student { Name = "Hary ", RollNumber = 1 };
            var objectStorageHelper = new ObjectStorageHelper<Student>(StorageType.Local);            
            objectStorageHelper.SaveASync(objStudent);
        }

But while running the program I came across exception as below,

image

After inspecting I found that library is written in Developer Preview and few API has been changed in Consumer Preview. Thankfully Jamie Thomson has put the source code on the CodePlex also. A big thank to him for the same. Rather than adding DLL and working with API, I copied and pasted code in my program and started to debug that.

First changes in API from DP to CP was that there were no TryMoveToRecycleBin in StorageDeleteOption enum

image

Now StorageDeleteOption enum contains only two values as below,

image

So I replaced above line of code as below,

image

The Second changes from DP to CP I found was removal of OpenWrite and OpenRead method from IRandomAcccessStream interface

image

Where readStream is defined as below,

image

And OpenWrite has been replaced with AsStreamForWrite

image

I have modified code to explicitly take filename as well. After these changes have been done Code was ready to be used in Consumer Preview. Updated helper class code is as following,

 



     public enum StorageType
    {
        Roaming, Local, Temporary
    }

    public class ObjectStorageHelper<T>
    {
        private ApplicationData appData = Windows.Storage.ApplicationData.Current;
        private XmlSerializer serializer;
        private StorageType storageType;

        
        public ObjectStorageHelper(StorageType StorageType)
        {
            serializer = new XmlSerializer(typeof(T));
            storageType = StorageType;
        }

        public async void DeleteASync(string FileName)
        {
            FileName = FileName + ".xml";
            try
            {
                StorageFolder folder = GetFolder(storageType);

                var file = await GetFileIfExistsAsync(folder, FileName);
                if (file != null)
                {
                    await file.DeleteAsync(StorageDeleteOption.PermanentDelete);
                }
            }
            catch (Exception)
            {
                throw;
            }
        }

        public async void SaveASync(T Obj,string FileName)
        {

            FileName = FileName + ".xml";
            try
            {
                if (Obj != null)
                {
                    StorageFile file = null;
                    StorageFolder folder = GetFolder(storageType);
                    file = await folder.CreateFileAsync(FileName, CreationCollisionOption.ReplaceExisting);

                    IRandomAccessStream writeStream = await file.OpenAsync(FileAccessMode.ReadWrite);
                    Stream outStream = Task.Run(() => writeStream.AsStreamForWrite()).Result;
                    serializer.Serialize(outStream, Obj);
                }
            }
            catch (Exception)
            {
                throw;
            }
        }
        public async Task<T> LoadASync(string FileName)
        {
            FileName = FileName + ".xml";
            try
            {
                StorageFile file = null;
                StorageFolder folder = GetFolder(storageType);
                file = await folder.GetFileAsync(FileName);
                IRandomAccessStream readStream = await file.OpenAsync(FileAccessMode.Read);
                Stream inStream = Task.Run(() => readStream.AsStreamForRead()).Result;
                return (T)serializer.Deserialize(inStream);
            }
            catch (FileNotFoundException)
            {
                //file not existing is perfectly valid so simply return the default 
                return default(T);
                //throw;
            }
            catch (Exception)
                 {
                //Unable to load contents of file
                throw;
            }
        }

        private StorageFolder GetFolder(StorageType storageType)
        {
            StorageFolder folder;
            switch (storageType)
            {
                case StorageType.Roaming:
                    folder = appData.RoamingFolder;
                    break;
                case StorageType.Local:
                    folder = appData.LocalFolder;
                    break;
                case StorageType.Temporary:
                    folder = appData.TemporaryFolder;
                    break;
                default:
                    throw new Exception(String.Format("Unknown StorageType: {0}", storageType));
            }
            return folder;
        }

        private async Task<StorageFile> GetFileIfExistsAsync(StorageFolder folder, string fileName)
        {
            try
            {
                return await folder.GetFileAsync(fileName);

            }
            catch
            {
                return null;
            }
 }
    }



In this way you can work with structured data in XAML based Metro Application for Windows 8. I hope this post is useful. Thanks for reading.