Only showing posts tagged with "Silverlight"

Windows Phone 7 Performance Tips and Resources

Following in the same vein as my previous post, this post will detail a number of tips and resources I’ve found for developing on Windows Phone 7, specifically covering optimising application performance. Unfortunately, the phone is not your eight core beast with 16GB of RAM and a graphics card that chews 300W of power when under load, so you need to keep testing your performance constantly and making changes to the way you’re doing things.

Test on Phone Hardware Regularly

The WP7 emulator is pretty good, and you’ll probably find yourself using it all the time to test your application as you write it. However, with regards to performance, how your application runs in the emulator is not representative of how your application will run on an actual phone device. You need to be testing constantly on the phone hardware to make sure your app is running smoothly.

Understand the Frame Rate Counters

The default WP7 project templates have a line in their App.xaml.cs files which turns on the frame rate counters when your app is attached to the debugger. Jeff Wilcox has a great article explaining what these tiny numbers actually mean. Don’t forget that even though the numbers may be high on the emulator, they may not be so good on an actual phone.

Add a Memory Counter Alongside the Frame Rate Counters

Unfortunately, those frame rate counters do not show a number for the total app memory consumed. Memory usage is important to know because WP7 has a 90MB upper limit for apps running on devices with 256MB of RAM. However, Peter Torr has written some code you can use that adds a memory counter next to the frame rate counters.

Understand What is Rendered by the GPU and What is Not

On WP7 there are two threads that handle the UI: the UI thread and the compositor thread. Operations performed on the UI thread are processed by the CPU, and when things are handled by the compositor thread they are done by the GPU. It goes without saying that you want to offload as much as possible onto the GPU, rather than the CPU. However, what gets handled by the compositor thread and what gets handled by the UI thread comes down to exactly what sort of operations you are performing; you don’t have direct control of what executes where. This article on the Telerik Blog explains this concept in more detail.

Use the PerformanceProgressBar

At some point, you’re going to use an indeterminate progress bar in your app to indicate some sort of loading operation. When you do, you may notice your UI performance suffer. Unfortunately, this is because the indeterminate ProgressBar does its fancy animating dots on the UI thread, rather than on the compositor thread. Jeff Wilcox has a good post about this (scroll down to “The back story”). The solution? Use the PerformanceProgressBar in the Silverlight for Windows Phone Toolkit when using indeterminate progress bars, as it implements a workaround for the problem.

Load Images Asynchronously

If you’re loading images from the web to display in Image controls on your UI, you might be tempted to just bind the Image’s Source property in the XAML to a URL in your view model. Don’t do this! Unfortunately, a lot of the downloading and processing of the images is done on the UI thread, so if you have a few images, your performance will suffer. What you need to do is download the images in a background thread, and once they’re downloaded, display them.

Thankfully, David Anson has written a sweet attached property for Images that will do this for you. It’s ridiculously easy to use; you simply set the LowProfileImageLoader.UriSource attached property on the Image instead of the normal Source property. His code will automatically download the image in a background thread, and set the Image’s Source when its done. Go grab his code, or download it from Nuget.

Understand the Performance Issues Involved with a ListBox

The default ListBox on WP7 uses a VirtualizingStackPanel to lay out its items, and its control template includes a ScrollViewer to enable you to scroll up and down through its items. The VirtualizingStackPanel works together with the list box’s ScrollViewer and unloads items that are outside the current view, in order to reduce memory usage. This sounds like a great idea (especially when doing infinite scrolling lists), except on the phone it doesn’t currently perform very well. If you have a long list and scroll through it rapidly, the list will jerk around and you will be able to see the VirtualizingStackPanel loading items as it tries to keep up with your scrolling and fails to do so in time. Unfortunately, due to the limited resources available on phone devices, I haven’t found a clear works-for-everything solution to this problem. However, there are a few solutions that may or may not work for you.

