Andrej Tozon's blog

In the Attic


My Month with Windows Phone 7

I had a pleasure of using a Windows Phone 7 device (LG Optimus 7 to be exact) for the past month and this is me sharing my experience with it. A quick note on my phone background: I’ve been using an iPhone for the past two years and am used to my wife’s HTC Hero (Android).

The thing is – I had to switch back to the iPhone after I returned my WP7 today (had it on a one month test drive) and it felt - weird. Let me just say that switching from the iPhone to WP7 and back felt a lot like switching from ZX Spectrum to a PC and back to the ZX (a 20-year old metaphor but who cares Smile). Something along the way of comparing serious, monochrome OS to a colorful, toyish one, if you will… Which OS suits you better remains a matter of personal taste, but to answer the question I got on one of my recent WP7 developer talks, I definitely don’t think that younger population won’t be attracted to Windows Phone 7; there are a lot of features that young audience will very much appreciate.

First, there’s the people hub – to track and manage everything and everybody from a single place is just awesome. Android is offering a similar story, but IMHO it’s not that well executed as it’s on WP7. My only wish here is that Microsoft would allow for 3rd party apps to easily integrate into the hub. And on the subject, twitter not being integrated into the hub is a huge miss, for example.

I also definitely love the Metro UI – simple, quickly recognizable graphics and large fonts. Easy for brains to process while on the move. There are, a couple of quirks I ran into… you can only add tiles on the single main screen (vertically, from the top down), and the main screen can hold up to 8 tiles. Imagine a live tile you put in the 7th row of the main screen. The gesture for unlocking the phone would be flick up, flick up. Except when you flick up the second time you can’t be sure where you’ll land - it depends on how hard you flicked. When in a hurry or on the go, that tile hunting game can be pretty time-consuming. And this is the phone that is supposed to save us from our phones, right? Either making flick up / down gestures to move a whole page up or down, or the ability to put tiles on the secondary screen on the left of the main screen would make more sense because your flick up, flick right gesture would land you exactly where you expected.
One additional thing that annoyed me was having to do two gestures to answer the call (unlock, answer) – why, oh why? Phone calls are the reason they are called phones – they should require the least amount of thinking and physical activities with this devices.
And, and I don’t know if this is related to WP7 OS or physical device - when answering a call, there was a certain lag involved before the microphone got switched on. That resulted in many confusing calls when I answered with ‘hello’, which the person on the other side didn’t hear, and waited for me to say something.

Build quality – I don’t know, the phone felt plasticky to me. I was especially worried I would accidentally pull out the Start button because of it’s embossed logo on it. And just to be clear – putting USB port on the side? That’s the worst place to put it. Cradle, anyone? Also, the photo button would be one of the greatest features on the phone if I wasn’t accidentally repeatedly hitting it when holding the phone in my left hand. It responds immediately, making your phone ready to take a photo in a matter of a second. But because of its position, it’s either a blessing, or a curse.

Ringtones – well, I tried to find a ring tone on my Optimus 7 but I couldn’t find one. The wide variety of beepy and clicky tones didn’t do much for me; I need noise to tell me it’s my phone ringing. Old phone, please!

Applications – tried them a few and they worked great… except for some with long(er), virtualized lists… jerky as hell. Hardly usable. Hard to keep up reading a list when every second or so you completely lose your track. Marketplace hung a couple of times. People’s hub crashed a couple of times, esp. when deleting a contact, imported from the SIM card. I was really impressed with the shipped IE browser. Very responsive and smooth. The whole being online experience is totally abstracted away from the phone, it feels really great.

A couple of other quirks: When trying to make a phone call, the contact info always tended to show in a landscape mode. I realized that I needed to hold my phone in a straight vertical position in order to be displayed correctly. The typing keyboard didn’t exactly liked my fingers’ typing, I was missing the keys constantly – wish there was a way to calibrate the keyboard.

In conclusion: yes, the OS has issues, some of them quite serious. From a casual user’s standpoint, I’d say the most annoying is the one with microphone lag and I hope this  will get fixed somehow, either by Microsoft or the device manufacturers. On the positive side, the phone is very easy to use and offers a great experience.
I have to say I got pretty used to it in the past month and I’m definitely considering buying my own WP7 in the near future. If I was living in a country, supported by the WP7 marketplace and the App hub, that would be a non-brainer.

