LP Pinsonneault blog's

Windows 8, Windows Phone, ...


Building a Windows Phone 7 application: Part 2 - Implementing the UI

Part 1 - Accessing the data

In this second part, i explain how i implement the user interface.

Implementing the UI

Windows Phone 7 application are based on Silverlight 3. Which mean that the interface are build with XAML. In fact, there is not much difference if we compare to a standard Silverlight application. There is some limitation that we need to keep in mind when we create the UI for the Windows Phone 7. First, the screen size is limited to 800x480 or 320x480. This is not a real limitation, it only a limitation of the viewing zone. Also, because WP7 is base on Silverlight 3, you won’t be able to use all of the third party control available on the market (at this time). I want to remember you that we are currently working with a Beta version, feature may change in the future.

In some of my previous blog I've wrote about some WP7 control. Among those control are the Panoramic and Pivot control. We see those control in most of the demo but they are not built-in control at this time. So for now we need to implement our own or use a third party controls set. So in my application I'm using a control that is really easy to use and which is available at CodePlex. You can access the control project using the following link http://phone.codeplex.com/.
So for one of the main UI of the application i decided to test the Panorama control. This was easier than i expected.



2010-07-04 12h50_25

One of the problematic I've faced is to display the speakers in a list. I wanted to have those speakers to be displayed in 2 columns. The WrapPanel from the Silverlight toolkit is the control that can help to resolve that situation. But i wasn’t able to use the current DLL because it was build for Silverlight 4. So as mentioned on some of the blog one of the solution is to import the class directly in the project. So this is what i did. I had to fix the class to be able to compile.

To personalized the item, i created a new template to display the picture of the speaker and his name. I’ve added a little bit of glass effect. To do that i used some rectangle that i converted in path. Combine with the proper gradient you can do some great effect  very easily.

2010-07-04 13h20_53


Here is the XAML for the template :

<DataTemplate x:Key="DataTemplateSpeaker">
<Grid Width="175" Height="200">
<Border HorizontalAlignment="Stretch" BorderThickness="1,1,3,3" CornerRadius="10" Margin="0,0" RenderTransformOrigin="0.5,0.5" Padding="4" BorderBrush="#FFACD0FF" >
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#3FFFFFFF" Offset="0"/>
<GradientStop Color="#7FAFAFAF" Offset="1"/>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="2">
<RowDefinition Height="110"/>
<RowDefinition Height="4"/>
<RowDefinition Height="60"/>
<Image HorizontalAlignment="Center" Width="90" Stretch="Uniform" Grid.Row="0" Source="{Binding adx_partialurl, Converter={StaticResource SpeakerPictureConverter}}"/>
<TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" Text="{Binding adx_name}" VerticalAlignment="Center" Grid.Row="2"/>
<Path Data="M0.5,0.5 C69.528435,1.1737753 135.80814,1.1603669 199.5,0.5 L199.21571,44.151123 C135.53889,26.307547 68.447166,29.901087 1.6371429,47.084667 z" Stretch="Fill" UseLayoutRounding="False" Margin="0,2.25,0,78.5">
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#19FDFBFB" Offset="0"/>
<GradientStop Color="#26FFFFFF" Offset="1"/>

2010-07-04 13h32_04

In Windows Phone 7, compare to Silverlight some page template are not available at this stage. One of them is the Child page. So i created a user control that simulate the child page. Combine with the Pivot control this allow to have more information inside the window.

In the latest beta version, some change improve how we design the application. First Blend now integrate a manager that help creating the navigation bar. So we no longer have to manage the application bar directly in code.

2010-07-22 08h21_18

Also each icon in the navigation bar must have a text which will be displayed when the application bar is opened.

2010-07-22 08h26_47

2010-07-22 08h34_04 

Moving to the Beta version

This application was create with the CTP April Refresh of the Developer Tools. So upgrading to the Beta version was pretty straight forward. Mainly the refactor they did in the assemblies will simplify the referencing. So in this application i had to remove any obsolete reference and add a reference on the Microsoft.Phone.dll. After i had to go through each XAML page in my application and change the namespace declaration to refer the appropriate DLL.


The other change i had to go through is adding the Text to any button in the application bars.

And the last change I've been able to do is to refer to the signed assembly for System.Data.Services.Client.dll. So now (like i said in my previous post), the is no need to fix any signed assembly like we had to do with the CTP April version.