The first potential solution is David Anson’s, from the same PhonePerformance project mentioned in the last tip. He chooses to do away with the VirtualizingStackPanel altogether and use a normal StackPanel. He then supplements it by only loading items further down the list as you scroll down to them; however, once the items are loaded, they loaded and aren’t later removed (like the VirtualizingStackPanel would do). This ensures the scrolling performance is buttery smooth. However when testing this, I found that you need to keep a very close eye on your memory usage, especially when your list items include images. This means this technique is fine if you haven’t got a long/infinite list. If you do, however, you may want to investigate combining this technique with a form of paging. For example, you may do infinite scrolling for (say) five pages of data, then if the user wants to see 6-10, you provide a “next page” button that clears the list and loads page 6, within infinite scrolling loading for pages 7-10.

The second potential solution is Peter Torr’s LazyListBox. Unfortunately, I didn’t get a chance to try this out when struggling with the ListBox performance issues on my recent project, so I can’t comment much on it. I do like its idea of having two ItemTemplates, one for items currently on screen and one for items off screen. This could mean you could remove those Image controls from the off screen items to save yourself memory and CPU usage.

Another cool way of improving performance with ListBoxes (as mentioned on this blog post) is, when adding new items to the list box, add them in small batches rather than all in one go. This allows the UI thread to take a breather and respond to user input faster.


WP7 is a cool platform, but you must never forget that you’re programming for a device that would explode if it even thought of playing Crysis 2. You need to be constantly testing your performance on an actual phone device to ensure your app is staying performant. Hopefully this post has given you a few pointers to some low-hanging performance fruit you can pick.

Windows Phone 7 Developer Tips and Resources

I’ve just recently finished up a Windows Phone 7 (WP7) development project at work, and during the project I collated a number of tips and useful resources that helped make the project a success, and I’m going to share those with you in this post.

Understand the Marketplace Submission Process

If you want to check out exactly what the marketplace submission process entails, the App Hub website has a very detailed walkthrough of the process. Thankfully, it’s not difficult; you just need to provide your XAP, some descriptions, some artwork and set your pricing.

One of the big questions you get asked as a Windows Phone developer is how long it will take for your application to be published on the Marketplace after it’s been submitted. Microsoft recently released some official numbers around that, and they claim that the average time to certification is 1.8 days. Of course, that’s an average, so you shouldn’t rely on that for your planning. Microsoft could take longer if they’re inundated with submissions. That same numbers blog post also says that 62% of applications pass on the first attempt. That means around 40% of apps fail, so you should allocate some time in your schedule to handle a potential submission failure.

Use an MVVM Framework

I chose to use Caliburn Micro as my MVVM Framework. I found that Caliburn Micro helped me because it provided:

  • Coroutines support
    The coroutines support is awesome and allowed me to write asynchronous code in a non-asynchronous fashion while still actually doing operations asynchronously. If you’ve read about C# 5’s await support, this is sort of like that except implemented using iterator blocks.
  • Comprehensive MVVM support
    One thing I’ve realised about MVVM is that it doesn’t describe a solution to the entire problem, which also includes navigation between, and composition of, views. Caliburn Micro has a concept called Conductors that helps with this, and it also abstracts the WP7 navigation functionality away from you.
  • Tombstoning support
    Tombstoning in WP7 can be a pain, but Caliburn Micro makes it relatively easy. You simply apply attributes to properties in your view model that you want saved when your app gets tombstoned, and Caliburn Micro will automatically restore those properties’ values when your application is restored. It also helps you when you’re using WP7 Tasks that cause your app to get tombstoned before they return you some data the user selected.
  • Conventions-based data binding
    I have a love-hate relationship with Caliburn Micro’s conventions-based data binding. It allows you to omit explicitly defined bindings in your view and Caliburn Micro will do it automatically for you based of its extensible conventions. On the one hand, it makes data binding easy; in particular commanding with ICommand, as it can just link an event in your view and a method on your view model automatically (and run that method as a coroutine, if you like). On the other hand, when something goes wrong, it’s much more difficult to find out why the black magic isn’t working.