Reactive Extensions #3: Windows Phone 7

Following the theme from my previous two posts, this post will be about using Reactive Extensions on Windows Phone 7. I'll use a similar scenario as before – gradually load a few tiles into an ItemsControl. Let’s get started.

Starting a project

Create a new “Windows Phone Application”. Add references to assemblies Microsoft.Phone.Reactive and System.Observable to add support for Rx, then Microsoft.Phone.Controls.Toolkit (found in Silverlight Toolkit for Windows Phone 7) and System.Windows.Interactivity (Expression Blend for Windows Phone 7 SDK, should be already installed if you installed WP7 tools / Expresion Blend 4 SP1).


Put a ListBox on the main, name it list and possibly change the control to an ItemsControl (we don’t need to select items).

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <ItemsControl Name="list" />

Create the ItemTemplate:

<DataTemplate x:Key="TileTemplate">
    <Grid Width="142"
          Background="{StaticResource PhoneAccentBrush}"
        <TextBlock Text="{Binding}"
                   FontSize="{StaticResource PhoneFontSizeExtraExtraLarge}"
                   Foreground="{StaticResource PhoneForegroundBrush}"
                   Margin="20,0,0,10" />

… use WrapPanel for the ItemsPanel:

<ItemsPanelTemplate x:Key="WrapItemsPanelTemplate">
    <toolkit:WrapPanel />

… and update the ItemsControl to use them:

<ItemsControl Name="list" 
              ItemTemplate="{StaticResource TileTemplate}"
              ItemsPanel="{StaticResource WrapItemsPanelTemplate}" />

Reactive Extensions

I copied the code from my previous post:

public partial class MainPage : PhoneApplicationPage
    public MainPage()

        Loaded += OnLoaded;

    private readonly string text = "reactive wp7";

    private void OnLoaded(object sender, RoutedEventArgs e)

    private void AddLetter(char letter)

Animating on appearance

Instead of using layout states as in Silverlight version (they are not supported in WP7’s ListBox), I was back on using a behavior to trigger the entrance animation:

public class LoadedBehavior : Behavior<FrameworkElement>
    protected override void OnAttached()
        AssociatedObject.Loaded += AssociatedObject_Loaded;

    void AssociatedObject_Loaded(object sender, System.Windows.RoutedEventArgs e)

    private Storyboard CreateStoryboard()
        Storyboard sb = new Storyboard();
        DoubleAnimation animation = new DoubleAnimation
            Duration = TimeSpan.FromMilliseconds(1000),
            From = -90,
            To = 0,
            EasingFunction = new CubicEase { EasingMode = EasingMode.EaseOut }
        Storyboard.SetTargetProperty(animation, new PropertyPath("(UIElement.Projection).(PlaneProjection.RotationY)"));


        animation = new DoubleAnimation
            Duration = TimeSpan.FromMilliseconds(1000),
            From = 0,
            To = 1,
            EasingFunction =
                new CubicEase() { EasingMode = EasingMode.EaseOut }
        Storyboard.SetTargetProperty(animation, new PropertyPath(UIElement.OpacityProperty));

        Storyboard.SetTarget(sb, AssociatedObject);
        return sb;

Wrapping up

The last thing to do was adding the behavior to the ItemTemplate and prettify the layout a bit.

That’s it, pretty easy – tiled letters are now gradually filling up the space on the main page, each letter appearing on the screen with a subtle animation. For more details on how that works check out my previous posts on Reactive Extensions.

The demo project can be downloaded from here. In the future I’ll look into using more Reactive Extensions on Windows Phone 7 – stay tuned.


Lost in time? Zip it!

In my last blog post I wrote about using Reactive Extensions together with layout states in Silverlight to gradually introduce collections of data to a ListBoxes. One small problem with code from that post is that I’m generating the sequence of data myself, whereas in real-world scenario would be pulling it from some data source like database or web service. It’s easy to turn an existing collection to an Observable by using the ToObservable() operator, but the generated sequence wouldn’t be time-based, as it would have been if we had used the GenerateWithTime() constructor.

