I'm starting to learn the Windows Phone 7 platform. To start getting familiar with the process, I decided to write a TagList app that will access my TagCloud WCF service to retrieve the tags for this site. It will then display the tags in a list and allow the user to select each and automatically be brought to the corresponding web page.
If you need a list of the current installs for Windows Phone 7 check out my Getting Started with Windows Phone 7 Development. For assistance setting up an app, check out Pete Brown's Building your first Silverlight for Windows Phone Application or Scott Guthrie's Building a Windows Phone 7 Twitter Application using Silverlight.
Let's jump into it.
Adding a Service Reference to a Windows Phone 7 app
Once you've created a new Windows Phone 7 application, the next thing you'll need to do is add a service reference. You'll quickly find that you can't do this in the current RC version of Visual Studio 2010 because there's no "Add Service Reference…" menu item.
You can roll the proxy class yourself or use Visual Studio 2010 Express for Windows Phone, which comes with the Windows Phone Developer Tools CTP. The Express version has the missing menu item.
You can leave the project open in Visual Studio 2010 while you open it in VS2010 Express for WP7. You could also just develop your application in the latter and forget about the former. Up to you.
In VS2010 Express for WP7 you add the service reference as usual. Here I'm using the WCF TagCloud service from which I retrieve tag information for the Silverlight TagCloud control on this site.
You can see that there is just the single web method, GetTags.
Back in VS2010 RC, you'll be asked to reload the project (assuming you left it open while editing externally) at which point you should now have the usual WCF service files.
The TagList UI
In MainPage.xaml I'll add a ListBox inside the default Grid along with an ItemTemplate to control data display.
1: <ListBox Height="636" HorizontalAlignment="Left" Margin="10,10,0,0" Name="uxTagList" VerticalAlignment="Top" Width="460">
2: <ListBox.ItemTemplate>
3: <DataTemplate>
4: <TextBlock Text="{Binding TagName}" Margin="5"/>
5: </DataTemplate>
6: </ListBox.ItemTemplate>
7: </ListBox>
In the codebehind, I'll add the code to setup and invoke the WCF service along with the async GetTagsCompleted method. Here's the entire class definition.
1: public partial class MainPage : PhoneApplicationPage
2: {
3: public MainPage ()
4: {
5: InitializeComponent ();
6:
7: SupportedOrientations = SupportedPageOrientation.Portrait | SupportedPageOrientation.Landscape;
8:
9: BlogTagService.TagCloudServiceClient blogTags = new TagCloudServiceClient ();
10: blogTags.GetTagsCompleted += new EventHandler<GetTagsCompletedEventArgs> (blogTags_GetTagsCompleted);
11: blogTags.GetTagsAsync (1, "http://www.itscodingtime.com/");
12: }
13:
14: void blogTags_GetTagsCompleted (object sender, GetTagsCompletedEventArgs e)
15: {
16: if (e.Error != null)
17: return;
18:
19: BlogTagService.CloudTag[] tags = e.Result;
20:
21: uxTagList.ItemsSource = from CloudTag cloudTag in tags
22: where cloudTag.TagName.Length > 0
23: select cloudTag;
24: }
25: }
The first parameter for GetTagsAsync is the tag threshold, or the number of times the tag must have been used before being included in the query, and the second parameter is just so the returned CloudTag structure items contain the full url associated with the tag. Remember, in the context of a blog, each tag has its own url that a user can click on to get to the related content. (In retrospect I probably shouldn't even have that as a parameter as the service could just return relative urls)
In blogTags_GetTagsCompleted we use some LINQ to bind to the TagList control's ItemSource property.
Run the app and this is what you'll see:
Launching the Browser
So now we've got a list of the tags for this site. The next logical step is to allow the user to click (touch) each tag and see the corresponding content on this site. We'll accomplish this with an event handler to capture the MouseLeftButtonUp event and the Windows Phone WebBrowserTask class.
Adding the event handler yields this code for the ListBox:
1: <ListBox Height="636" HorizontalAlignment="Left" Margin="10,10,0,0" Name="uxTagList" VerticalAlignment="Top" Width="460">
2: <ListBox.ItemTemplate>
3: <DataTemplate>
4: <TextBlock Text="{Binding TagName}" Margin="5" MouseLeftButtonUp="TextBlock_MouseLeftButtonUp" />
5: </DataTemplate>
6: </ListBox.ItemTemplate>
7: </ListBox>
Before we code the event handler, we need to add a reference to Microsoft.Phone.Tasks and the corresponding namespace.
Then, we can make free use of the WebBrowserTask. Here is the MouseUp event handler:
1: private void TextBlock_MouseLeftButtonUp (object sender, MouseButtonEventArgs e)
2: {
3: var textBox = (TextBlock) sender;
4: var tagLink = string.Empty;
5:
6: foreach (var tag in _tags.Where (tag => tag.TagName == textBox.Text))
7: {
8: tagLink = tag.TagLink;
9: }
10:
11: if (!string.IsNullOrEmpty (tagLink))
12: {
13: var webBrowserTask = new WebBrowserTask {URL = tagLink};
14: webBrowserTask.Show();
15: }
16: }
I moved the tag array gotten in the WCF service GetTagsCompleted event to class scope so that I can then query it here to get the tag link corresponding to the selected tag name. Then, I use the tag link to launch the browser.
Now, I had some problems with this. The browser would come up, but get stuck most of the time. The phone's "Back" button doesn't seem to do anything (I was expecting it to take me back to my app). This is CTP code, though, so you have to expect some quirks.
Finally, after playing with it for a while, I was able to get the web page to come up:
Too small to really do much with, so maybe I'll write an itscodingtime.com app next. ;-)
Conclusion
That's it for this demonstration. Hope you got some takeaways you can use in your own Windows Phone 7 projects.
Download: TagListApp.zip
[ Get 2GB of free online storage from Dropbox ]
[ Follow me on Twitter ]