The biggest disadvantage to Caliburn Micro is that it adds quite a lot of advanced techniques to your toolbox, which is great if you’re experienced, but can make it harder for people new to your project and unfamiliar with Caliburn Micro to get started. The other disadvantage is that the documentation (at the time of writing) is okay, but in a lot of cases I found I needed to dig through Caliburn Micro’s source code myself to see what was going on. (Tip: create and use a debug build of Caliburn Micro when debugging it, since the Release builds optimise out a lot of methods and make stepping through its code difficult. But don’t forget to switch back to the Release build when you publish to Marketplace).

Use the Silverlight for Windows Phone Toolkit

The default WP7 SDK is strangely missing some of the controls you expect to see there to make a good WP7 application look and feel like the native apps that come on the phone. Turns out that stuff is, for some reason, inside the Silverlight for Windows Phone Toolkit. The toolkit gets you those basic, expected things like the animated transitions between pages, the subtle tilting effect on buttons when you touch them, context menus, date pickers, list pickers, an easier API for gestures, etc.

The best way to learn how to use the stuff in the toolkit is to download the Source & Sample package and take a careful look at the sample code.

Use the Platform’s Theme Resources

WP7 comes with a lot of theming resources that you can reference using the StaticResource markup extension. Keep this MSDN page open in your browser while developing and use it as a reference. I highly recommend you use them everywhere you can, because they help keep your application’s look and feel consistent to the WP7 standards, and also come with the side effect of making your application automatically compatible with the user’s chosen background style (light/dark) and accent colour. So when the user selects black text on a white background, your text will automatically apply that styling. Neat!

While testing your application, I would encourage you to regularly switch between the different background styles and accent colours to make sure your application looks good no matter what theme the user chooses.

Take Advantage of the SDK’s Icon Library

The SDK comes with a library of icons you can use in your application, saved in C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Icons. Take advantage of them to ensure your icons are consistent with the WP7 look & feel and are familiar to your users.

Watch out for the Inbuilt HTTP Request Caching

As far as I can tell, WP7 seems to automatically and transparently cache HTTP requests for you based off their caching HTTP headers. This doesn’t seem to be documented on the HttpWebRequest class page, but at least one other person has noticed this behaviour. So if you’re calling a REST service and that REST service is setting cache headers saying cache the result for a day, your users won’t see new data for a day. Keep this in mind and perhaps change your service’s caching headers.

Borrow Code from the Expression Blend Samples to Enable VisualState binding to ViewModels

In Silverlight 4, you might change your visual state based off a property in your view model by using the DataTrigger in XAML. However, since WP7 is a sort of Silverlight 3 with extra bits, it doesn’t have DataTriggers. I chose to borrow some classes from the Expression Blend Samples code (licenced under Ms-PL), in particular the DataStateSwitchBehavior. It’s very elegant and lets me write XAML like this:

    <local:DataStateSwitchBehavior Binding="{Binding IsLoading}">
        <local:DataStateSwitchCase Value="True" State="IsLoading" />
        <local:DataStateSwitchCase Value="False" State="HasLoaded" />
    <local:DataStateSwitchBehavior Binding="{Binding HasFailed}">
        <local:DataStateSwitchCase Value="False" State="HasNotFailed" />
        <local:DataStateSwitchCase Value="True" State="HasFailed" />

To use the DataStateSwitchBehavior, you will also need to take the BindingListener class, the ConverterHelper class, and the GoToState class. In the example above I’m binding to a bool, but it even works if you bind to an enum.

Recognise and Handle the AG_E_NETWORK_ERROR from a MediaElement Control

While testing your application on a hardware device, you’ll likely be testing it while connected to the PC and the Zune software. However, for some reason the MediaElement control will fail with the AG_E_NETWORK_ERROR when you try to use it. Don’t panic, simply disconnect your phone from the Zune software and try again, or try connecting your phone using the WPConnect tool (C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Tools\WPConnect\WPConnect.exe) instead of Zune. Be kind to your users and show them a nice error message telling them to try disconnecting their phones from Zune if you detect that error.

Work Around Issues with the Pivot Control

