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. The completed source code for the section can be found here.
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.
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.
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)
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.