LP Pinsonneault blog's

Windows 8, Windows Phone, ...

NAVIGATION - SEARCH

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.

Panoramic

 

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" >
<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>


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.

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

Comments (4) -

Looks awesome, Louis-Philippe! You rock!

Reply

Thank! for good post. Useful for me and another one.

Reply

Matthew C. Kriner
Matthew C. Kriner

Apple now has Rhapsody as an app, which is a great start, but it is currently hampered by the inability to store locally on your iPod, and has a dismal 64kbps bit rate. If this changes, then it will somewhat negate this advantage for the Zune, but the 10 songs per month will still be a big plus in Zune Pass' favor.

Reply

Pingbacks and trackbacks (4)+

Add comment

biuquote
  • Comment
  • Preview
Loading