There are reports on the Internet that the Pivot control has crashing issues when setting its SelectedIndex. Caliburn Micro has a PivotFix class in its WP7 samples you can use to work around it, plus you might like to try the workarounds on this page. However, if you still can’t get it to work (like I couldn’t), try simply slicing and reordering the array of pivot items so the one you want selected is first, which avoids this issue. For example, if you want pivot item C to be first, reorder A,B,C,D,E into C,D,E,A,B. Your users won’t notice the difference since the Pivot control automatically wraps the end of the list to the start and vice versa.

I found it very difficult to tell that it was the Pivot control causing the crashes; my application would trigger a break by the debugger in the App.xaml.cs’s unhandled exception handler method and the exception’s description would be “The parameter is incorrect” and there would be no stack trace (??!). If you see this exception, investigate how you’re using your Pivot control.

Support Infinite Scrolling

Everyone loves infinite scrolling of lists, where more content in the list is loaded dynamically as you scroll down. Unfortunately, WP7’s SDK doesn’t give you any help out of the box in regards to doing this. Thankfully, Daniel Vaughan has developed a neat attached property you can attach to list boxes that will call a data bound ICommand when the user scrolls to the bottom of the list. You can use this to load more data into the ListBox.

Daniel’s ScrollViewerMonitor class uses a BindingListener class, which isn’t the same class as the one you’ve borrowed from Expression Blend Samples, but you can easily modify his code to use that class instead.

Be aware that infinite scrolling will likely require careful monitoring of your memory usage (WP7’s max is currently 90MB for phones with 256MB of RAM); you will probably need to put an upper limit on how far you can scroll. It will probably also mean you’ll be using a VirtualizedStackPanel inside of your ListBox (that’s the default) to keep memory usage down, but keep in mind the performance for scrolling rapidly up and down in a VirtualizedStackPanel-powered ListBox is poor on WP7 at the moment.

Learn How to Hide the System Tray using Visual States

A typical case where you’d want to hide the system tray using visual states is when you’ve got a visual state group for device orientation (ie Portrait and Landscape. Use a DataStateSwitchBehavior and bind it to the Page’s Orientation property). Visual states use animations to change properties on objects, but unfortunately animations in XAML don’t work with “custom” attached properties, such as shell:SystemTray.IsVisible.

To get around that, you’ll have to add that animation to the visual state’s storyboard in code. Here’s some code that goes in your page class’s constructor, underneath the call to InitializeComponent, that hides the system tray when the device is turned horizontally:

ObjectAnimationUsingKeyFrames animation = new ObjectAnimationUsingKeyFrames();
Storyboard.SetTargetProperty(animation, new PropertyPath(SystemTray.IsVisibleProperty));
Storyboard.SetTargetName(animation, "Page");

DiscreteObjectKeyFrame keyFrame = new DiscreteObjectKeyFrame();
keyFrame.Value = false;
keyFrame.KeyTime = KeyTime.FromTimeSpan(TimeSpan.Zero);

Landscape.Storyboard.Children.Add(animation); //Landscape is my visual state

I highly recommend hiding the system tray when in landscape orientation, because it takes up a ridiculous amount of room on the side of the screen and looks horrible.

Learn How to Involve the Application Bar in Visual States

Incredibly annoyingly, nothing on a page’s application bar is data-bindable, which instantly makes it very hard to use in an MVVM way, not to mention making it so you can’t do things like hide it or disable certain buttons using visual states in Blend. However, there is a workaround that can enable you to change the application bar’s properties using visual states if you’re willing to write some C#. In your page’s constructor, underneath the call to InitializeComponent, you can set up hooks off your visual states’ animation storyboard’s Completed events and make your changes there. For example:

IsLoading.Storyboard.Completed += (o, a) => Page.ApplicationBar.IsVisible = false;
HasLoaded.Storyboard.Completed += (o, a) => Page.ApplicationBar.IsVisible = true;


WP7 is a great platform to develop on because it’s Silverlight; it means if you’ve got some Silverlight (or WPF) experience you can be instantly productive. However, there are some limitations to the platform at the moment and for some things you need to go outside the box to be able to achieve them. Hopefully this post has made some of that easier for you.

The state of affairs

