Windows Phone 7 RTM charting using the Silverlight Control Toolkit
Abstract: This article will show you the steps to surface charting data visualizations using the Silverlight Control Toolkit on the Windows Phone 7. I will also cover the reasoning behind these steps and the gotchas/errors you may encounter. Source code is included with a sample Windows Phone 7 project.
Windows Phone 7 RTM tools have been released a few weeks ago. Many developers are starting to develop their new apps and getting them ready for the Windows Marketplace. If you are a seasoned Silverlight develper, you probably want to leverage existing Silverlight frameworks or toolkits (i.e., MVVM, networking, charting, custom controls etc.) in your Windows Phone 7 application. If you have looked for a charting solution, you probably came across several articles that "claim" to show you how to easily surface charting on the Windows Phone 7. Most examples are out of date (because the Windows Phone 7 bits changed so much) and some of them simply have misinformation (i.e., I read one article and the author doesn't even know what assembly he is using :))
As you may know the Windows Phone 7 RTM includes a Silverlight runtime. Scott Guthrie announced during the MIX 2010 conference that "this isn't Silverlight Lite.....this is Silverlight" and I wrote an article that shows this is not the case. The Windows Phone 7 RTM runtime is based off of Silverlight 3 RTM and includes some additional things from Silverlight 4 and some custom inner workings for the Windows Phone 7 (i.e. UI thread and Composite thread). Basically, what this means is that most Silverlight 2 and Silverlight 3 code "should just compile and work" on the Windows Phone 7. If you have written Silverlight 4 code that takes advantage of new features it will simply not work in the Windows Phone 7 Silverlight runtimes (although this will probably change and both Silverlight runtimes will converge in functionality).
There is a lot of misinformation out there (even from Microsoft) that the Silverlight 4 Control Toolkit is compatible with the Windows Phone 7 and it's not.
Steps to Get Silverlight Control Toolkit Data Visualizations to Work in Windows Phone 7
- Download the November 2009 Silverlight 3 Control Toolkit (http://silverlight.codeplex.com/releases/view/36060#DownloadId=93512)
- The April 2010 Silverlight Control Toolkit dropped support for Silverlight 3. The November 2009 release is the latest stable release for Silverlight 3.
- Create a new Windows Phone 7 project
- Add a reference to the System.Windows.Controls.DataVisualization.Toolkit.dll
- Ensure the DLL comes from the Silverlight 3 toolkit (November 2009) NOT the Silverlight 4 toolkit
- The default location is: C:\Program Files (x86)\Microsoft SDKs\Silverlight\v3.0\Toolkit\Nov09\Bin\System.Windows.Controls.DataVisualization.Toolkit.dll
- Add a reference to the System.Windows.Controls.dll
- Ensure the DLL comes from the Silverlight 3 client SDK
- The default location is: C:\Program Files (x86)\Microsoft SDKs\Silverlight\v3.0\Libraries\Client\System.Windows.Control.dll
- Drag over chart and series from Asset library; start using the chart data visualizations normally
- I have tested pie, line and bar charts and all seem to work nicely
In the figure below, you can see the Windows Phone 7 emulator running a Pie Chart data visualization with a slider. I decided to style the Pie Chart, bind it to sample data, double bind one of the elements to a slider to test the rendering engine of the Windows Phone 7. I am happy to say that everything looks like it is working on the Windows Phone 7 as expected. Source code is located here.
What Will Happen If you use the Silverlight 4 Toolkit Assemblies?
In short, you will see everything work great in Blend 4 or Visual Studio designer. However, as soon as you deploy the project to the emulator the project will launch and promptly close throwing an exception of:"Invalid attribute value charting:DisplayAxis for property TargetType". I am guessing there is a Silverlight 4 feature being used (i.e. element binding) that may be causing the error in the Windows Phone 7. If you receive this error, then you need to reference the Silverlight 3 version of the System.Windows.Controls.DataVisualization.Toolkit.dll
What Will Happen If you forget to add the System.Windows.Controls.dll assembly?
The Blend designer and Visual Studio designer will both work. However, if you deploy the project to the Windows Phone 7 it will promptly error out by throwing an exception. The exception is going to be the generic XAML error "AGE_E_PARSER_BAD_TYPE line...". The reason this error happens is that the charting controls need artifacts that are located in that assembly that are missing from the Windows Phone 7 Silverlight controls. Luckily, since the Windows Phone 7 runs Silverlight 3 (plus some enhancements) we can use the Silverlight 3 assemblies. Please note that this will likely change when the Windows Phone 7 and full Silverlight runtimes converge in functionality.
Until Microsoft converges the Silverlight runtime functionality with the appropriate Silverlight Control Toolkits, you will have to be aware of the supported functionality in each version. In order to surface charting data visualizations in the Windows Phone 7, use the November 2009 Silverlight 3 Toolkit and reference the System.Windows.Control.dll from the Silverlight 3 SDK.
Source Code: WindowsPhone7ChartingExample.zip (1.32 mb)
Using the Bing Maps Silverlight control on the Windows Phone 7
Update 5/2/2010: The updated Windows Phone 7 Development April 2010 refresh actually ends up breaking the ability to use signed assemblies. You can read about it here: http://www.manyniches.com/windows-phone/signed-assemblies-bug-in-the-windows-phone-tools-ctp-refresh/ . The problem is the workaround they support doesn't really work for Bing Maps OR the Silverlight Control Toolkit.
Update 7/12/2010: The Windows Phone 7 Beta Tools (July 2010 release) work perfectly with the Bing Maps control. The signed assemblies issue has been resolved and the instructions below work great.
This technique/article is still relevant after that issue is resolved. I think Microsoft will either update the Windows Phone 7 Dev tools or release unsigned assemblies for Bing Maps and Silverlight Control Toolkit. If you are using the previous tools (March 2010), then you are good to go to use this article as-is.
Update 10/10/2010: The Windows Phone 7 RTM tools include a NEW updated Bing Maps Control tailored for the Windows Phone 7. If you are interested in surfacing maps on the phone use that control. Step by step instructions are included in the Windows Phone 7 Training Kit located here. The code below still works and if you need to use the full Silverlight control on the Windows Phone 7 RTM, this still works. However, the Bing Maps control for the Windows Phone 7 is optimized for the phone runtime, gestures and limited resources.
The v1 version of the Silverlight Bing Map control was released in December 2009. The Silverlight control allows you to integrate an immersive mapping solution in your Silverlight applications. By using Silverlight, Microsoft is able to provide a rich experience with crisp zooming and panning that performs significantly better than the Ajax map control.
During the MIX 2010 conference last week, Microsoft unveiled the Windows Phone 7 SDK details. Developers can now leverage their existing Silverlight investments on the phone. Furthermore, developers can also leverage Microsoft's investments in Silverlight as well. The Bing map Silverlight control is a perfect example of this as it will work on the Windows Phone 7 emulator. This article will cover how to get started with integrating the Bing maps control with the Windows Phone 7 (mobile platform) and overcome some of the nasty gotchas. The source code for this article is included below.
Getting Started with Bing Maps for Silverlight mobile
The first thing you need is to navigate your browser to the Bing maps portal at https://www.bingmapsportal.com. After logging in with your Live account, you can crate a Bing Maps account and create a new key. After creating a key, download the Silverlight Bing Maps control from the Microsoft download site. Installing the Bing Maps Silverlight control will create a folder with the assemblies and documentation.
Bing Maps Account Center
Creating Your First Windows Phone 7 Mobile App with Bing Maps
Note: This article assumes you have both the Windows Phone 7 SDK and Bing Maps control for Silverlight installed.
1) Open Expression Blend 4 Beta and create a new Windows Phone project. You can optionally change the names of the page and app titles.
2) In order to use the Bing Maps control, we need to add references to the Bing Maps assemblies. In order to achieve this, simply right-click on the References folder and click "Add Reference...". If you installed the Bing Maps Silverlight control, the assemblies are located at: C:\Program Files (x86)\Bing Maps Silverlight Control\V1\Libraries. Ensure both map control assemblies are added.
3) After adding both map control references, you should now find the Map control in the asset library.
4) You can drag the Map control over on the ContentGrid control. I placed the control to take the full real estate available and named the control BingMap. Once you do this, you should see the map properly render in Expression Blend (shown below).
5) Let's build the application and try to run it. You will notice a nasty error below. Luckily for us, the error is rather descriptive and it is an easy fix.
6) In order to fix this error, simply add a reference to the System.Windows.Browser.dll which can be found at C:\Program Files (x86)\Microsoft Silverlight\4.0.50303.0\. The application should now build. Hitting F5 or debug will now run the application. If you do not have a physical Windows Phone 7 device, you can run the program in emulator mode. It will take a minute or two to boot the ROM into memory.
Note: The reason why we are getting this is error is because the System.Windows.Browser.dll is unsupported by WP7 (source: http://msdn.microsoft.com/en-us/library/dd470087(VS.96).aspx). Luckily for us they are both Silverlight assemblies and we can cheat to get it to work.
Development tip: Do NOT close the emulator while enhancing your project. Just minimize it and stop the debugging natively in Expression Blend or Visual Studio 2010. This way, the emulator does not have to boot every time.
7) Now that the emulator is loaded, we have a black screen. In order to get around this problem, simply right-click on the MainPage.xaml and click "edit in Visual Studio". For some reason, the Expression Blend emulator or web access does not work properly. You need to debug the app in Visual Studio 2010. I have no idea why that is. If anyone has any ideas, please comment below.
Important note: You have to be connected to the internet for this work. The images and credentials both have to be verified on Microsoft servers.
8) Now we FINALLY have our Bing Maps Silverlight control working on our Windows Phone 7 project. We can pan around. Notice that the zooming works. We can switch between arial and road modes.
9) We need to clean up the interface. If you are familiar with the Bing Maps Silverlight control, you will notice two strange things: the navigation arrows are in the center of the screen, and secondly, what is that white box in the middle of the map?
10) Using the Bing Map API, we can remove the navigation control. Create a loaded event for the control or the page (During the MIX conference, they mentioned you can use the OnPageNaviagedTo event as well) and simply add this code to the event: this.BingMap.NavigationVisibility = System.Windows.Visibility.Collapsed. Run the application now and you will see the navigation control removed. This removes the scaling and the mode switch but we can add those back later if we want to.
11) Investigating the white pop-up over the map control. If you are not familiar with the v1 Bing Maps Silverlight control, you might not know what this white pop-up is (This didn't happen in the beta of the control). In order to get a clue, you can create a Silverlight 3/4 (NOT mobile) project and add a map control and see what happens. I took a screen shot below of a full Silverlight app with Bing and we can clearly see that this pop-up is probably just a warning message because of invalid credentials. The Windows Phone 7 doesn't properly show the error.
12) Add credentials to the map. If you properly signed up for the Bings Map control and received an access key, you can copy it (shown in the first screen shot in this article) and set the CredentialsProvider attribute. If you added the CredentialsProvider properly, the warning message will go away.
13) Optionally, you can clean up the interface further by removing the logo and copyright notice. The clean interface will look like something something like this when fully implemented:
14) You can mimic multi-touch on the emulator WITHOUT a multi-touch monitor. Earlier we removed the navigation/scale control. If you were using this app on the phone, wouldn't you want to just zoom in by expanding both fingers? We can actually mimic this on the map control because it supports multi-touch. Fire up the application and hold down CTRL and flick the mouse to any direction. Notice that you can easily mimic zooming in like a phone user would. I don't think the pinch gesture can be mimicked (since this is kind of a hack but Microsoft mentioned it is coming to the next SDK drop.
Give Microsoft Credit
I have been preaching for almost two years now to other fellow RIA architects and developers that Microsoft's RIA strategy is really about hooking into its vast enterprise service and development verticals. How cool is it that a control NOT designed for the phone released last year just works on a preview of the Windows Phone 7 SDK? That to me is truly impressive. Furthermore, this amplifies the rationale to go with Silverlight when chosing an RIA technology. Adobe does not have the search, map, enterprise services, cloud services, development environment or mobile device to compete with Microsoft in this area. Integration with the Bing Maps Silverlight control on the Windows Phone 7 truly highlights this fact.
As you can see, there are some gotchas involved in getting started with the Bing Maps Silverlight control on the Windows Phone 7. However, if you follow these steps, you should be able to start mocking up prototype map applications easily. I kept this project really clean and did not add any specific functionality, but from what I tested, this works just as it does on the full Silverlight project. Obvious enhancements include adding landscape/portrait rotations and being able to swith between modes. Microsoft will probably update this control and licensing for the Windows Phone 7 release. Some of these problems will probably go away.
You can download the zip file of the project below (Note: I did remove my credentials from the project so you will have to add your own).
WindowsPhoneAppWithBingMaps.zip (522.72 kb)
Silverlight 3 - Where is Silverlight Mobile?
Update 2/18/2010: Silverlight Mobile is coming in beta form during the MIX 2010 conference in March 2010. This will include a Silverlight SDK for the new Windows Phone 7 platform. Look for Silverlight mobile to be announced for Symbian, BlackBerry and Droid in the near future as well.
This article was written March 2009...what is funny is how I was right that Silverlight mobile would be around the Visual Studio 2010 CTP/RTM. Go me :)
During MIX 2009, Microsoft announced many new features that will be coming as part of the Silverlight 3 framework. One feature that was suprisingly missing was Silverlight support for mobile devices. Not only was this surprising, but it was really disappointing as I was really sure that this feature would be released as part of Silverlight 3.
Why the surprise?
Did you know that mobile support for Silverlight was announced a while ago? Do you know when? End of 2008? Beginning of 2008? Try the beginning of 2007! Silverlight support for mobile devices was shown publicly during the MIX 2007 conference when Silverlight Alpha 1.1 was announced. Over two years ago we had a demo of Silverlight on a mobile device, yet we still don't have a public beta or release of the product (Note: There are private demos of this out there).
"Microsoft probably just shifted strategies and you are making a big deal about something two years ago, right?"
Actually NO. At MIX 2008, Amit Chopra (the program manager for Silverlight mobile) during his Mobile Devices and Microsoft Silverlight presentation showed off Silvelight on the mobile. So one year later Microsoft reported progress on the Silverlight mobile platform. Furthermore, they stated that they would also be releasing Silverlight 1.0 for Mobile shortly after the conference for Windows Mobile 6.x. (Check out the video linked above for the false promises).
Some real basic demos of Silverlight mobile at MIX 2008 (Yeah, it was shown that dark.)
Well, has there been any more announced from Microsoft relating to Silverlight mobile? Believe it or not, again at the PDC 2008 conference (October 2008), Amit Chopra during his talk Silverlight 2 for Mobile showed Silverlight 2 running on a mobile emulator and mobile device. Furthermore, we were also told that Silverlight Mobile would NOT be like Flash Lite. You would get about 99% of the SDK on the web and mobile in one shot (Note: Things like video brushes would not be supported on SL mobile). Sounded really promising, right?
Silverlight 2 Mobile Environment. Silverlight 2 debugging on a Mobile emulator. Too bad it never was made came public.
Fast forward to MIX 2009. Surprisingly we were showed nothing about Silverlight 2 or 3 on a mobile device. There was some chatter on Twitter with someone who talked to Amit Chopra and he stated that Silverlight mobile is about a year away! That was apparently true since there is nothing in the Silverlight 3 SDK related to mobile devices.
It is not like Microsoft couldn't accomplish Silverlight on a mobile in two years. Look what has happened to the evolution of Silverlight in two years. From March 2007 to March 2009, we have gone from Silverlight 1.1 Alpha -> Silverlight 2 Beta 1 -> Silverlight 2 Beta 2 -> Silverlight 2 RC -> Silverlight 2 RTW -> Silverlight 3 Beta 1. Two years is an eternity for an immature platform like Silverlight.
"The fact that Silverlight for mobile has been announced two years ago and we don't have a public beta is surprising. But what is more surprising is that Silverlight mobile is over a year away!"
It's obvious that Microsoft has hit some snags with Silverlight mobile. I don't know the exact details but it looks like performance had a big part of it. Furthermore, Silverlight did not support the features that next generation mobile devices currently support. For example, the iPhone has 3D transitions, multi-touch support, clearer text. Silverlight obviously needed to catch up in order to be competitive when it was released. Microsoft decided to add the features into the core framework first and then leverage them in the Silverlight mobile framework. A lot of people on forums are asking why Silverlight went with some features like 3D support, multi-touch, clear fonts, etc., instead of printing. As you can see, these features make a little more sense now.
The second part of the story is that Silverlight mobile needs to fit into Microsoft's higher mobile strategy. Microsoft has announced in pieces its Windows Mobile 7 strategy. I think it is essentially going to be a Microsoft version of the iPhone with a major twist: the Silverlight App Store and Silverlight will be powering a lot of the extensions. More on that in another post.
Has Microsoft given up on Silverlight mobile?
Obviousy, the answer to that is no. Microsoft wants to get Silverlight for mobile devices right. I think it will power the Windows Mobile 7 strategy and it needs to be "as good" as Apple's iPhone/iPod. Microsoft can't afford another Zune vs. iPod debacle. If Silverlight is done right, it could be really powerful and blow Apple's framework away. I will take .NET over Apple's Objective-C any day. Furthermore, Silverlight allows you to target mobile, web and the desktop all at the same time. The iPhone framework (as of now) only supports the mobile platform. As you can see, Silverlight mobile is key to the strategy at Microsoft.
When will we see Silverlight 3 mobile?
The best estimate we heard was a tweet from MIX (I heard from someone who talked to Amit Chopra) that Silverlight mobile is about a year away. This makes Silverlight mobile being released in line with the Windows 7 mobile platform. I am hoping we see a beta/CTP around the Visual Studio 2010 release.
PDC 2008 - Silverlight 2 Wrap-Up
PDC (Professional Developers Conference) 2008 is over and there was a lot of information released over the course of the 4 days. You probably have heard some of it if not all of it. I wanted to write a post to summarize the information pertaining to Silverlight either directly or not directly that was released last week. Over the course of the week, Silverlight developers were bombarded with information that was coming out and this post's goal is to help developers get a handle on all of the information. Here is the summary of what has been released during the week of the PDC 2008:
- Silverlight Tools for Visual Studio 2008 SP1
- Silverlight Control Toolkit
- Expression Encoder SP1
- PDC Silverlight Videos (directly related)
- PDC Silverlight Videos (indirectly related)
- Silverlight 2 for Mobile Devices
- WCF REST Starter Kit
- Silverlight and SEO
Silverlight Tools for Visual Studio 2008 SP1
Silverlight Tools for Visual Studio 2008 SP1 were released over 3 weeks ago. However, for those people who are detailed oriented, this release was labeled as RC1. I posted a question on this on the forum the day this was released. Apparently, this was NOT the final release of the tools. On 10/30/2008 Microsoft released a new build of the Silverlight Tools. I don't think anything has changed, but regardless, you will want to update your tools to this new build. The new build of the tools can be downloaded here: http://www.microsoft.com/downloads/details.aspx?FamilyId=c22d6a7b-546f-4407-8ef6-d60c8ee221ed&displaylang=en
Silverlight Control ToolKit
The Silverlight Contol Toolkit was announced at the PDC 2008. It has a bunch of great controls, themes and charting cababilities. The big news is that the toolkit is open sourced and it you can extend it or build your own controls. Not only is it a great way to enhance your current Silverlight applications, but it is also a great way to learn about Silverlight control development and architecture. Shawn Burke's team has also included a bunch of unit tests using the Silverlight Framework so you can learn how to implement some TDD with Silverlight. You can download the toolkit here: http://www.codeplex.com/Silverlight
Expression Encoder SP1
Expression Encoder SP1 has been released. I like the approach Microsoft took by adding service packs to both Blend and Encoder rather than forcing people to upgrade. Therefore, people who have invested in version 2 are getting their money's worth. SP1 of Encoder allows you to create custom Silverlight 2 video player skins. It also includes H.264/AAC support. The service pack is available here: http://www.microsoft.com/expression/try-it/default.aspx?filter=servicepacks (Note: Expression Encoder also has an Express version which will work after the trial expires allowing you to do some basic things.)
PDC 2008 Silverlight Related Videos Online
If you weren't at the PDC, Microsot published the videos from the 4 days to the web. You can watch the PDC 2008 Videos online here: https://sessions.microsoftpdc.com/timeline.aspx. Here are the videos that are either directly or indicrectly related to Silveright development and I have some notes on the ones I watched.
If you are an architect, development manager, etc., I highly recommend watching some of these videos and then getting your team together for a lunch or a meeting and watching this together. I find this spurs developers thinking together about the current and future technology earlier.
PDC Silverlight videos (directly related to Silverlight)
PDC Silverlight Videos (indirectly related)
Silverlight cannot consume data directly from objects or databases located on servers (even if it is the same server Silverlight is hosted on). Silverlight is all about consuming data from services. These videos are an absolute MUST to watch if you are a Silverlight developer and consume data from services.
Excellent video that deals with ADO.NET Data Services development and the Entity Framework. This video shows some of the cool interceptors for security and enhancing services that exist in ADO.NET Data Services. If you are building a simple Silverlight client that needs, call batching, smart data and/or security concurrency management, ADO.NET Data Services provide a lot of great features here.
Silverlight 2 For Mobile Devices
Microsoft is porting Silverlight to mobile devices. This is a really welcome feature. Many users who have an iPhone know that Apple is currently "blocking" the availability of Flash to mobile devices. This is where Silverlight has a potential advantage and put a dent in the Flash market share by targeting mobile devices. Most of this information is coming from this video here from the PDC: http://channel9.msdn.com/pdc2008/PC10/
Here are some of the highlights from the PDC:
- By 2010 statistics show that there will be about 4 billion mobile phones in the planet. There is a huge opportunity here! So how do you write applications that are rich to thousands of users? Silverlight :)
- Silverlight 2 (That's right; the same Silverlight 2 on desktops) has been announced for the mobile space.
- Plublic CTP will be available in 2009 (Q1). My guess is that they will release this at the same time as MIX 2009.
- The really cool part is that the SL 2 on mobile requires NO CODE changes to work on a mobile device where Silverlight is installed!! That is really nice and very powerful and one code works on both the desktop and mobile devices.
- The Baby Smash demo really drives this point home further. So not only can you share code between WPF and Silverlight 2, you can share code between WPF, Silverlight 2 and Silverlight 2 Mobile! That is impressive; three platforms with one codebase.
WCF REST Starter Kit
One of the ways that Silverlight can consume data is through RESTful services. WCF was part of the .NET 3.0 framework back in 2006. In 2006 REST services were just starting to get traction as many Web 2.0 companies used this design as a preferred method for their service APIs. WCF .NET 3.5 has added some features for REST services. However, there was still a lot of plumbing code in order to write proper RESTful services in .NET 3.5. The MySpace API is a great example of what can be done with WCF and REST on a very large implementation.
In order to make writing some of the WCF REST services easier, Microsoft released the WCF REST Starter Kit during the PDC.
The WCF Starter Kit makes building RESTful services a lot easier. It also shows the impressive architecture of WCF. It can be enhanced with using attributes and interceptors to build a REST architecture for services.
Silverlight and SEO
Several months ago Google announced that it can now crawl Flash-based applications. This is pretty important because now Flash-based content is searchable and this is critical to any revenue model that is based on high-page ranks on Google (sales, ads, etc). Silverlight currently cannot be crawled by Google (maybe in the future). However, there are couple things you can do right now to make sure your Silverlight application gets crawled by Google:
- Ensure that the page hosting your Silverlight content has proper meta tags and place the SEO there.
- You can also place a page for a "deprecated" client. Therefore, if you receive a hit from a user that doesn't have Silverlight, you can bring them to an HTML page rather than the full Silverlight client. This way when the Google robot tries to crawl your site, it will crawl it based on the HTML page.
This information is really important for developers that are jumping into RIA. Most architects are ready to jump right into the technologies and try to solve problems with RIA. However, things like SEO sometimes might fall through the cracks and might not be acceptable to a client. Check out this post for more information on Silverlight SEO Optimization: http://nerddawg.blogspot.com/2008/10/search-engine-optimization-for.html