So how do we turn an existing enumerable collection into a time-based observable sequence?

First, we need to convert the enumerable to a plain observable. Here’s the example of such conversion:

private readonly string text = "REACTIVE";

IObservable<char> letters = text.ToObservable();

[Reminder: a string is a collection/sequence of chars – turning this collection into an observable sequence results in IObservable<char>]

Next, we need to create an observable sequence that will serve as a “beat” – a time-based sequence that would define points in time at which we want to “release” (or trigger) the next item in our data collection. The following code will create a fast “beat”, “thumping” at every 300 ms:

IObservable<long> beat = Observable.Interval(TimeSpan.FromSeconds(.3));

Now we only need to lay the numbers from the enumerable collection over created beat and for that, there is a convenient combinator operator available in Reactive Extensions. It’s called – Zip.

IObservable<string> dancingLetters = numbers.Zip(beat, (letter, time) => letter);

Zip operator will take two observable sequences (letters and beat) and produce a new value pair when a new value is present in both sequences, kind of like a zipper. In our case, the letters sequence starts with 8 values and beat starts with zero. As the beat sequence starts producing new values (one every 0.3 seconds), these new values are paired (zipped) with values from letters, resulting in a new pair of data (letter, time) releasing every 0.3 seconds. As we’re only interested in numbers from the numbers sequence, we return only those values, ignoring values values from the beat sequence (=> letter).

dancingLetters is now a time-based observable sequence which we can subscribe to:


… and get the same result as in previous post, only with letters.

One great thing about Reactive Extensions is they are very extensible, meaning you can write your own operators by creating new extension methods. For frequent operations like the one we’ve just performed, it’s a perfect fit. Here’s an example of an OnTimeline() operator that would put an observable sequence on a live timeline:

public static class ObservableEx
    public static IObservable<TSource> OnTimeline<TSource>(this IObservable<TSource> source, TimeSpan period)
        return source.Zip(Observable.Interval(period), (d, t) => d);

With the new operator handy and in place, we could rewrite the previous snippet as (full code ahead):

private readonly string text = "REACTIVE";

private void OnLoaded(object sender, RoutedEventArgs e)

private void AddLetter(char letter)

This application in action can be observed through this link


In this post, I extended the code sample from previous post by creating a new extension method that puts an existing observable sequence on a timeline, with delayed item notification.

Download source code from here.

Silverlight Layout States with Reactive Extensions

I’ve been working on several applications where I needed to display several items in a ListBox (or an ItemsControl) at startup, but they had to appear on the screen one by one, with a short delay, not all at once. Using ListBoxItem’s layout states took care of handling how an individual item would appear in the list, but I still needed to handle a short pause between each item being added to the list. Usually I resorted to using a Timer, which sorted out that needed delay for me, but that really felt like hacking that had nothing to do with the real problem.

Reactive Extensions, however, offer a much elegant solution. The GenerateFromTime() construction operator is a close relative to the Generate() operator used in my previous blog entry, except GenerateFromTime() adds an important time dimension to generated sequence – the last parameter in this operator lets you specify a delay between each call to OnNext():

private readonly IObservable<string> numbers = Observable.GenerateWithTime(1, i => i <= 8, i => i + 1, i => i.ToString(), i => TimeSpan.FromSeconds(.3));

The above code snippet will produce an observable sequence of 8 strings, progressing through these strings with a 0.3 seconds delay.

The rest of the code:

private void OnLoaded(object sender, RoutedEventArgs e)

private void AddImage(string image)

Note the ObserveOnDispatcher() operator again – GenerateWithTime uses a timer operating on a background thread so we need to ensure the AddImage() method is called on the UI thread.

Layout states for this sample are kept really basic:

<VisualStateGroup x:Name="LayoutStates">
        <VisualTransition GeneratedDuration="0:0:1">
                <CubicEase EasingMode="EaseOut"/>
    <VisualState x:Name="AfterLoaded"/>
    <VisualState x:Name="BeforeLoaded">
            <DoubleAnimation Duration="0" To="-94" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
            <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
    <VisualState x:Name="BeforeUnloaded"/>