This project is still in progress. I have a couple of ideas to implement. Here is a list of what i have in mind:

  • Implement the localization of the event using Bing Maps
  • Integrate a session scheduler
  • Manage the multi-language (English and French)
  • Implement a notification service
  • Implementing caching so the application will work offline


So in conclusion my experience with programming with WP7 is very simple and easy. The experience i got over the past year with Silverlight reduce significantly the learning curve. That what i like with it, because i can focus on learning specific feature related only to WP7 (Application Process, Hardware feature, etc.). This is only the beginning!

So come back often as i will continue to blog about this project and other related subject like WP7, Silverlight, Blend.


Building a Windows Phone 7 application: Part 1 - Accessing the data

imageA couple of week ago, the Microsoft TechDays Canada team have publish all data using ODATA. So i said to my self this will be a good hand-on for creating a WP7 application and exploring ODATA at the same time. So I've started to build an application while exploring most of the current feature available.


2010-07-04 10h20_07

First i started to look at the data structure of the TechDays.ca ODATA. The object available are Events, Schedules, Speakers, Speaker Tags, Tags, Tracks, Venues, Annotations. So there is plenty of information to build a pretty advance application. I’ve started with the Venue because most of the data are related with the Venue which are the city where the TechDays will stop. So I've just create a simple list of button to which will allow me to access the information related to the selected Venue.

Accessing the data

The first thing to do (after the creation of the Project in Visual Studio) is to create the proxy class the will interface the WCF Data Services and the ODATA format. Currently we cannot add Service Reference using Visual Studio for Windows Phone 7 project. I hope this will be added in a future version. So for now you need to create that class manually by executing the DataSvcUtil.exe in command line:

DataSvcutil.exe /uri:http://www.techdays.ca/OData.svc /DataServiceCollection /Version:2.0 /out:TechDaysODataType.cs.cs

So you can now import that class in your project. But if you try to compile it will fail because you are missing a reference. You need to import the System.Data.Services.Client.dll .

 Note: There is currently an issue with the Windows Phone Toolkit April CTP with some Authenticode signed assemblies so i had to fix the System.Data.Services.Client.dll  to be able to work with WCF Data Services. Tim Heuer post an article with the instruction on how to fix the affected assemblies : http://timheuer.com/.../windows-phone-tools-update-april-2010-silverlight-xna.aspx
This issue is now fixed in the current beta release.

imageCurrently, I’ve created a library to handle the data. I created an helper that simplify the data query inside the Windows Phone application. This eliminate a lot of code that can often be duplicate. So in the constructor of my helper class TechDaysProxy.cs i instantiate the WCF Data Services client

public TechDaysProxy()
ODataContext =
new Xrm.XrmDataContext(
new Uri("http://www.techdays.ca/OData.svc/", UriKind.Absolute));
CurrentLanguage = LanguageType.English;

Once we have access to the data context we can query the data. So with WCF Data Services which is in this case an implementation of REST. Every query Linq are converted to REST query. If we want to query the object adx_venues we can do it this way:

public void GetVenuesAsync()
var Venues = from v in ODataContext.adx_venues select v;
collectionVenues = new DataServiceCollection<Xrm.adx_venue>();

collectionVenues.LoadCompleted +=
new EventHandler<LoadCompletedEventArgs>(collectionVenues_LoadCompleted);
This will return the a collection of adx_venues. By default, none of the child element will be loaded. So there is 2 ways to load child element. You can modify the LINQ query to add the Expand keywork to include a child table in the result. This may simplify the process but in some case it can increase the delay of getting the information back from the server.
var Venues = from v in ODataContext.adx_venues.Expand("adx_eventspeaker_venue")
select v;
The other way, is to get load the information asynchronously. So when we get the data back we load dynamically the child table so we can start displaying some information while the remaining still in process of loading. 
void collectionVenues_LoadCompleted(object sender, LoadCompletedEventArgs e)
foreach (Xrm.adx_venue v in collectionVenues)

None of those method are better. You need to apply the proper one base on the context of your application.
This is simple for any other object you may implement the same logic. So there is not much code to implement here.
2010-06-12 22h55_042010-06-12 22h06_182010-06-12 22h07_36
2010-06-12 22h07_592010-06-12 22h08_242010-07-04 12h50_25



PART 2: Implementing the UI