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:
- Speech Recognition – Is a powerful way for your end-users to navigate and interact with your app using their voice.
- MultiResolutionImage –Makes it easy for Windows Phone 8 developers to support images in the various screen resolutions supported in Windows Phone 8.
- DataForm (Part 1) –This new component allows you to automatically generate the UI for your input forms, with support for validation and custom layouts.
- DataForm (Part 2) – We expanded on what we learned earlier about RadDataForm and showed you how to persist the first Pivot Item to isolated storage using our control with the very popular Json.net.
- Dynamic AppBars for Conference Buddy – We discussed how to implement dynamic Application Bars as your user navigates between pages.
- Wrapping up the Contact Details Screen – We refactored some of our code for the contact details page and explored how we can create the multiple Pivot items into a JSON file that can be serialized and deserialized very quickly.
- Displaying Contacts in Conference Buddy – In this blog post, we will add a second page to our app and display the collection saved in IsolatedStorage to RadDataBoundListBox using RadExpander as a DataTemplate.
Initial Setup
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. The completed source code for the section can be found here.
Contact Details have been saved, now what?
In our last blog post, we wrapped up the contacts detail screen which included 4 Pivot Items. A sample of two new contacts in JSON format is included below:
[{"Email":"Michael.Crump@telerik.com","FirstName":"Michael","LastName":"Crump","Title":"Mr","Company":"Telerik",
"PhoneNumber":"111-111-1111","Notes":"notes1","RegisterForRaffle":true,"ReceiveDevToolsUpdates":true,
"ReceiveAlmUpdates":false,"ReceiveTestingUpdates":false,"ReceiveHtml5Updates":false,"RequestForContact":false,
"RequestSuggestion":false,"ProblemReport":false,"Other":false,"RequestProduct":"Windows Phone 8","RequestSubject":""},
{"Email":"Jesse.Liberty@telerik.com","FirstName":"Jesse","LastName":"Liberty","Title":"Mr","Company":"Telerik",
"PhoneNumber":"222-222-2222","Notes":"notes2","RegisterForRaffle":true,"ReceiveDevToolsUpdates":false,
"ReceiveAlmUpdates":false,"ReceiveTestingUpdates":true,"ReceiveHtml5Updates":false,"RequestForContact":true,
"RequestSuggestion":false,"ProblemReport":false,"Other":false,"RequestProduct":"Windows 8",
"RequestSubject":"Looking to add our controls to his enterprise app."}]
Examining this text, you will find that it begins and ends with a bracket. A comma can be found in between the records to let the backend know that we have a start to a new record. We can easily validate this JSON by visiting: http://jsonformatter.curiousconcept.com/#jsonformatter and copying/pasting the text and hitting process.
Adding in a new Pivot Page and two new Telerik Controls!
Let’s go ahead now and read our contacts located in IsolatedStorage and format them in a way that is easy for the end-user to read. Before we begin, we need a control that is capable of handling thousands of contacts and providing additional information on the selected contact. We can accomplish both of these requirements by using two Telerik Controls that you have not seen yet. (RadDataBoundListBox and RadExpander)
Let’s go ahead and create a new Windows Phone Pivot Page called, “ListCustomer.xaml” in the Views folder. Once that is complete, let’s switch over to the XAML file and paste in the following code overwriting the existing Pivot.
<!--Pivot item one-->
<phone:PivotItem Header="contact list">
<telerikPrimitives:RadDataBoundListBox x:Name="dblbContactList" Margin="10" ItemsSource="{Binding Customers}"> <telerikPrimitives:RadDataBoundListBox.ItemTemplate>
<DataTemplate>
<telerikPrimitives:RadExpanderControl>
<telerikPrimitives:RadExpanderControl.ContentTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding FirstName}" FontSize="30"/> <TextBlock Text=" " />
<TextBlock Text="{Binding LastName}" FontSize="30"/> </StackPanel>
</DataTemplate>
</telerikPrimitives:RadExpanderControl.ContentTemplate>
<telerikPrimitives:RadExpanderControl.ExpandableContentTemplate>
<DataTemplate>
<Grid Margin="12">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<primitives:RadPointerContentControl Background="{StaticResource PhoneAccentBrush}" TargetPoint="-150,-300">
<primitives:RadPointerContentControl.PointerTemplate>
<DataTemplate>
<Polygon Width="12"
Height="24"
Points="0,0 12,0 12,12 0,24"
StrokeThickness="0"
Fill="{StaticResource PhoneAccentBrush}" RenderTransformOrigin="0.5, 0.5">
<Polygon.RenderTransform>
<ScaleTransform ScaleX="-1"/>
</Polygon.RenderTransform>
</Polygon>
</DataTemplate>
</primitives:RadPointerContentControl.PointerTemplate>
<StackPanel
Margin="24, 4, 4, 4"
Orientation="Horizontal">
<StackPanel Orientation="Vertical">
<TextBlock Text="E-MAIL:" Foreground="White" />
<TextBlock Text="{Binding Path=Email}" Foreground="White"/> <TextBlock Text="COMPANY:" Foreground="White" />
<TextBlock Text="{Binding Path=Company}" Foreground="White"/> <TextBlock Text="PHONE NUMBER:" Foreground="White" />
<TextBlock Text="{Binding Path=PhoneNumber}" Foreground="White"/> </StackPanel>
</StackPanel>
</primitives:RadPointerContentControl>
</Grid>
</DataTemplate>
</telerikPrimitives:RadExpanderControl.ExpandableContentTemplate>
</telerikPrimitives:RadExpanderControl>
</DataTemplate>
</telerikPrimitives:RadDataBoundListBox.ItemTemplate>
</telerikPrimitives:RadDataBoundListBox>
</phone:PivotItem>
As you can see from looking at the code snippet listed above, we have added the RadDataBoundListBox and RadExpander control onto our new Pivot Page. You should pay special attention to the Binding Statements as we are binding our ItemSource of RadDataBoundListBox to Customers and the DataTemplate will contain the FirstName and LastName of all the customers. If you tap on it, then it will expand to display the E-Mail, Company and Phone Number using the RadExpander control. We are also styling the ExpandableContentTemplate to give it a “Conversation-like” view, which we will see shortly. We should now switch to our code-behind page and wire in the ViewModel so that our bindings work properly.
ListCustomer.xaml.cs
We first need to declare our MainViewModel as well as set the DataContext to the current instance of the ViewModel. This can be accomplished with the following code:
private MainViewModel _vm=new MainViewModel();
public ListCustomer()
{ InitializeComponent();
DataContext=_vm;
}
Next, we need to override our OnNavigatedTo event handler to look in IsolatedStorage and retrieve the json file and add it to our ViewModel. The code snippet below will accomplish that:
protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{ IsolatedStorageFile myIsolatedStorage=IsolatedStorageFile.GetUserStoreForApplication();
IsolatedStorageFileStream fileStream2=myIsolatedStorage.OpenFile("mycontacts.json", FileMode.Open, FileAccess.ReadWrite);
using (StreamReader streader=new StreamReader(fileStream2))
{ string json=streader.ReadToEnd();
List<Customer> customers=JsonConvert.DeserializeObject<List<Customer>>(json);
_vm.Customers=customers;
}
}
When we launch the application, and navigate to the “Contact List” screen then we will see our three contacts, Michael Crump, Jesse Liberty and Phil Japikse as shown in Figure 1. If we click on the arrow to the right our RadExpander control will show additional information as shown in Figure 2.
Figure 1: (left) RadDataBoundListBox showing customers located in IsolatedStorage.
Figure 2: (right) RadExpander showing additional information about the customer.
Conclusion
In this article, we took a look at retrieving information saved into Isolated Storage into our Windows Phone 8 app. We used two new controls included in the suite: RadDataBoundListBox – to handle thousands of items and RadExpander to give us additional information on the selected item. Using RadControls for Windows 8 made this part a breeze, in the next section we will add a Pie chart that tells us how many contacts we have as well as how many people have requested a follow up. Stay Tuned!!!
As always, the source code to this project is available here and if you have any questions, then just let me know.
I know I remind you every single post, but 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)
