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.
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.
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" >
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#3FFFFFFF" Offset="0"/>
<GradientStop Color="#7FAFAFAF" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Border.RenderTransform>
<CompositeTransform/>
</Border.RenderTransform>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="2">
<Grid.RowDefinitions>
<RowDefinition Height="110"/>
<RowDefinition Height="4"/>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<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"/>
</Grid>
</Border>
<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">
<Path.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#19FDFBFB" Offset="0"/>
<GradientStop Color="#26FFFFFF" Offset="1"/>
</LinearGradientBrush>
</Path.Fill>
</Path>
</Grid>
</DataTemplate>
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.
Also each icon in the navigation bar must have a text which will be displayed when the application bar is opened.
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.
xmlns:navigation="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
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.
Roadmap
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
- …
Conclusion
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.
Regards,
LP
7d1d2813-9098-45ec-bd0d-a0d8fcdb0a4b|0|.0|96d5b379-7e1d-4dac-a6ba-1e50db561b04