As a quick introduction, Conference Buddy is an app being written in Windows Phone 8 as well as Windows 8. We will continue working on the Windows Phone 8 app in this blog post.
Let’s take a look at what we have covered so far and what is coming up:
Just like last time, I’m going to assume your development environment is setup and RadControls for Windows Phone 8 is installed. If you don’t have them yet then you can be downloaded from your account.
We can tell from the contact details page that we have been working with that our application will contain several pivot items of data including the “request follow up” section as shown in Figure 1.
Figure 1: The Request Follow Up PivotItem from the Contact Details Page.
As stated earlier, this data is being persisted to IsolatedStorage on the phone and the first pivot item looks like the following in JSON format:
In this blog post, we are going to wrap up this screen by adding in notes, subscriptions and request follow up. Just as a friendly reminder, you may click on the image above to see a larger version.
Starting with the App Bar
We talked about dynamic app bars earlier and all I did was add in the one for the “Request Follow Up” screen. The “Notes” and “Subscriptions” use the same exact App Bar, so we are able to re-use those resources.
All 4 PivotItems
We were able to wrap up this screen with the following code:
<!--Pivot item two-->
<!--Pivot item two-->
<CheckBox x:Name="chkSubRegRaffle" Content="Register for the raffle"/>
<TextBlock Text="Receive updates about" />
<CheckBox x:Name="chkSubDevToolsProducts" Content="Telerik DevTools Products"/>
<CheckBox x:Name="chkSubALMProducts" Content="Telerik ALM Products"/>
<CheckBox x:Name="chkSubTestingProducts" Content="Telerik Testing Products"/>
<CheckBox x:Name="chkSubHTML5Products" Content="Telerik HTML5 Products"/>
<phone:PivotItem Header="request follow up">
<TextBlock Text="Follow Up Type" />
<RadioButton x:Name="rdContact" Content="Request for contact" GroupName="gnRequestFollowUp"/>
<RadioButton x:Name="rdSuggestion" Content="Request for suggestion" GroupName="gnRequestFollowUp"/>
<RadioButton x:Name="rdProblemReport" Content="Problem Report" GroupName="gnRequestFollowUp"/>
<RadioButton x:Name="rdOther" Content="Other" GroupName="gnRequestFollowUp"/>
<TextBlock Text="Product" />
<telerikInput:RadListPicker x:Name="rlpProduct" SelectedItem="Windows 8" />
<TextBlock Text="Subject" />
The screens look like the following once complete (please note that we have not applied any styling to the app yet!)
Now that our UI is complete, we can focus on the code to save these request in a valid JSON file.
As you can tell from the “Request Follow Up” screen, we added in yet another control by Telerik called RadListPicker. Since you already have seen the XAML to create it from the XAML snippet shown earlier, you can easily add items to it in code as shown below:
List<string> _product=new List<string>()
"Windows Phone 8",
Simply declare a generic list and add it to the ItemSource property.
Serializing Data from Multiple PivotItems with Json.net
As stated earlier, we are going to use Json.net to serialize our Customer class. We can do this by first instantiating a MainViewModel.cs.
public class MainViewModel : INotifyPropertyChanged
customers = new List<Customer>();
private List<Customer> customers;
public List<Customer> Customers
public event PropertyChangedEventHandler PropertyChanged;
protected void NotifyPropertyChanged(string p)
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs(p));
Next, I’m going to append each contact saved to a file called mycontacts.json and just write the contents out to a MessageBox where you can see the data being captured.
//Add currently entered data to Customers
IsolatedStorageFileStream fileStream=myIsolatedStorage.OpenFile("mycontacts.json", FileMode.Create, FileAccess.Write);
using (StreamWriter writer=new StreamWriter(fileStream))
But one last thing that I’ll need to do is see if the file exist as the user navigates to this page and Deserialize the object first. This will allow us to append onto the same file with each successful write.
protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
IsolatedStorageFile myIsolatedStorage = IsolatedStorageFile.GetUserStoreForApplication();
IsolatedStorageFileStream fileStream2 = myIsolatedStorage.OpenFile("mycontacts.json", FileMode.OpenOrCreate, FileAccess.ReadWrite);
using (StreamReader streader = new StreamReader(fileStream2))
string json = streader.ReadToEnd();
List<Customer> customers = JsonConvert.DeserializeObject<List<Customer>>(json);
_vm.Customers = customers;
We could further validate this JSON by using http://jsonformatter.curiousconcept.com/#jsonformatter.
We wrapped-up the main logic around the “contact details” page today and will start taking a look at charting in the next blog post. As always, the source code to this project is available here and if you have any questions, then just let me know.
Don’t forget the Nokia premium developer program allows you to get RadControls for Windows Phone for free and they have a lot of additional resources to help you get started.
-Michael Crump (@mbcrump)
Michael Crump is a Microsoft MVP, Pluralsight and MSDN author as well as an international speaker. He works at Telerik with a focus on everything mobile. You can follow him on Twitter at @mbcrump or keep up with his various blogs by visiting his Telerik Blog or his Personal Blog.