And the final result can be observed by following this link.image

This post has shown how to use Reactive Extensions in Silverlight to gradually fill a ListBox, with a bonus of a nice item entry animation, provided by the layout states.

Download source code from here.

Watch Silverlight TV videos, pinned to full screen

One of the “annoyances” with Silverlight (and similar browser plugins) is with watching a video in a multi-monitor set up – you would pop out your Silverlight video player to full screen on one monitor and continue working on your other monitor – which would cause your video player to return to its normal size, ruining your watching experience. Well, that was the case until Silverlight 4 came out. Silverlight 4 supports “full-screen pinning” in a way that you can choose the Silverlight 4 app to remain pinned to full screen on one monitor even if you focus your work on the other.

Unfortunately, (the regular) Channel 9 still doesn’t use Silverlight 4 which means you don’t get this option of full-screen pinning, but guess what – Channel 9 is in a process of refurbishing and a preview of the new site is available at the This is good news for us because they’re using Silverlight 4 for their player, which basically means you can watch your Silverlight TV full-screen pinned simply by prefixing Silverlight TV show’s URL with the word preview. For example, show 40: You Are Already a Windows Phone Developer is available on

However, there seems to be a lag with publishing new content, resulting in shows not being available on the preview site at the same time as on the regular time. At the time of this writing, it appears that Show 40 is the last one available on the preview site, with shows 41 and 42 remaining on the regular site only. Anyway, it’s good to see Channel 9 going Silverlight 4 – hope to the new site up and running soon.

Add version 4 components to your Silverlight 3 application with MEF

Note: this post and accompanying source code was updated to reflect the latest MEF build on Codeplex. This build is much more aligned with the version of MEF that is available from Silverlight 4 Beta SDK.

The current Silverlight version is v3, with v4 in the making (in Beta 1 at the time of this posting). Silverlight 4 is bringing a lot of new features in the core framework and to use them, you would have to migrate your applications to the latest version, once it gets released. And that would require all the potential users to upgrade their machines to the latest version as well.

But there’s another way. By using MEF (Managed Extensibility Framework), you can extend your existing Silverlight 3 application with optional package, which would contain Silverlight 4 components only.

Here’s an example: user can select an image file from your local disk in Silverlight 3 only through an OpenFileDialog, while with the new drag/drop feature in Silverlight 4, she would be able drag a picture from the file system and drop it onto the application. Why not allow those with Silverlight 4 installed do it the easy way?

To make this work, the main application should be all Silverlight 3. We’d provide additional Silverlight 4 features in a separate XAP package, which would be downloaded later and tested for the right runtime version. In case user had the latest Silverlight runtime installed, we could bring in additional features in the application. For this post, I’m going to implement the abovementioned picture select feature by providing two controls:

  • a select button for choosing the picture through an OpenFileDialog (Silverlight 3 feature)
  • a drop canvas where user can drop the picture from the file system (Silverlight 4 feature)

Silverlight 3 control

Here’s how the BrowseForPictureControl would look like:

imageThis control would be contained in the main application. It exposes the PictureSelected event, with the FileInfo data passed as an event argument. Because the application is going to subscribe to this event for each control that exposes it, we need to make an interface for it and put that into a new project that would be shared among the both packages.

public interface IPictureControl
    event EventHandler<PictureSelectedEventArgs> PictureSelected;

public class PictureSelectedEventArgs : EventArgs
    public FileInfo File { get; set; }

    public PictureSelectedEventArgs(FileInfo file)
        File = file;

The control implements the this interface as:

private void OnBrowse(object sender, RoutedEventArgs e)
    OpenFileDialog dialog = new OpenFileDialog();
    bool result = dialog.ShowDialog() ?? false;
    if (result)

Silverlight 4 control

The improved Silverlight 4 control should be created in a new Silverlight 4 application project, that would be disconnected from the main project, but referencing the previously created shared project. The control looks simpler too:


And the interface implementation:

private void OnDrop(object sender, DragEventArgs e)
    IDataObject dataObject = e.Data as IDataObject;
    if (e.Data == null)
    FileInfo[] files = dataObject.GetData(DataFormats.FileDrop) as FileInfo[];


OK, controls done. Now, on to MEF.

Bringing in MEF

MEF for Silverlight 3 is available for download from Codeplex. You’ll need the following assemblies added as a reference in your main application:

  • System.ComponentModel.Composition
  • System.ComponentModel.Composition.Initialization.dll

The second assembly is only required to use from the main project, where composition is performed. The project that is shared between the SL3 and SL4 projects can reference just the first assembly from the list. Also, one downside of maintaining the compatibility with Silverlight 3 is that the Silverlight 4 project must reference the same System.ComponentModel.Composition assembly as other projects. No ‘native’ SL4 MEF there…

Attribute for version

Obviously, loading any Silverlight 4 based code into a Silverlight 3 application should be impossible, therefore we need to mark both of controls with information about the Silverlight runtime they require. Something in a way of:

[ExportablePictureSelector(RequiredVersion = "3.0")]
public partial class BrowseForPictureControl : UserControl, IPictureControl

for Silverlight 3 control, and:

[ExportablePictureSelector(RequiredVersion = "4.0")]
public partial class DragDropPictureControl : UserControl, IPictureControl

for Silverlight 4 control.

The ExportableSelector attribute is derived from MEF’s ExportAttribute and is declared as:

[AttributeUsage(AttributeTargets.Class, AllowMultiple = false)]
public class ExportablePictureSelectorAttribute : ExportAttribute, IPictureSelectorMetadata
    public ExportablePictureSelectorAttribute()
        : base(typeof(IPictureControl))

    public string RequiredVersion { get; set; }

Putting it all together

The main application provides a catalog of all the controls that were discovered:

[ImportMany(AllowRecomposition = true)]
public ObservableCollection<Lazy<IPictureControl, IPictureSelectorMetadata>> PictureControls { get; set; }

The PictureControls collection will change whenever a new export is discovered by MEF. When that happens, the newly discovered control will be added to the main form:

private void OnPictureControlsCollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
    foreach (Lazy<IPictureControl, IPictureSelectorMetadata> view in Views)
        Control c = view.Value as Control;
        if (!panel.Children.Contains(c) && Application.Current.Host.IsVersionSupported(view.Metadata.RequiredVersion))
            view.Value.PictureSelected += OnPictureSelected;

The above code shows that the main criteria for adding the control on the form is that it’s RequiredVersion is supported by the runtime – and that is checked with the interop IsVersionSupported method of the plugin host.

When picture is selected, the PictureSelected event is fired by the control and handled to display the picture:

private void OnPictureSelected(object sender, PictureSelectedEventArgs e)
    BitmapImage bi = new BitmapImage();
    image.Source = bi;

Of course, BrowseForPictureControl control being included in the main project, it will immediately be picked by MEF and inserted in the PictureControls collection. For Silverlight 4 based XAP package, however, we need to download it first. Here’s the InitializeContainer method, which initializes a new composition container and triggers the package download:

private void InitializeContainer()
    PackageCatalog catalog = new PackageCatalog();
    CompositionContainer container = new CompositionContainer(catalog);


    Package.DownloadPackageAsync(new Uri("CrossVersioning.Version4Enhancements.xap", UriKind.Relative), (e, p) =>
        if (p != null)


The Silverlight 4 package is asynchronously downloaded from the server and added to the package catalog. The last line is there to start the initial composition, causing the v3 control to immediately show up.


There… the application is set up. Users, having the Silverlight 3 runtime installed, will see the it as:image… and Silverlight 4 users will also see that additional feature:


This approach will let you gradually update your applications to use Silverlight 4, not forcing the users to update to the latest runtime immediately (although there would probably be no reason not to ;))

You can test the application right here:

Or download the source code from here. Enjoy.

My MEF articles published on SilverlightShow

My two-part article on rebuilding an existing Silverlight application to use MEF (Managed Extensibility Framework) for “selective composition” is now live on (part 1, part 2). I took my Halloween Gallery application and made it pluggable so I can pull in different themes throughout the whole year (current themes include Halloween and Christmas).