Finally, this semester is over. Its been a long, long, semester and I'm glad that its finally finished, exams and all. As usual, I'll write up a review of the semester, but this isn't the blog for it.

Now that I've had my two 24" screens for a couple of weeks, I can formulate a proper opinion on them. Were they worth the two grand I spent on them? Absolutely. There is nothing quite like being able to work on code on one massive screen, only to have the multitude of supporting windows that I also use on the other massive screen. Highly recommended for those that can stomach the price.

It was requested of me by a peer that I illustrate the supreme coding environment that two 24" screens provides. Here is a picture showing Visual Studio (with two panels of code), MSDN and a uni project requirements PDF all open simultaneously. Don't mind all the mess on my desk (that was good watermelon and ginger beer).

The screens are so bright that they literally light up my room. I almost don't need any other lights on in the room. That said, they can be a little glaring if you don't have some other supplemental light on.

The first thing that annoyed me was the lack of a taskbar on the second screen. I wanted all the windows on the second screen to be on their own taskbar rather than junking up the single one on the main screen. A quick search later and Ultramon solved my problems. Highly recommended for those with two screens.

However, not is all sweet smelling roses in the 24" garden. One of the screens seems to have a bit of light leakage on the right edge. My last screen had tonnes of light leakage and as such it wasn't really an issue. This screen, however, has no light leakage except for this tiny bit which makes it all the more obvious and annoying. It doesn't affect standard work but during movies with dark scenes it is particularly obvious. It only affects one screen out of my two.

So, I submitted a warranty claim with Dell to try and get it replaced, fully expecting to be rebuffed. To my extreme pleasure, I was called within a day of the report and told they will send me a replacement and I can send my existing screen back with the courier that brings the replacement. Hats off to Dell. Exemplary performance. I will recommend Dell to anyone who asks me now.

But enough raving about the screens. Now that exams are over, I am planning to put a lot of time into my web development business. We are currently developing a CMS for use in a few clients' websites. Its written in PHP 5 in a fully object-oriented manner and is turning out nicely.

Aurora (the CMS) will power the next version of The next version? Yes, this design, although nice, is getting a bit tired and as such I've developed a new design from the ground up that, when the correct components from Aurora are done, I will replace this current website with. Expect a much more robust blogging system with comments when that's released. Closer to the time, I may release some screenshots.

People may say that Microsoft has grown stagnant, and certainly some sectors haven't been doing as well as was expected (Vista for example). But, as I've always said, if there's one thing that Microsoft can do right, its development tools.
They've gone and released a new web platform called Silverlight. At first glance, it seems to be a Flash-y sort of thing, but when you look closer it seems (to me at least) to be more of a platform than a media presentation format.

However, its got one main failing point at this time. It doesn't work in Opera. Works in Firefox and IE, but not Opera. Sorry guys, but until its pervasive, its not going to take off. And they realise that. Their current plan seems to be to release an Opera version "soon" (I'm hoping with the final version of Silverlight 1.1 which is in Alpha currently). At least they are bothering, which is new for Microsoft and Opera (*cough* fix all the Windows Live services while you're at it *cough*).

Silverlight seems to be a good place that Microsoft can finally use XAML. I always thought that XAML didn't seem to be particularly useful in the Visual Studio - C# world (I haven't actually used it though, so I very well might be wrong, so take that with a handful of salt). But for a web application, XAML seems to be perfect. Check out the short tutorials on the Silverlight website to see what I mean.

Another indication that Microsoft have still got the smarts, so to speak, is the new Popfly mashup creator/website creator/community that they've created, built on Silverlight. I was raving for hours after I saw this. The coolest thing about Popfly is its mashup creator. You literally drag "blocks" onto a drawing surface and join them with lines to join together services like Virtual Earth and Flickr. Its insane.