Halloween Live Gallery Christmas gallery 

The original features are still there – geotagged photos are retrieved from Flickr API and the location where they were shot is shown on the Bing Map. If you’re interested in MEF, take a look at let me know what you think. The application will be released to Codeplex soon.

My articles on SilverlightShow

A few of my Silverlight articles were published on the SilverlightShow site this past two months. The first one is an introduction to Silverlight/(WPF)/Blend behaviors, where I create a Silverlight Halloween Sound Player without writing a single line of code – the application is composed entirely in Expression Blend, using various behaviors.

Halloween Sound Player

I also used behaviors for another article, to showcase some of the new Silverlight 4 features: WebCam capture support, printing, drag/drop, clipboard, commanding, some databinding enhancements and implicit styling support. The result is a nice doodling application, which can be used to entertain your kids.Camdoodle

The third article was about creating a Europe Weather Map with Silverlight, showing current weather conditions for some of the larger cities in Europe. It was mostly about using the Bing Maps Silverlight Control SDK, but fun anyway.

Europe Weather map

You can expect more articles appearing on SilverlightShow in the next days/months. Leave a comment if you find them useful.

Developers, please mind the locale!

I’m observing this really irritating trend with new software lately…

I followed up on a couple of tweets today to try the new Silverlight application everyone was RT’ing of. Clicked on the link and the loading animation began. Seconds later, it… stopped.


Then I noticed an icon in IE’s left bottom corner…


The following detailed message confirmed my assumptions about what caused the error:


“Input string was not in a correct format”!

I’m sure that if you live outside US/UK and follow Silverlight community, you have encountered this error before. For example, I’ve been to at least two online events in the past year, with live streaming content delivered over a Silverlight player, which displayed this very same error when launched.

Here is the list of some other apps that I’ve worked with recently, that have been showing the same symptoms. To name just a few:

Silverlight Bing Maps, specifically the Twitter app – can you find the difference between these two links?


The first link uses a dot as a decimal separator and will work for English locales, while the second one uses commas and will work for non-English locales (speaking generally). Note that URL will be converted to the default format when application is loaded, probably throwing you somewhere in an ocean, if the numbers weren’t in the expected format.

Live Labs Pivot (desktop app) will crash on startup when locale is not set to English.

Six-Degrees Search is the application I’ve tried to run today. A Silverlight app, based on the EntityCube entity search engine and being developed by Microsoft Research. Regional settings need to be set to English locale for application to load correctly.

Mentioned software might be labeled Beta or prototype, but that hardly justifies the fact that developers didn’t support non-English locales from the very start. Therefore I’m taking this blog post to appeal to all Silverlight developers, especially those working with regional settings set to English natively:

Please, make your applications respect local regional settings as early in the development as possible. Silverlight may be cross-platform and cross-browser, but developers, not taking local regional settings into the account, don’t even make it cross-locale.

Just in case anyone encounters a weird behaving application, showing symptoms described at the very top of this post, this is one of the things to try first: The most likely cause for the above error is a wrong date or number format. Changing your local regional settings will probably help:


Windows 7 Launch talk: Building cool applications with MS Expression tools

Windows 7 launch day was fun. I gave a talk on Expression tools (and related) – here’s the PowerPoint slide deck for those who asked for it:

I used Expression Blend 3 to build a photo viewer application, which I’ll blog about later; key points here were designer-developer workflow + using sample data and behaviors.

I blogged about the Microsoft ICE last year and I used that exact sample I’ve used in that blog post, but with one difference: did you know that by installing ICE on your desktop will, you can stitch panoramic (or large composite) photos right from your Windows Live Photo Gallery? It’s as easy as selecting the photos and click on the Extras menu item:

Create Image Composite...

Yet another option for stitching a bunch of photos together will give you the Deep Zoom Composer(free and not listed as an Expression tool, but sure looks and feels like it), which has similar features and much more compositing power (different zoom levels, layers, etc.)

And for closing I briefly showcased Expression Encoder 3 and IIS Smooth Streaming.

Yup, fun.