For example, (as shown on the Popfly website), you can create a Virtual Earth map that shows the location of the people who made the latest posts on Twitter. You basically drag a Twitter block (a literal cube object) onto the design surface, drag on a Virtual Earth block and join them together with a line. However, you find that Twitter provides the user's location as a name (eg Melbourne, Australia) and Virtual Earth requires latitude and longitude. So you drag on a block that converts from location name to latitude and longitude (called GeoNames). You join Twitter to GeoNames and then GeoNames to Virtual Earth with lines, tell Virtual Earth to get its coordinates from GeoNames and bam, you've got a VE map with Twitter users on it. Popfly handles all the AJAX, Javascript, Silverlight etc for you.

You can create your own blocks as well. There is a Visual Studio plugin you can download that helps you with this. You can then share these blocks on the little community thing that Popfly's got. Don't like what someone's shared? You can easily copy it, edit it and reshare the updated version!

If you need to dig a bit deeper into the code, say in the web site developer tool, or in the mashup creator, you can. And its even got Intellisense code prompting. In a web browser. Insane.

Popfly's only in Alpha so its still a little rough around the edges. But its remarkably stable. I haven't fiddled with it all yet, but what I have used has been remarkably smooth and polished. The alpha is still only in invitation only mode, but I was lucky enough to get an invite. If you hurry up, you might get one too. To see the really awesome presentation of Popfly check out their page here (you need Silverlight installed to view the movie).

Just to put a downer on all this new-found excitement, Apple released a PC version of their Mac Safari browser. Why do I hate this? Because its another damn browser I've got to now test for, me being a web developer. I've already got enough to tear my hair out with, what with Opera, Firefox and IE 6 and 7, since bloody people seem to not want to update to version IE7 (go find some statistics and see). The Inquirer has a nice article that explains why Apple dumped this pile on us and its not because they love us.

What probably makes my hackles stand on end the worst, is the fact that they tout it as the fastest browser. In fact, in typical Apple fashion, its not, but they insist on preaching to their zealot ("my life for Apple!") masses that it is. "Huh?" you say, "I've seen benchmarks that prove that it is the fastest!". Those benchmarks are probably wrong. Turns out that Safari's Javascript onload event fires before all the loading is done (unlike all other browsers who only fire onload when everything is loaded). Therefore, all the Javascript benchmarks record Safari as finishing loading before it actually does. Of course, Apple doesn't tell you that, do they? Here's the hard evidence from the guy that did the original browser benchmark.

Hell, now that I've got all annoyed with Apple, I might as well focus some rage on their zealot fanboys. A perfectly innocent ZDNet blogger wrote that the new MacOS X that is coming soon isn't too different from Vista. Although I don't agree with everything that she said (especially the part about Coverflow looking like a rip off of Flip3D), she made a lot of good points. However, she was literally threatened and abused into backing down by angry Apple zealots. She was literally told that she should "find a new career", that she "should be running a car wash in Frezno", and one of the zealots was going to complain to her manager to get her fired.

This sort of thing, people, is completely unacceptable. The Internet is not a place where you can threaten and abuse people. Its a place where you can present your viewpoint. Its okay that someone else has a different opinion to you. Its not okay to insult and threaten those other people. These people are one of the reasons why I dislike Apple. I don't want to be painted with the same brush as these spineless cowards who didn't even leave their real email address when they posted their insults so that Mary Jo (the blogger) could respond to them rationally. Here's a good rule of thumb for the zealots: if you want people to join up with Apple, try to act in a mature manner. If you need to hide your real name and email address, what you are saying is not appropriate.

Cooling down now, I am aware however, that this vocal minority of users is just that: a minority. There are plenty of rational people with Macs. My favourite lecturer has a Mac, one of my best friends has a Mac and some of my uni mates have Macs. I still am interested in Apple's progress and activities. Hell, maybe one day I'll get a Mac. But that day is not now nor in the foreseeable future at this point.

Getting back from another Apple rant (sorry, its a habit I've got to get over), let me bring this massive blog to a close on a positive note. At the end of my presentation that I gave on Monday (which went brilliantly), the marker told me about a Google presentation video that talks about tagging as a concept and kindly sent me the link in an email. It sounds boring, but in fact it was an entertaining and facinating video to watch. I highly recommend it. Here's the link. Its long (about an hour) but well worth the watch.

Especially on a 24 inch screen.