Andy Wigley : Silverlight

What happens to network calls when your WP7 app goes dormant?

Andy Wigley — Sun, 08 Apr 2012 14:29:00 GMT

In my Windows Phone training courses and workshops, I explain how the application lifecycle works, and how when your app loses focus – because the lock screen comes up, because your app is interrupted by an incoming phone call, because your code has called a launcher or a chooser, or because the user has pressed the start button to go and run something else – the OS takes a copy of the working memory of your app, suspends all threads and at this moment, your app has become dormant. Since the OS has simply stuck this memory snapshot into a cache, once the user has finished with the interruption and returns to your app, the memory snapshot is quickly reloaded and your app continues from where it left off, as if it has never been away. If however, your user runs *lots* of apps after your app is made dormant, then the OSs cache may become exhausted, so the memory snapshot for your app may be discarded and in this case, your app becomes tombstoned.

When your app reactivates, you can find out whether it has come back from dormant or from the ‘deader’ state of tombstoned, by looking at the IsApplicationinstancePreserved property of the ActivatedEventArgs object in the Application_Activated event handler:

// Code to execute when the application is activated (brought to foreground)
// This code will not execute when the application is first launched
private void Application_Activated(object sender, ActivatedEventArgs e)
{
    if (e.IsApplicationInstancePreserved)
    {
        // Back from dormant – generally not a lot you need to do
    }
    else
    {
        // Back from Tombstoned – usually need to execute some logic to restore state
        …
    }
}

So I have always taught that in general, you don’t really have to write any special code to handle the case where we are coming back from dormant.

Except that is a bit of a simplification! It can almost continue exactly from where it left off, but you still have to think about two specific scenarios where you might need to run some logic to get everything truly back to where you left off:

- Time-dependent logic, where your app is waiting for something to happen on a specific timing, so you were using a timer object to trigger some action after some particular time interval. You will probably need to execute some logic on reactivation here to get everything straight.
- Networking calls. All networking calls are asynchronous, so what happens if your app becomes dormant when a networking request has been made, but the response hasn’t come back yet?

Networking Calls and Dormant State

Well, what actually happens is that when your app is reactivated from a dormant state, any calls that were in progress will complete in error. The network call will complete by reporting a WebException with a Status of Request Cancelled. For example, if your are using the WebClient API, the Request Cancelled status can be detected like this:

public class WebDataService
{
    private WebClient webClient = new WebClient();

    public WebDataService()
    {
        webClient.DownloadStringCompleted += new DownloadStringCompletedEventHandler(webClient_DownloadStringCompleted);
    }

    public void FetchUsingWebClient()
    {
         webClient.DownloadStringAsync(new Uri("http://localhost:8414/MyDataService.svc/DataObjects", UriKind.Absolute));
    }

    void webClient_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
    {
        if (e.Error != null)
        {
            if (e.Error is WebException)
            {
                var wEx = e.Error as WebException;
                if (wEx.Status == WebExceptionStatus.RequestCanceled)
                {
                    System.Diagnostics.Debug.WriteLine("Request was cancelled");
                }
                else
                {
                    // Some other WebException. Do something…
                }
            }
            else
            {
                System.Diagnostics.Debug.WriteLine("WebClient failed with " + e.Error.Message);

                // Some other Exception. Do something…
            }
        }
        else
        {
            System.Diagnostics.Debug.WriteLine("Request completed successfully");

            // Got response! Do something…
        }
    } 
}

Networking Calls and Tombstoned State

When your app is reactivated from a tombstoned state, any record or trace of networking calls that were in progress when the app was deactivated has disappeared. It is up to you to store some kind of state relating to any in progress networking calls – in persistent storage, or the Application or Page state dictionaries - when the app is deactivated. You can then retrieve that state data when the app reactivates from tombstoned and execute whatever logic you need to recover.

Creating a Networking Class that Recovers from Dormant and Tombstoned

Armed with the information above, we can now start thinking about how to create a class to use in our Windows Phone apps that can complete networking calls if the app is deactivated when a request has been made but the response has not come back yet. To do this, I developed a simple ODATA web service that returns a list of four dummy data objects. It’s included in the sample code for this post so I’m not going to waste time explaining how it works, but for those who are interested, I built it to serve some simple POCO objects (Plain Old CLR Objects) using excellent instructions I found in this post here.

In a browser, the output from this service looks like this:

However, the key feature of this service is that I’ve programmed in an artificial 5 second delay on any response, so this gives us time to deactivate our app after the request has been made and before the service sends the response back, so we can test our networking class.

It’s always a good idea to encapsulate related logic together into a single class, and in this case I have created a class called WebDataService which will contain the logic to make a request to the web service, return the results (or report an exception) to any clients of this class and it will – by the time we’ve finished – contain logic to recover from dormant or tombstoned state.

First Iteration – Basic Networking Class

My first iteration simply contains the logic to make the call, handle the response and return the received objects by firing a WebDataRequestCompleted event, or if an error is encountered fire a WebDataRequestException event. The client – which is MainForm in the sample app for this post – subscribes to these events so that it is notified when the request completes.

It includes a few nice embellishments: for one thing, it uses a BackgroundWorker to make the request and handle the deserialization of the response on a worker thread so that we keep all that processing off the UI thread, and it contains a private bool property called isRequestActive which is used to ensure this class can only handle one request at a time. It also uses Jeff Wilcox’s Global Progress Indicator solution to show a progress bar while a request is in progress.

The FetchUsingWebClient method sets the Accept header on the request to application/json to request the data from the ODATA service serialized as JSON, and in the webclient_DownloadStringCompleted method, I use the LINQ to JSON capability of the JSON.NET library (http://json.codeplex.com/) to deserialize the JSON and to create the List of DataObject types that is the retrieved data.

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Net;
using NetworkingRecoveryOnReactivationSample.Misc;
using NetworkingRecoveryOnReactivationSample.MyDataServiceReference;
using System.Collections;

namespace NetworkingRecoveryOnReactivationSample
{
    public class WebDataService
    {
        private WebClient webClient = new WebClient();

        public event EventHandler<WebDataRequestCompletedEventArgs> WebDataRequestCompleted;
        public event EventHandler<WebDataRequestExceptionEventArgs> WebDataRequestException;

        private bool isRequestActive { set; get; }

        public WebDataService()
        {
            webClient.DownloadStringCompleted += new DownloadStringCompletedEventHandler(webClient_DownloadStringCompleted);
        }

        public void FetchUsingWebClient()
        {
            // WebClient instance only allows one request at a time
            if (!isRequestActive)
            {
                isRequestActive = true;
                System.Diagnostics.Debug.WriteLine("Starting new Request");

                // Let's do this properly and do our network calls and response processing on a worker thread
                var bgworker = new BackgroundWorker();
                bgworker.DoWork += ((s, e) =>
                    {
                        webClient.Headers["Accept"] = "application/json";
                        webClient.DownloadStringAsync(new Uri("http://localhost:8414/MyDataService.svc/DataObjects", UriKind.Absolute));
                    }
                );
                bgworker.RunWorkerAsync();

                ((App)App.Current).RootFrame.Dispatcher.BeginInvoke(() =>
                    GlobalLoading.Instance.IsLoading = true);
            }
        }

        void webClient_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
        {
            isRequestActive = false;

            ((App)App.Current).RootFrame.Dispatcher.BeginInvoke(()=>
                GlobalLoading.Instance.IsLoading = false);

            if (e.Error != null)
            {
                System.Diagnostics.Debug.WriteLine("WebClient failed with " + e.Error.Message);

                // report exception to client
                if (WebDataRequestException != null)
                    WebDataRequestException(this, new WebDataRequestExceptionEventArgs(e.Error));
            }
            else
            {
                System.Diagnostics.Debug.WriteLine("Request completed successfully");

                // Deserialize using LINQ to JSON
                Newtonsoft.Json.Linq.JObject jObject = Newtonsoft.Json.Linq.JObject.Parse(e.Result);

                var results = from item in jObject["d"]
                              select (new DataObject
                                        {
                                            Id = (int)item["Id"],
                                            Name = (string)item["Name"],
                                            Description = (string)item["Description"],
                                            ANumber1 = (int)item["ANumber1"],
                                            ANumber2 = (int)item["ANumber2"]
                                        });

                // Fire event to inform observers that results are ready
                if (WebDataRequestCompleted != null)
                {
                    WebDataRequestCompleted(this, new WebDataRequestCompletedEventArgs(results.ToList()));
                }
            }
        } 
    }

    public class WebDataRequestCompletedEventArgs : EventArgs
    {
        public WebDataRequestCompletedEventArgs(List<DataObject> objects)
        {
            Data = objects;
        }
        public List<DataObject> Data { get; set; }
    }

    public class WebDataRequestExceptionEventArgs : EventArgs
    {
        public WebDataRequestExceptionEventArgs(Exception exc)
        {
            Error = exc;
        }
        public Exception Error { get; set; }
    }
}

To use this class, I create it and expose an instance of this class through a property in App.xaml.cs:

public partial class App : Application
{
    private static WebDataService webDataService;

    public static WebDataService WebDataService
    {
        get
        {
            if (webDataService == null)
                webDataService = new WebDataService();

            return webDataService;
        }
    }

and in my MainPage.xaml.cs, I hook and unhook the events and make the call to the FetchUsingWebClient method to make the request. I’m not showing the XAML of the UI here, but if you download the sample, you’ll see that it has a button on it to make the request, and a ListBox to show the results:

public partial class MainPage : PhoneApplicationPage
{
    // Constructor
    public MainPage()
    {
        InitializeComponent();
    }

    protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
    {
        base.OnNavigatedTo(e);

        App.WebDataService.WebDataRequestCompleted += new EventHandler<WebDataRequestCompletedEventArgs>(WebDataService_WebDataRequestCompleted);
    }

    protected override void OnNavigatedFrom(System.Windows.Navigation.NavigationEventArgs e)
    {
        base.OnNavigatedFrom(e);

        App.WebDataService.WebDataRequestCompleted -= new EventHandler<WebDataRequestCompletedEventArgs>(WebDataService_WebDataRequestCompleted);
    }

    void WebDataService_WebDataRequestCompleted(object sender, WebDataRequestCompletedEventArgs e)
    {
        Dispatcher.BeginInvoke(()=>
            this.DataObjectsListBox.ItemsSource = e.Data
        );
    }

    private void btnWebClient_Click(object sender, RoutedEventArgs e)
    {
        // Clear context first
        this.DataObjectsListBox.ItemsSource = null;

        App.WebDataService.FetchUsingWebClient();
    }
}

Implementing Automatic Recovery when Reactivating from Dormant

If you run the app using the code as shown above, and press the button on the main page, you’ll see the progress indicator at the top of the page and after about 5 seconds, the web service returns the data and it shows up in the ListBox. So far, so good!

However, if you press the Windows ‘Start’ button on the phone after pressing the WebClient button and before the response comes back, then the app is deactivated and is dormant. Press the Back button on the phone and your app is reactivated but the data does not appear. The data service class fires the WebDataRequestException event to report that the request failed with a WebException.

We can easily update the WebDataService class to allow it to retry the request in this situation. A simple solution would simply be to implement an automatic retry when the request fails with a Request Cancelled status, but I’ve implemented a slightly more refined solution. I’ve added a public bool property called IsReactivatingFromDormant which we can set from our Application_Activating event handler if we are reactivating from dormant and is just a flag that the logic in webClient_DownloadStringCompleted can query the very next time it processes a response. If the flag is set, and the request fails with a Request cancelled status, then we just make the request again. Changes are shown here in italics:

/// <summary>
/// Property that can be set from Application_Activating to allow retry of incomplete requests
/// </summary>
public bool IsReactivatingFromDormant { set; private get;  }

…


void webClient_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
{
    isRequestActive = false;

    ((App)App.Current).RootFrame.Dispatcher.BeginInvoke(()=>
        GlobalLoading.Instance.IsLoading = false);

    if (e.Error != null)
    {
        if (e.Error is WebException)
        {
            var wEx = e.Error as WebException;
            if (wEx.Status == WebExceptionStatus.RequestCanceled)
            {
                System.Diagnostics.Debug.WriteLine("Request was cancelled");

                // Are we just restarting from dormant?
                if (this.IsReactivatingFromDormant)
                {
                    // Request was probably cancelled due to the app going dormant
                    this.IsReactivatingFromDormant = false;
                    // Retry
                    FetchUsingWebClient();
                }
            }
            else
            {
                System.Diagnostics.Debug.WriteLine("Request failed with WebException: " + wEx.Message);

                // report exception to client
                if (WebDataRequestException != null)
                    WebDataRequestException(this, new WebDataRequestExceptionEventArgs(e.Error));
            }
        }
        else
        {
            System.Diagnostics.Debug.WriteLine("WebClient failed with " + e.Error.Message);

            // report exception to client
            if (WebDataRequestException != null)
                WebDataRequestException(this, new WebDataRequestExceptionEventArgs(e.Error));
        }
    }
    else
    {
        System.Diagnostics.Debug.WriteLine("Request completed successfully");

        // Deserialize using LINQ to JSON
        …
    }

    this.IsReactivatingFromDormant = false;
}

You just set this flag from your Application_Activated event handler:

// Code to execute when the application is activated (brought to foreground)
// This code will not execute when the application is first launched
private void Application_Activated(object sender, ActivatedEventArgs e)
{
    if (e.IsApplicationInstancePreserved)
    {
        // Set flag on the data service to allow retry of requests that failed because we went dormant
        WebDataService.IsReactivatingFromDormant = true;
    }
}

With this enhancement, you can cause the app to be deactivated and then reactivated, and the request will be reissued without reporting an error.

Implementing Automatic Recovery when Reactivating from Tombstoned

If you now go into the Project Properties window and check the Tombstone upon Deactivation checkbox and repeat the exercise – deactivate and then reactivate – the app will be tombstoned instead of dormant when you deactivate it.

In this case no data is shown and no error is reported, because when the app is reactivated from a tombstoned state, a new instance of our WebDataService class is created and there is no record of the previous abandoned request. We must implement logic in our data service class to save its state on deactivation and record whether a request was in progress, and then to restore that state on reactivation and if that state tells us that a request *was* in progress, then reissue the request.

This logic can be implemented by a pair of methods: SaveState and RestoreState:

private const string WebDataServiceIsRequestActiveKey = "WebDataServiceIsRequestActive";

/// <summary>
/// Method called from Application_Deactivating to save state
/// </summary>
/// <param name="state">Application State Dictionary</param>
public void SaveState(IDictionary<string, object> state)
{
    // save data on whether we have an active request in the state
    state[WebDataServiceIsRequestActiveKey] = isRequestActive;
}

/// <summary>
/// Method called from Application_Activated if returning from Tombstoned
/// </summary>
/// <param name="state">Application State Dictionary</param>
public void RestoreState(IDictionary<string, object> state)
{
    // See if we have an incomplete request in the state
    if (state.ContainsKey(WebDataServiceIsRequestActiveKey))
    {
        if ((bool)state[WebDataServiceIsRequestActiveKey])
        {
            // Restart the request
            FetchUsingWebClient();
        }
    }            
}

Simply call these methods from Application_Deactivating and Application_Reactivating to implement this new functionality:

// Code to execute when the application is activated (brought to foreground)
// This code will not execute when the application is first launched
private void Application_Activated(object sender, ActivatedEventArgs e)
{
    if (e.IsApplicationInstancePreserved)
    {
        // Set flag on the data service to allow retry of requests that failed because we went dormant
        WebDataService.IsReactivatingFromDormant = true;
    }
    else
    {
        // Restore state of the service
        WebDataService.RestoreState(PhoneApplicationService.Current.State);
    }
}

// Code to execute when the application is deactivated (sent to background)
// This code will not execute when the application is closing
private void Application_Deactivated(object sender, DeactivatedEventArgs e)
{
    // Get the data service to save its state
    WebDataService.SaveState(PhoneApplicationService.Current.State);
}

Summary

This post has shown one technique for handling networking calls that can recover if the app is deactivated while a request is in progress. Every app has its own requirements, so this solution will not necessarily suit all situations. However, in many cases, the general approach shown here of placing your networking code into a dedicated class and implementing recovery logic will allow your apps to continue functioning correctly throughout the different stages of the application lifecycle.

How to Databind SelectedItems of the ListPicker and RecurringDaysPicker

Andy Wigley — Thu, 02 Feb 2012 09:41:41 GMT

The ListPicker control from the Silverlight Toolkit is one of those Swiss Army Knife controls – very versatile and really useful. It wasn’t quite versatile enough for me though, as one thing it does *not* do is support setting the SelectedItems property when you have the control configured for multiple selections, which is something I wanted to do, and something you will certainly need to do if you ever want to pre-select some items from the list or you want to databind the SelectedItems property to a property in a data object. In this post, I will show you how to extend the ListPicker so that you can set the SelectedItems property. I will also show you how to do the same thing with the RecurringDaysPicker control from the Silverlight Toolkit, which it turns out, is just a ListPicker configured to allow selection from the days of the week.

ListPicker in Single Selection Mode

The ListPicker is a bit like a ComboBox, and to use it you set its ItemsSource property to say, a List<string> or a list of complex objects and if your list has five or fewer items, when the user taps on it, the list expands in-situ, (as shown with the background selector in the following picture), and if your list has more than five items (as with the accent color selector in the picture), then the control expands to what is called ‘Full Mode’, in other words it shows a new screen (right hand screenshot below) with all the items on it and the user can select from the list. And all that user experience is built into the control and comes for free!

In your code of course, you want to know which item the user selected, and the easy way to do this is to get the ListPicker’s SelectedItem or SelectedIndex property. More usually, you would use the SelectedIndex property particularly if you are using MVVM as it is easy to save the SelectedIndex when you serialize your viewmodel class and restore it when you deserialize the next time your user starts your app or the app returns from tombstoning. However, the SelectedIndex property is only useful when the ListPicker is in single selection mode, i.e. has its SelectionMode property set to Single, which is the default.

ListPicker in Multiple Selection Mode

The ListPicker also supports multiple selections from the user. To use it in this mode, you just set the SelectionMode property to Multiple and now when the user taps on the control, the full mode screen displays with checkboxes so the user can select more than one entry from the list. For example, the sample app for this post looks a bit like this, where the Football Teams control is a ListPicker in MultiSelect mode:

It’s quite simple to program the ListPicker for this kind of usage. First of all, you need to define the templates to use for the list displays, one to be used if the ListPicker items is less than or equal to 5, and one to be used for the full page display whn the number of items is more than that. I’ve defined them in the PhoneApplicationPage.Resources on MainPage.xaml:

    <phone:PhoneApplicationPage.Resources>
        <DataTemplate x:Name="PickerItemTemplate">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Name}" Style="{StaticResource PhoneTextNormalStyle}"/>
            </StackPanel>
        </DataTemplate>
        <DataTemplate x:Name="PickerFullModeItemTemplate">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Name}" Style="{StaticResource PhoneTextNormalStyle}"/>
                <TextBlock Text="{Binding League}" Margin="12 0 0 0" Style="{StaticResource PhoneTextSubtleStyle}"/>
            </StackPanel>
        </DataTemplate>
    </phone:PhoneApplicationPage.Resources>

And you then assign those templates where you declare the ListPicker control:

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <TextBlock Height="30" HorizontalAlignment="Left" Margin="12,73,0,0" Name="textBlock1" Text="Multiselect ListPicker:" VerticalAlignment="Top" />             
            <toolkit:ListPicker Height="100" HorizontalAlignment="Left" Margin="9,109,0,0" x:Name="listPicker1" VerticalAlignment="Top" Width="441" 
                                SelectionMode="Multiple" ItemsSource="{Binding FootballTeams}"
                                Header="Football Teams" FullModeHeader="Football Teams" 
                                ItemTemplate="{StaticResource PickerItemTemplate}" FullModeItemTemplate="{StaticResource PickerFullModeItemTemplate}"/>
            <toolkit:RecurringDaysPicker x:Name="recurringDaysPicker1" Margin="198,259,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Width="212"/>
            <TextBlock Height="41" HorizontalAlignment="Left" Margin="12,275,0,0" Name="textBlock2" Text="Recurring Days:" VerticalAlignment="Top" Width="166" />
            <Button Content="Set ViewModel Props" Height="93" HorizontalAlignment="Left" Margin="71,433,0,0" Name="button1" VerticalAlignment="Top" Width="306" Click="button1_Click" />
        </Grid>

You’ll notice that the templates contain TextBlock controls that are databound to fields Name and League, and the ItemsSource for the ListPicker is bound to something called FootballTeams. FootballTeams is a property of type List<FootballTeam> on my MainViewModel class:

using System.Collections.Generic;
using System.ComponentModel;
using System.Collections.ObjectModel;

namespace SelectedItemsDataBindSample
{
    public class MainViewModel : INotifyPropertyChanged
    {
        public const string FootballTeamsPropertyName = "FootballTeams";
        private List<FootballTeam> _footballTeams = new List<FootballTeam>();

        public List<FootballTeam> FootballTeams
        {
            get
            {
                return _footballTeams;
            }
            set
            {
                if (_footballTeams == value)
                {
                    return;
                }

                _footballTeams = value;
                RaisePropertyChanged(SelectedTeamsPropertyName);
            }
        }

        public MainViewModel()
        {
        }

        public event PropertyChangedEventHandler PropertyChanged;

        private void RaisePropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }
}

The FootballTeam class looks like this:

public class FootballTeam
{
    public string Name { get; set; }
    public string League { get; set; }

    public FootballTeam()
    {  }

    public FootballTeam(string name, string league)
    {
        Name = name;
        League = league;
    }
}

The sample app creates an instance of MainViewModel in my App.Xaml.cs, and exposes it via a property called ViewModel:

public partial class App : Application
{
    private static MainViewModel viewModel = null;

    /// <summary>
    /// A static ViewModel used by the views to bind against.
    /// </summary>
    /// <returns>The MainViewModel object.</returns>
    public static MainViewModel ViewModel
    {
        get
        {
            // Delay creation of the view model until necessary
            if (viewModel == null)
            {
                viewModel = new MainViewModel();
                viewModel.FootballTeams = new List<FootballTeam>()
                                            {
                                                new FootballTeam("Leeds", "Championship"),
                                                new FootballTeam("Man U", "Premiership"),
                                                new FootballTeam("Man C", "Premiership"),
                                                new FootballTeam("Chelsea", "Premiership"),
                                                new FootballTeam("Liverpool", "Premiership"),
                                                new FootballTeam("Spurs", "Premiership"),
                                            };
            }

            return viewModel;
        }
    }
}

and the final piece of the jigsaw is to set this instance of MainViewModel to be the DataContext for MainPage.xaml. Notice also that I have set the SummaryForSelectedItemsDelegate property to a method I have written called SummarizeTeams. This is how you provide the ‘summary text’ representation of the users’ selections which is displayed on the MainPage, on the ‘normal’ rendering of the ListPicker before the user interacts with it, by providing a method like this that takes an IList parameter and returns a string:

public partial class MainPage : PhoneApplicationPage
{
    // Constructor
    public MainPage()
    {
        InitializeComponent();
        this.DataContext = App.ViewModel;

        this.listPicker1.SummaryForSelectedItemsDelegate = SummarizeTeams;
    }

    protected string SummarizeTeams(IList selection)
    {
        string str = "*None Selected*";

        if (null != selection && selection.Count > 0)
        {
            StringBuilder contents = new StringBuilder();
            int idx = 0;
            foreach (object o in selection)
            {
                if (idx > 0) contents.Append(", ");
                contents.Append(((FootballTeam)o).Name);
                idx++;
            }
            str = contents.ToString();
        }

        return str;
    }
}

Getting – and Setting – the SelectedItems

After a user has selected items from the ListPicker, you can easily find out what the selected items are by hooking the SelectionChanged event and in the event handler, enumerate the SelectedItems collection. For example:

private void listPicker1_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
{
    StringBuilder msg = new StringBuilder();
    msg.Append("Selected Teams:");

    if (listPicker1.SelectedItems != null)
    {
        foreach (var item in listPicker1.SelectedItems)
        {
            var team = item as FootballTeam;
            msg.Append(" " + team.Name);
        }
    }

    System.Diagnostics.Debug.WriteLine(msg.ToString());
}

Extending the ListPicker to Support Setting of SelectedItems

Using the standard control, there’s no way to programmatically set the SelectedItems, either by setting the SelectedItems property directly, or by exposing a collection of selected objects through a property of a ViewModel class and using databinding. This is because the SelectedItems property is a read-only property, as revealed if you browse the control class in the Object Browser:

So if you want to set the SelectedItems, we must change the implementation of this property and add a setter to it as well.

There are two ways to do this:

Download the source for the silverlight toolkit from http://silverlight.codeplex.com and modify it yourself so you run with a customised version
Create your own custom control that inherits from ListPicker and implement the altered SelectedItems property in there.

I prefer option 2, as it turns out the code you need to write is pretty simple, and it’s a simpler solution – you can just add your reference to the Silverlight Toolkit assembly through NuGet or directly, and then inherit from the standard ListPicker in your custom control.

The code you need to add a setter to the SelectedItems property looks like this:

using Microsoft.Phone.Controls;
using System.Collections;

namespace SelectedItemsDataBindSample
{
    public class ListPickerEx : ListPicker
    {
        /// <summary>
        /// Gets or sets the selected items.
        /// </summary>
        public new IList SelectedItems
        {
            get
            {
                return (IList)GetValue(SelectedItemsProperty);
            }
            set
            {
                base.SetValue(SelectedItemsProperty, value);
            }
        }
    }
}

That’s it! You can do the same for the RecurringDaysPicker with identical code, and this is demonstrated as well in the sample code for this post.

To use your custom control, first declare the namespace for your custom controls in the Xaml at the top of your page (in this example, these controls are just in the SelectedItemsDataBindSample namespace, in the project assembly):

<phone:PhoneApplicationPage 
    x:Class="SelectedItemsDataBindSample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    xmlns:local="clr-namespace:SelectedItemsDataBindSample"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True" 
    >

and where you declare the ListPicker, simply substitute local:ListPickerEx for toolkit:ListPicker:

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <local:ListPickerEx Height="100" HorizontalAlignment="Left" Margin="9,109,0,0" x:Name="listPicker1" VerticalAlignment="Top" Width="441" 
                                SelectionMode="Multiple" ItemsSource="{Binding FootballTeams}"
                                SelectedItems="{Binding SelectedTeams, Mode=TwoWay}"
                                SelectionChanged="listPicker1_SelectionChanged"
                                Header="Football Teams" FullModeHeader="Football Teams" 
                                ItemTemplate="{StaticResource PickerItemTemplate}" FullModeItemTemplate="{StaticResource PickerFullModeItemTemplate}"/>
            <TextBlock Height="30" HorizontalAlignment="Left" Margin="12,73,0,0" Name="textBlock1" Text="Multiselect ListPicker:" VerticalAlignment="Top" />
            <local:RecurringDaysPickerEx x:Name="recurringDaysPicker1" Margin="198,259,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Width="212" 
                                         SelectedItems="{Binding SelectedDays, Mode=TwoWay}" />
            <TextBlock Height="41" HorizontalAlignment="Left" Margin="12,275,0,0" Name="textBlock2" Text="Recurring Days:" VerticalAlignment="Top" Width="166" />
            <Button Content="Set ViewModel Props" Height="93" HorizontalAlignment="Left" Margin="71,433,0,0" Name="button1" VerticalAlignment="Top" Width="306" Click="button1_Click" />
            <Button Content="Set SelectedItems" Height="93" HorizontalAlignment="Left" Margin="71,514,0,0" Name="button2" VerticalAlignment="Top" Width="306" Click="button2_Click" />
        </Grid>

Now you could have code similar to the following to programmatically set the SelectedItems:

// Get the full collection of items:
List<FootballTeam> allItems = listPicker1.ItemsSource as List<FootballTeam>;

// Set the SelectedItems to the 5th and 6th teams
listPicker1.SelectedItems = new ObservableCollection<object>() { allItems[4], allItems[5] };

The key thing to remember here is that the collection of items you set the SelectedItems property to must be a collection containing zero, 1 or more of the exact same objects that are in the main list of items that you supplied for the ItemsSource. The only qualification here is that if your data objects are just simple strings, as is the case with a RecurringDaysPicker for example, then you can just supply a collection of strings for SelectedItems as well – as long as the supplied strings exist in the ItemsSource as well of course.

Using Two-Way DataBinding with SelectedItems

You can also databind the SelectedItems property to a property in a View Model class. The trick here is to declare the property in your view model as type ObservableCollection<object>. In my sample code for this post, I started out by doing the obvious thing of defining a property of type ObservableCollection<FootballTeam>, but it turns out that doesn’t work. Internally the control expresses its list of selected items as an ObservableCollection<object> so when you declare two-way data binding and the control tries to set the bound property in the View Model, it doesn’t know how to convert between an ObservableCollection<object> and an ObservableCollection<FootballTeam> – so just declare the bindable property in your ViewModel as ObservableCollection<object> and everything works fine.

In the FootballTeam sample, the ViewModel class now has a new public property called SelectedTeams:

public class MainViewModel : INotifyPropertyChanged
{
    ...


    /// <summary>
    /// The <see cref="SelectedDays" /> property's name.
    /// </summary>
    public const string SelectedTeamsPropertyName = "SelectedTeams";

    private ObservableCollection<object> _mySelectedTeams = new ObservableCollection<object>();

    /// <summary>
    /// Sets and gets the SelectedTeams property.
    /// Changes to that property's value raise the PropertyChanged event. 
    /// </summary>
    public ObservableCollection<object> SelectedTeams
    {
        get
        {
            return _mySelectedTeams;
        }
        set
        {
            if (_mySelectedTeams == value)
            {
                return;
            }

            _mySelectedTeams = value;
            RaisePropertyChanged(SelectedTeamsPropertyName);
        }
    }
    
    ...

And in the MainPage.xaml, the SelectedItems property is databound to the new property:

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <local:ListPickerEx Height="100" HorizontalAlignment="Left" Margin="9,109,0,0" x:Name="listPicker1" VerticalAlignment="Top" Width="441" 
                                SelectionMode="Multiple" ItemsSource="{Binding FootballTeams}"
                                SelectedItems="{Binding SelectedTeams, Mode=TwoWay}"
                                SelectionChanged="listPicker1_SelectionChanged"
                                Header="Football Teams" FullModeHeader="Football Teams" 
                                ItemTemplate="{StaticResource PickerItemTemplate}" FullModeItemTemplate="{StaticResource PickerFullModeItemTemplate}"/>
           ...
        </Grid>

If you run this sample and tap on the ListPickerEx on the screen and then select some teams, the control sets the SelectedTeams property of the underlying MainViewModel instance. If you tap on the Set ViewModel Props button, the code behind directly sets the SelectedTeams property of the MainViewModel object, and through the magic of databinding, the UI updates. The sample also does the same thing for a RecurringDaysPicker for which the solution is virtually identical.

This sample also implements proper support for tombstoning and saving and restoring state when closed and later re-opened. To do this, it (de)serializes the MainViewModel object to and from isolated storage. This raises more interesting questions on how best to serialize an object that has a property (SelectedTeams) that exposes a list of object references rather than actual object instances. This is demonstrated in the sample code, but the explanation will be the subject for my next post…

Download the sample code

Silverlight Toolkit ToggleSwitch Databinding Bug

Andy Wigley — Wed, 18 Jan 2012 15:23:00 GMT

Are you using MVVM? Are you using the ToggleSwitch from the Silverlight Toolkit? Have you got a weird bug where a ToggleSwitch that has its IsChecked property databound to a bool or a bool? property of a ViewModel doesn’t always seem to display the correct ON or OFF value? It may be you have encountered a rather subtle bug in the ToggleButton control.

I have just been developing an app using MVVM and noticed a problem with the ToggleSwitch control from the Silverlight Toolkit for Windows Phone (November 2011 release). I noticed that a ToggleSwitch that had its IsChecked property databound to a ViewModel class did not update the ToggleSwitch UI as expected – but only when the bound property on the viewmodel is changed from true to false and only when the ToggleSwitch is not visible. Puzzled? Let me explain…

This can be easily demonstrated by a slight variant on the well-known Databound App that you can create using the standard project templates. I added an additional property to the ItemViewModel class so alongside the existing LineOne, LineTwo and LineThree properties, it now has an additional property of type bool? called IsActive:

public class ItemViewModel : INotifyPropertyChanged
{
    public string LineOne  { ... }

    public string LineTwo  { ... }

    public string LineThree { ... }
    
    private bool? _isActive;

    public bool? IsActive
    {
        get
        {
            return _isActive;
        }
        set
        {
            if (value != _isActive)
            {
                _isActive = value;
                NotifyPropertyChanged("IsActive");
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    ...

Next, I changed the DataTemplate for the ListBox on the main page so that it displays a ToggleSwitch with its IsChecked property databound to the new IsActive property of my ViewModel. For interest, I also added a Checkbox databound in a similar way because ToggleSwitch inherits from CheckBox and I wanted to see if the problem existed with the CheckBox as well. So the DataTemplate looks like this:

            <ListBox x:Name="MainListBox" Margin="0,0,-12,0" ItemsSource="{Binding Items}" SelectionChanged="MainListBox_SelectionChanged">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                      <StackPanel Margin="0,0,0,17" Width="432">
                          <TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                          <TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
                          <CheckBox  Content="Is Active" IsChecked="{Binding IsActive}" IsEnabled="False" Margin="0,-6,0,0"/>
                          <toolkit:ToggleSwitch Margin="0,-36,0,0" IsChecked="{Binding IsActive}" IsEnabled="False"/>
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>

Next i updated the code in the constructor of MainViewModel so that it sets ‘runtime one’ IsActive to false, ‘runtime two’ IsActive to true and ‘runtime three’ IsActive to null. When running the List looks like this, just as you would expect:

The CheckBox and the ToggleSwitch controls in the template display the UI you would expect, Unchecked/Off for runtime one, Checked/On for runtime two and Indeterminate/Off for Runtime three.

When you tap on an item in the ListBox, the standard Databound App navigates to DetailsPage.xaml, and in my version, I have added a ToggleSwitch to that page with its IsChecked property databound to the IsActive property. I also added an ApplicationBar to that page with an ‘Edit’ button on it that when pressed navigates to another page called EditDetailsPage.xaml which is similar to DetailsPage.xaml but uses two-way databinding to allow you to edit the fields of the underlying data item. It looks like this:

[I won’t go into the simple code behind this – download the sample code that accompanies this post to see how this is implemented ].

Remember that when the app starts up, the ‘runtime one’ object has IsActive set to false, so the checkbox and ToggleSwitch in the full list on MainPage.xaml are ‘Off’. If you then tap on the Runtime One record in the ListBox, the app navigates to DetailsPage.xaml to show the details of that record. If I then tap on the application bar Edit button, the app navigates to EditDetailsPage.xaml. On that edit page, I have checked the CheckBox so thanks to two-way databinding, the IsActive property of ‘runtime one’ is now set to true. So of course, as we navigate back through the pages, the ToggleSwitch and Checkbox controls that are bound to that property will be checked, correct?

Correct. Everything is as it should be:

So, no problem there. The ToggleSwitch on DetailsPage.xaml is correctly shown as ‘On’ (the left hand screenshot), and on MainPage.xaml, the CheckBox and the ToggleSwitch in the list for runtime one have correctly detected that IsActive property is now true, so are showing as Checked and On respectively.

Now we‘ll reverse that and set IsActive to false again. So tap on runtime one in the list and we navigate to the DetailsPage.xaml, then tap on the edit button in the appbar and we navigate to EditDetailspage.xaml. Tap the checkbox to clear it and then tap Save. This is where things go wrong . The ToggleSwitch controls both on DetailsPage.xaml and in the DataTemplate for the ListBox on MainPage.xaml do not pick up the fact that IsActive is now false – though the CheckBox controls *do* pick it up and display unchecked:

As you can see, the Checkbox has been cleared on the first edit screen – this causes the IsActive property of the viewmodel to be set to false. Pressing the save button on that screen causes a navigation back to the View Details screen (middle screen shot) and as you can see, the ToggleSwitch on that screen hasn’t picked up the fact that the viewmodel has changed since it is still set to On. Another press of the Back key puts you back on the main page, where the ListBox displays both a CheckBox and a ToggleSwitch databound to the IsActive property and here the CheckBox is unset but the ToggleSwitch is still On.

Note that this problem only occurs when the databound ToggleSwitches are not visible. When the IsActive property of the viewmodel class is set, it fires PropertyChanged events in the normal way. In Windows Phone, as you navigate through pages, the control objects that are on the parent screens (such as MainPage.xaml and DetailsPage.xaml in this example) stay in memory but are not rendered to the screen. Although the TextBox and CheckBox controls respond correctly to changes in a databound property of an underlying viewmodel class, the ToggleSwitch does not – well at least not when a bool? type is changed from true to false!

In the download for this post, I’ve included another simple project that shows that there is no problem with a databound ToggleButton as long as it is visible.

The workaround for this? You have to force the ToggleButton to refresh its binding and this is best done in OnNavigatedTo. For example, in OnNavigatedTo on DetailsPage.xaml, add code such as:

protected override void OnNavigatedTo(NavigationEventArgs e)
{

    ...


    // Force the ToggleButton to refresh its binding
    ItemViewModel vm = this.DataContext as ItemViewModel;
    this.ToggleSwitch1.IsChecked = vm.IsActive;
}

For the ListBox on MainPage.xaml, you could use a blunt stick approach and simply toggle the setting of the ItemsSource to force it to renew all its bindings:

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
    base.OnNavigatedTo(e);

    // Toggle the ItemsSource setting to force the ToggleSwitches to rebind
    this.MainListBox.ItemsSource = null;
    this.MainListBox.ItemsSource = App.ViewModel.Items;
}

It’s ugly but effective. More elegant solutions would be possible using the VisualTreeHelper to identify the ToggleButton instances and to refresh them individually, but I leave that as an exercise for the reader

Windows Phone LINQ to SQL and Data Virtualization

Andy Wigley — Wed, 14 Dec 2011 12:05:01 GMT

How to work with large tables in LINQ to SQL on Windows Phone

Introduction to Data Virtualization

Data Virtualization is a technique you use to expose a subset of the data from a large data collection so that only the actual data you need is fetched into memory. To implement data virtualization, you take your data collection which could contain any number of rows – even a million rows or more! – and you create a custom class for your virtualized data collection that implements IList<T> and acts as a facade to the underlying data collection.

IList<T> has a great many methods, but fortunately the only methods you have to implement are:

public int Count

T IList<T>.this[int index]

The count property just returns the number of items in the underlying data collection, while the second is just the indexer and allows you to retrieve the ‘nth’ item from the underlying collection. The rest of the methods of IList<T> must of course be implemented in your virtualized data collection class, but you can just throw the NotImplemented exception – in most usages, they will not be called. The only other method of IList<T> that you might choose to implement is public int IndexOf(Titem) which returns the position of an item in the underlying collection. This becomes useful when you want to do lookups in the collection.

In Windows Phone apps, this is beneficial when you want to display a long list of items in a ListBox. Just set your ListBox ItemsSource property to an instance of your virtualized data collection class, and the ListBox will only fetch the visible items and a few either side (to assist with scrolling up and down the list). You can read more about this technique in Shawn Oster’s blog: Improving ListBox Performance in Silverlight for Windows Phone 7: Data Virtualization or in Peter Torr’s blog: Virtualizing Data in Windows Phone 7 Silverlight Applications.

Data Virtualization with LINQ to SQL

So, on to the purpose of this post. I wondered how to implement data virtualization using LINQ to SQL in Windows Phone Mango. For my test database, I created a database with a single table in it which could be used in a dictionary application. It has 200000 entries in it, and the the Word table looks like this:

Ignore the Sequence column for now – we’ll come back to that at the end. The WordTxt column is up to 128 characters in length and is the Primary Key, while the WordDescription column is up to 1024 characters and holds the description of the word. I’ve filled the table with randomly generated data (using a contorted process – see footnote ) and now we can try to bind the data in this table to a ListBox.

You can download the sample project here (it’s nearly 50MB since it contains a database that is 107MB when decompressed). Compile the project and deploy it onto your target emulator or device.

IMPORTANT: The database is included in the project, but its Build Action is set to ‘None’ and Copy to Output Directory set to ‘Do not copy’ – so you’ll have to manually copy the database onto the target. I’ve done it this way because if you include the database as Content it takes around 5 minutes to build and deploy the app which is tedious when you’re playing with the code. So to deploy the database, either change its Build Action to Embedded Resource and then go away and have a cup of tea while it’s deploying, or use the Isolated Storage Explorer Tool to copy it to the target, or better still the nice tools at http://wptools.codeplex.com .

In the project, in the App.xaml.cs I initialize the data context appropriately for a read only database:

public DictionaryDatabaseContext DbDC;

// Code to execute when the application is launching (eg, from Start)
// This code will not execute when the application is reactivated
private void Application_Launching(object sender, LaunchingEventArgs e)
{
    DbDC = new DictionaryDatabaseContext(
        "Data Source=isostore:/DictionaryDatabase.sdf;Max Database Size=180;File Mode=Read Only;");
    DbDC.ObjectTrackingEnabled = false;
}

// Code to execute when the application is activated (brought to foreground)
// This code will not execute when the application is first launched
private void Application_Activated(object sender, ActivatedEventArgs e)
{
    if (!e.IsApplicationInstancePreserved)
    {
        DbDC = new DictionaryDatabaseContext(
            "Data Source=isostore:/DictionaryDatabase.sdf;Max Database Size=180;File Mode=Read Only;");
        DbDC.ObjectTrackingEnabled = false;
    }
}

The main page just has four buttons on it which navigate to four different pages which use differing ways of binding to the data:

Every page has a ListBox on it which uses the following DataTemplate to format the display of items in the list:

        <DataTemplate x:Key="WordTemplate">
            <StackPanel>
                <TextBlock Text="{Binding WordTxt}" 
                           Style="{StaticResource PhoneTextAccentStyle}"/>
                <TextBlock Text="{Binding WordDescription}" 
                           Style="{StaticResource PhoneTextSmallStyle}" 
                           Width="436" TextWrapping="Wrap" Margin="12,0,12,12" Height="75"/>
            </StackPanel>
        </DataTemplate>

Option 1: Bind directly to the database table

This is just to prove the point. The ‘Load All’ button navigates to a page that just binds the ListBox directly to the database table:

using Microsoft.Phone.Controls;

namespace LargeDBAppSample.Views
{
    public partial class LoadAllPage : PhoneApplicationPage
    {
        public LoadAllPage()
        {
            InitializeComponent();
            this.Loaded += ((s, e) =>
            {
                DictionaryDatabaseContext dc = ((App)App.Current).DbDC;
                listBox1.ItemsSource = dc.Words;
            }
           );
        }
    }
}

When you try this option, the result is predictable. I’m using Peter Torr’s very helpful MemoryDiagnosticsHelper which writes the memory usage alongside the Framerate counters. This throws a debug assert when memory exceeds 90MB, and in this case we hit 104MB:

Option 2: Data Virtualization – Bad Implementation

The second button on the main page takes you to a page that uses data virtualization. In this case, we also have a textbox where the user can enter a search string – because let’s face it, a ListBox that contains 200000 items is not going to give a good user experience. Scroll down to the bottom to find the ‘Y’s?? – I don’t think so .

So the code for the page here looks like this:

public partial class BadDataVirtualizationPage : PhoneApplicationPage
{
    public BadDataVirtualizationPage()
    {
        InitializeComponent();

        this.Loaded += ((s, e) =>
            {
                listBox1.ItemsSource = new BadVirtualizedDataModel();
            }
        );
    }

    private void txtSearch_TextChanged(object sender, TextChangedEventArgs e)
    {
        DictionaryDatabaseContext dc = ((App)App.Current).DbDC;

        var words = from w in dc.Words
                    where w.WordTxt.StartsWith(txtSearch.Text)
                    select w;

        if (words.Count() == 0)
            MessageBox.Show("No matches");
        else
            listBox1.ScrollIntoView(words.First<Word>());
    }
}

As you can see, the ListBox is bound to an instance of BadVirtualizedDataModel. Why is it bad? I’ll explain shortly….

The class implements IList<Word> and as you can see below, it returns the count (which is cached since for some reason the ListBox asks for it multiple times). The indexer property uses some LINQ to SQL to fetch the item in the table at a particular index, and I write the time taken to the Debug Output window. The whole class looks like this:

using System;
using System.Linq;
using System.Collections;
using System.Collections.Generic;
using System.Diagnostics;

namespace LargeDBAppSample.Model
{
    public class BadVirtualizedDataModel : IList<Word>
    {
        private DictionaryDatabaseContext dc = ((App)App.Current).DbDC;
        int? cachedCount = null;

        public int Count
        {
            get {
                if (!cachedCount.HasValue)
                {
                    var wordcount = dc.Words.Count();
                    cachedCount = wordcount;
                }
                return cachedCount.Value; 
            }
        }

        Word IList<Word>.this[int index]
        {
            get
            {
                Stopwatch sw = Stopwatch.StartNew();

                var word = (from w in dc.Words
                            orderby w.WordTxt
                            select w).Skip(index).Take(1).First();
                
                Debug.WriteLine("Fetched {0} in {1}ms", new object[] { index, sw.ElapsedMilliseconds });
                return word;
            }
            set
            {
                throw new NotImplementedException();
            }
        }

        public int IndexOf(Word item)
        {
            Stopwatch sw = Stopwatch.StartNew();

            var matches = (from w in dc.Words select w).AsEnumerable()
                .Select((matchItem, index) => new { Item = matchItem, Position = index })
                            .Where(x => x.Item.WordTxt == item.WordTxt);

            int position = matches.First().Position;

            Debug.WriteLine("Found position of {0} in {1}ms", new object[] { item.WordTxt, sw.ElapsedMilliseconds });

            return position;
        }

        #region NotRequired

        public int Add(object value)
        {
            throw new NotImplementedException();
        }

        public void Clear()
        {
            throw new NotImplementedException();
        }

        public bool Contains(object value)
        {
            throw new NotImplementedException();
        }

        public void Insert(int index, object value)
        {
            throw new NotImplementedException();
        }

        public bool IsFixedSize
        {
            get { throw new NotImplementedException(); }
        }

        public bool IsReadOnly
        {
            get { throw new NotImplementedException(); }
        }

        public void RemoveAt(int index)
        {
            throw new NotImplementedException();
        }

        public bool IsSynchronized
        {
            get { throw new NotImplementedException(); }
        }

        public object SyncRoot
        {
            get { throw new NotImplementedException(); }
        }

        public void Insert(int index, Word item)
        {
            throw new NotImplementedException();
        }

        public void Add(Word item)
        {
            throw new NotImplementedException();
        }

        public bool Contains(Word item)
        {
            throw new NotImplementedException();
        }

        public void CopyTo(Word[] array, int arrayIndex)
        {
            throw new NotImplementedException();
        }

        public bool Remove(Word item)
        {
            throw new NotImplementedException();
        }

        public IEnumerator GetEnumerator()
        {
            throw new NotImplementedException();
        }

        IEnumerator<Word> IEnumerable<Word>.GetEnumerator()
        {
            throw new NotImplementedException();
        }

        #endregion
    }
}

So when you run this, first impressions are very favorable. The list appears in no time at all, scrolling up and down the list is really fast, and memory usage is only about 24MB. Looks great!

However, everything is not as good as it seems. This is illustrated if you type a letter from later in the alphabet, such as ‘t’ into the Search box. Look at what is reported in the output window now:

There are two lines starting ‘Found Position…’ each taking over 4.3 seconds, and further down the ‘Fetched…’ lines report how long it takes to get an item from the collection at a particular index are now taking over 370ms each. From this point on, scroll performance of the ListBox is terrible. What is going on?

The code that is executing here is firstly the TextChanged event handler finds the first word in the table that begins with the letters entered into the Search textbox:

private void txtSearch_TextChanged(object sender, TextChangedEventArgs e)
{
    DictionaryDatabaseContext dc = ((App)App.Current).DbDC;

    var words = from w in dc.Words
                where w.WordTxt.StartsWith(txtSearch.Text)
                select w;

    if (words.Count() == 0)
        MessageBox.Show("No matches");
    else
        listBox1.ScrollIntoView(words.First<Word>());
}

The lookup is really fast because it is doing a lookup on the WordTxt field which is the primary key.

However, once we have found our word, we call the ListBox.ScrollIntoView(object) method to cause the ListBox to scroll to display the first matching word. The way the ListBox does this is to first call the IndexOf(Word item) method of the data collection to find the index in the collection of the desired item (which it does twice for some reason), and then to call the indexer as normal to pull the required items out of the collection. It is the IndexOf() method that is reporting the 4.3 second search times and the indexer that is reporting times of over 370ms.

The problem here is that an index in a SQL Server Compact Edition database (the underlying database for LINQ to SQL on Windows Phone) is not optimised for random access. There is no efficient way of getting the 109,456th item out of an index. The code used in the indexer is actually an adaptation of what is in the MSDN Windows Phone documentation, topic Local Database Best Practices for Windows Phone, which states:

Use of Data Virtualization and Skip/Take

With ListBox controls, you can use the Skip and Take methods to enable fetching of the appropriate batches of items as the user scrolls through the list. For more information about enabling data virtualization on data-bound ListBox controls, see Improving ListBox Performance in Silverlight for Windows Phone 7: Data Virtualization.

Using the Skip and Take methods ensures that data will not be loaded from the database into memory until it is needed for display in the ListBox control. For example, the following code shows how to retrieve records 501 to 550 from the database.

return
(from f in App.FeedsDB.Feeds                    
select f).Skip(500).Take(50);

Because there is cost to performing this load operation as the user scrolls through the list, this technique should be limited to scenarios where the data set is large (greater than 150 items). For smaller data sets, loading the entire collection into memory and binding to it there is likely to yield better performance.

In actual fact, this best practice advice should be qualified by saying that it should not be used for collections of greater than perhaps 1000. What is actually happening here is that internally, the database engine is having to walk the record collection to implement the Skip(n) part of it. So while it is true to say that the skipped records are not loaded from the database into memory, the database engine is still having to do a great deal of work to identify the record(s) it does need to materialize into memory.

Our indexer looks like this:

var word = (from w in dc.Words orderby w.WordTxt select w).Skip(index).Take(1).First();

However the real damage is being done by the IndexOf() method implementation:

public int IndexOf(Word item)
{
    Stopwatch sw = Stopwatch.StartNew();

    var matches = (from w in dc.Words select w).AsEnumerable()
        .Select((matchItem, index) => new { Item = matchItem, Position = index })
                    .Where(x => x.Item.WordTxt == item.WordTxt);

    int position = matches.First().Position;

    Debug.WriteLine("Found position of {0} in {1}ms", new object[] { item.WordTxt, sw.ElapsedMilliseconds });

    return position;
}

This code was taken from a number of posts found in searches on the internet and while it works well enough, it also causes the database engine to work very hard to give us our result. The only good news with all of this is that memory utilisation remains low at 24MB but that’s no substitute for the terrible performance which makes this solution unusable.

Option 3: Data Virtualization – Better Implementation

The second and third buttons on the main page takes you to two different pages that use a workable implementation of data virtualization. Each shows a different solution to this problem of needing a random access index to a database table. The Good virtualization button takes you to a page that is the same as the one we have just used in the previous example, with the exception that when the page loads, the page calls the BeginInitialize() method on our GoodVirtualizedDataModel class which builds an in-memory lookup table to allow us to easily find the index of a word in the collection. In the form, the page initialization logic looks like this:

public partial class GoodDataVirtualizationPage : PhoneApplicationPage
{
    public GoodDataVirtualizationPage()
    {
        InitializeComponent();

        this.Loaded += ((s, e) =>
        {
            listBox1.ItemsSource = null;

            var vDM = new GoodVirtualizedDataModel();
            vDM.InitializeCompleted += (ss, ee) =>
                {
                    listBox1.ItemsSource = vDM;
                    SystemTray.ProgressIndicator.IsVisible = false;
                };

            vDM.BeginInitialize();
            var pi = new ProgressIndicator();
            pi.IsIndeterminate = true;
            pi.Text = "Initializing..";
            pi.IsVisible = true;
            SystemTray.ProgressIndicator = pi;
        }
        );
    }

…

The GoodVirtualizedDataModel class has a private List<string> field called inMemoryLookup and this is what is initialized by the BeginInitialize() method. That uses a BackgroundWorker to do the work on a background thread, but all it is doing is extracting just the WordTxt field (which is the primary key field) from every Word object in the database and inserting it into the List<string>:

inMemoryLookup = (from w in dc.Words
                   orderby w.WordTxt
                   select w.WordTxt).ToList<string>();

Then in the indexer, instead of the costly .Skip(n).Take(1) operation, the code simply takes the index of the item that is passed in, uses it to fetch the object at that index from the inMemoryLookup collection and that gives it the primary key (the WordTxt) at that index which it uses to do an efficient primary key lookup for the required word:

Word IList<Word>.this[int index]
{
    get
    {
        var word = from w in dc.Words
                   where w.WordTxt == inMemoryLookup[index]
                   select w;
        return word.First<Word>();
    }
    set
    {
        throw new NotImplementedException();
    }
}

In actual fact, as a further optimisation, instead of executing the same query every time the indexer Getter is called, the implementation in the sample uses a Compiled Query to avoid the overhead of the query processor doing the same query analysis on every call. This is the full class:

using System;
using System.Linq;
using System.Collections;
using System.Collections.Generic;
using System.Diagnostics;
using System.ComponentModel;

namespace LargeDBAppSample.Model
{
    public class GoodVirtualizedDataModel : IList<Word>
    {
        private DictionaryDatabaseContext dc = ((App)App.Current).DbDC;
        int? cachedCount = null;
        private List<string> inMemoryLookup;
        private Dictionary<string, int> cachedPositions = new Dictionary<string,int>();

        public event EventHandler InitializeCompleted;

        public void BeginInitialize()
        {
            BackgroundWorker worker = new BackgroundWorker();
            worker.DoWork += (s, e) =>
            {
                inMemoryLookup = (from w in dc.Words
                                  orderby w.WordTxt
                                  select w.WordTxt).ToList<string>();

            };
            worker.RunWorkerCompleted += (s, e) =>
            {
                if (InitializeCompleted != null)
                {
                    InitializeCompleted(this, new EventArgs());
                }
            };
            worker.RunWorkerAsync();
        }

        public int Count
        {
            get {
                if (!cachedCount.HasValue)
                {
                    var wordcount = dc.Words.Count();
                    cachedCount = wordcount;
                }
                return cachedCount.Value; 
            }
        }

        // Prepare a compiled query for optimum performance
        public static Func<DictionaryDatabaseContext, string, IQueryable<Word>> SelectedByIndexWordResult =
            System.Data.Linq.CompiledQuery.Compile(
            (DictionaryDatabaseContext dc, string theWord) =>
                 from w in dc.Words
                 where w.WordTxt == theWord
                 select w
                 );

        Word IList<Word>.this[int index]
        {
            get
            {
                //var word = from w in dc.Words
                //           where w.WordTxt == inMemoryLookup[index]
                //           select w;
                //return word.First<Word>();

                Stopwatch sw = Stopwatch.StartNew();
                var word = SelectedByIndexWordResult(dc, inMemoryLookup[index]).First<Word>();
                Debug.WriteLine("Fetched {0} in {1}ms", new object[] { index, sw.ElapsedMilliseconds });

                return word;
            }
            set
            {
                throw new NotImplementedException();
            }
        }

        public int IndexOf(Word item)
        {
            Stopwatch sw = Stopwatch.StartNew();
            int position;

            if (cachedPositions.ContainsKey(item.WordTxt))
            {
                position = cachedPositions[item.WordTxt];
            }
            else
            {
                var matches = inMemoryLookup
                    .Select((matchItem, index) => new { theWord = matchItem, Position = index })
                                .Where(x => x.theWord == item.WordTxt);

                position = matches.First().Position;

                cachedPositions[item.WordTxt] = position;
            }

            Debug.WriteLine("Found position of {0} in {1}ms", new object[] { item.WordTxt, sw.ElapsedMilliseconds });

            return position;
        }

        #region NotRequired

        ...

        #endregion
    }
}

Using this in-memory lookup table, the results are impressive:

Of course, everything comes with a price. Using this in memory lookup, the building of the in-memory lookup takes 10-15 seconds on a device so you’ll have to show some ‘Please wait’ UI (I use a progress bar) or do it on a background thread while your user is still in the opening screens of your app. The lookup table also takes quite a lot of memory – up to 54MB with this sample set, which is not so bad, but in some earlier tests I did with 500000 items, my in-memory lookup was causing me to exceed the 90MB memory threshold. On the plus side, because the in-memory lookup is well – in memory – it’s easily updated if your app allows items to be added, edited or deleted from the main table.

Option 3: Data Virtualization – Best Implementation

So what do you do if you don’t want to have your users wait while you build the in-memory lookup index? Or you can’t afford the memory that the lookup table requires?

Well, one solution is to let the database do the work for you, and this is what the final option demonstrates. Remember that third column, Sequence, that I said I would come back to? That is performing the same role as an in-memory lookup but instead it’s stored in the data base as well. I wrote a desktop utility program that prepared this database by fetching all the records using the primary key – in other words giving me the Words in alphabetical order – and then sets the Sequence field of each to its position in the collection. I then created a secondary key on the Sequence field (again before including the database in this project), so now I have a fast lookup of words both by WordTxt (the primary key) and by index (the secondary key).

Using this, the final version of my virtualized data model looks like this:

using System;
using System.Linq;
using System.Collections;
using System.Collections.Generic;
using System.Diagnostics;

namespace LargeDBAppSample.Model
{
    public class BestVirtualizedDataModel : IList<Word>
    {
        private DictionaryDatabaseContext dc = ((App)App.Current).DbDC;
        int? cachedCount = null;
        private Dictionary<string, int> cachedPositions = new Dictionary<string,int>();

        public int Count
        {
            get {
                if (!cachedCount.HasValue)
                {
                    var wordcount = dc.Words.Count();
                    cachedCount = wordcount;
                }
                return cachedCount.Value; 
            }
        }

        // Prepare a compiled query for optimum performance
        public static Func<DictionaryDatabaseContext, int, IQueryable<Word>> SelectedBySecondaryIndexWordResult =
            System.Data.Linq.CompiledQuery.Compile(
            (DictionaryDatabaseContext dc, int theIndex) =>
                 from w in dc.Words
                           where w.Sequence == theIndex
                           select w
                 );

        Word IList<Word>.this[int index]
        {
            get
            {
                Stopwatch sw = Stopwatch.StartNew();

                //var word = from w in dc.Words
                //           where w.Sequence == index
                //           select w;
                //return word.First<Word>();

                var word = SelectedBySecondaryIndexWordResult(dc, index).First<Word>();
                Debug.WriteLine("Fetched {0} in {1}ms", new object[] { index, sw.ElapsedMilliseconds });

                return word;
            }
            set
            {
                throw new NotImplementedException();
            }
        }

        public int IndexOf(Word item)
        {
            Stopwatch sw = Stopwatch.StartNew();
            int position;

            if (cachedPositions.ContainsKey(item.WordTxt))
            {
                position = cachedPositions[item.WordTxt];
            }
            else
            {
                position = (from w in dc.Words
                           where w.WordTxt == item.WordTxt
                           select w.Sequence).First();

                cachedPositions[item.WordTxt] = position;
            }

            Debug.WriteLine("Found position of {0} in {1}ms", new object[] { item.WordTxt, sw.ElapsedMilliseconds });

            return position;
        }

        #region NotRequired

        ...

        #endregion
    }
}

The results speak for themselves:

Memory usage here is around 23MB.

So when not to use this option? Well, this only really works with read-only collections where you can get the Sequence numbers correct in the table before transferring to the device. It won’t work if you start inserting or removing records or changing the ordering – not without having to do massive data updates that would negate the benefit of the approach.

Summary

These examples have shown how to bind a very large collection of records from a local database table to a ListBox. This is rarely a great idea from a user experience point of view, unless you implement some kind of search as I have done in these examples. [An aside: my original intention had been to show a sample using the LongListSelector from the Silverlight Toolkit, configured as a JumpList, but that control does not support data virtualization, despite claims in a few blogs from the team to the contrary .] Nonetheless, a virtualized data source can be used in other situations where you want to avoid materializing all the records from a large table into memory.

So if you are going to implement a virtualized data source, beware of the .Skip(n).Take(n1) syntax recommended by the MSDN docs – that does not work with large collections as it makes the database engine struggle as you get down towards the bottom of the list.

Instead, implement your own way of efficiently determining the position of an item in the list, either by an in-memory lookup collection, or if your data is read-only by embedding positional information into a column in the database table and configuring it as a secondary index.

Download the sample project (around 50MB)

Footnote:

I built this sample database using some excellent tools that deserve calling out. Firstly, I created a ‘big SQL’ database in SQL Express and designed my Word table. I then generated the random data using Red Gate’s excellent SQL Data Generator, part of their SQL Toolbelt product set. They have a 14 day free trial, which was just long enough while I was working on this post!

I then scripted all the data and schema suitable for loading into a SQL Server Compact Edition 3.5 database using the free SQL export and script utility called Export2SQLCE, available here on Codeplex. Thanks Erik for these amazing (and free!) tools. Then it was back to SQL Server Management Studio to create an empty SQL Server Compact Edition 3.5 database and to execute all the scripts that Export2SQLCE had created for me. After this I had a database I could use on Windows Phone. I ran a small console app to set the sequence number in the table.

Last part of the jigsaw was to generate the DataContext. I could have used SQLMetal utility for that, but I prefer to use another of Erik’s free tools, this time the SQL Server Compact Toolbox which allows you to create a data context (amongst many other things).

Thanks guys for these tools!

Mango Jump Start Videos–Just Released!

Andy Wigley — Thu, 08 Sep 2011 08:48:05 GMT

Microsoft have announced availability of the HD-quality video recordings – FREE – on Channel 9!

· The 14-hour course covers all aspects of Windows Phone development Visual Studio 2010, Silverlight, Expression, data storage, networks, user interface, XNA and the Marketplace.

· “Team-teaching” approach led by MVPs Rob Miles and Andy Wigley

· Every module is an engaging discussion, packed with best practices and real-world demonstrations

Home page for the entire course on Channel 9: “Building Applications for Windows Phone Mango Jump Start”

· Links directly to specific modules:

o Mango Jump Start (01): Building Windows Phone Apps with Visual Studio 2010

o Mango Jump Start (02): Silverlight on Windows Phone—Introduction

o Mango Jump Start (03): Silverlight on Windows Phone—Advanced

o Mango Jump Start (04): Using Expression to Build Windows Phone Interfaces

o Mango Jump Start (05): Windows Phone Fast Application Switching

o Mango Jump Start (06): Windows Phone Multi-tasking & Background Tasks

o Mango Jump Start (07): Using Windows Phone Resources (Bing Maps, Camera, etc.)

o Mango Jump Start (08a): Application Data Storage on Windows Phone | Part 1

o Mango Jump Start (08b): Application Data Storage on Windows Phone | Part 2

o Mango Jump Start (09): Using Networks with Windows Phone

o Mango Jump Start (10): Tiles & Notifications on Windows Phone

o Mango Jump Start (11a): XNA for Windows Phone | Part 1

o Mango Jump Start (11b): XNA for Windows Phone | Part 2

o Mango Jump Start (12): Selling a Windows Phone Application

· Links to course materials on Born to Learn

Want a FREE Windows Phone??

Andy Wigley — Tue, 29 Mar 2011 13:41:00 GMT

APPA Mundi has a large number of Windows Phone 7 Developer Phones to give away to UK developers (Thanks to Microsoft)! All you have to do is come to one of our workshops (see below) and create a unique and high quality Windows Phone 7 app and get it published on Marketplace.

Who decides if your app is ‘unique and high quality’? We do!! We’ll take a look at it and if we like what we see, we’ll give you a code you can use to purchase one of the new Windows Phone Developer phones at ZERO cost! And if we think it’s nearly there, we’ll give you some feedback and you can update your app – then we’ll give you a code.

The best way of ensuring your app is high quality and catches our attention is to come to one of our upcoming Windows Phone 7 Workshops. These are FREE, and are running on each of the next three Saturdays, 9:00 – 21:00, at the following locations (follow the links to register):

Hallam Conference Centre, London Saturday April 2nd
44 Hallam Street, London, W1W 6JJ
Manchester Conference Centre Saturday April
9th Sackville Street, Manchester, M1 3BB
London, LBi Atlantis Building Saturday April 16th
LBi Atlantis Building, Truman Brewery, 146 Brick Lane, London , E1 6RU

The first workshop was last week, was a *load* of fun and everyone who attended agreed it was a really worthwhile use of their time. We’ve got lots of prizes to give away at each workshop such as software, a Windows Phone 7 device for the best app on the day, and a raffle for an XBox+Kinect, amongst other things. We also will have a ‘performance area’ where we will run little seminars aimed at inexperienced developers on topics such as databinding, launchers and choosers, tombstoning, page transition animations etc. For full details, see http://appamundi.com/wp7workshops/ .

Calling West Midlands WP7 Enthusiasts!

Andy Wigley — Mon, 14 Mar 2011 14:13:56 GMT

APPA Mundi and Microsoft are holding a WP7 Workshop at The Studio, 7 Cannon Street, Birmingham, B2 5EP on Saturday 27^th March 2011. Start at 9:00 running through to 21:00. Lunch and beverages provided!

If you are creating apps for Windows Phone 7, as a professional, independent or student developer please join us at this free Windows Phone 7 workshop, which is all about APPs!! The goal is to get as many apps ready for Marketplace submission as possible, to give you the opportunity to get one-on-one assistance from MVPs and Microsoft evangelists to overcome issues that are blocking you, to get help with the Marketplace app submission process and to have some fun along the way.

We’ll be providing prizes at each event:

Windows Phone 7 devices
An Xbox and Kinect system
Software licenses for .Net Reflector from RedGate

So come along if:

You’ve got a great idea for an app and need help getting started
You’re building an app but need help on implementing some features
You have an app that’s nearly ready and need advice on how to get it through the Marketplace submission process
You want to learn from, or assist, other WP7 devs
You want to contribute to the creation of open source libraries, demo/starter apps or components

Sign up at http://www.developerdeveloperdeveloper.com – book early as places are limited to the first 50 people to register!

Tech.Days Online Conference – Create.Design.Deliver | Windows Phone 7

Andy Wigley — Fri, 25 Feb 2011 11:39:33 GMT

On March 24th, I am one of the speakers at a Tech.Days Online Conference on Windows Phone 7. The event is presented by the MSDN UK Team, assisted by a few outside speakers such as myself and Laurent Guignion. It starts at 15:00 hrs and runs through to 20:30 hrs. If you can’t make it online, the sessions will be recorded and made available a few days later.

Here’s the agenda: I am presenting on programming Windows Phone Notification Services.

To find out more details, and to register for the event see here.

Windows Phone 7 at the App Developers Conference at Mobile World Congress

Andy Wigley — Sat, 29 Jan 2011 14:07:52 GMT

If you are going to Mobile World Congress in Barcelona, there is a great Windows Phone 7 developer event happening:

Windows Phone Wednesday 16th February, the App Developers Conference at Mobile World Congress

Calling all developers!!!!
If you are interested in learning more about developing apps for Windows Phone 7 then do we have the event for you...
“The Why and How’s of Windows Phone 7”
Presented by Microsoft

Join us on a whirlwind tour around the landscape of the
Windows Phone platform. The daylong session will examine
all aspects of development on the phone, including building
apps and games, marketplace monetization, tips and trick for
certification and an open panel discussion where you can get
answers to your burning questions.
Get in on the ground floor with us and see what makes
us different!”

Day long sessions includes:

Time	Session Title	Speaker
9:30-10:00	State of the Union	Brandon Watson
10:00-10:30	Platform Overview	Larry Lieberman
10:30-11:30	UX/Metro Design Review	Bryan Agnetta
11:30-11:45	Break
11:45-12:45	Mobile Web Platform Futures	Joe Marini
12:45-1:45	Lunch
1:45-2:45	Panel discussion
2:45-3:00	Break
3:00-4:00	Business of your App	Todd Biggs
4:00-5:00	Silverlight/XNA overview	Rob Cameron

The conference pass gets you into the ADC as well as into the Expo Hall at Mobile World Congress.
If you are interested please send an email to creators@microsoft.com with the following details:
First and last name
email address for the invite
Company name

We are limited to 200 passes so sign up early
We look forward to seeing you there!!!

Best of breed Page rotation animations

Andy Wigley — Wed, 24 Nov 2010 11:37:00 GMT

In my previous post, I showed how to use the page rotate transitions offered in the Silverlight for Windows Phone Toolkit November 2010. Those animations are pretty easy to use, but require you to write some code to decide which direction to animate – and we don’t like to write unnecessary code.

Also, the resulting animations are OK, but not as good as the ones created by David Anson of Microsoft which he described in a series of blog posts culminating in the ultimate implementation, the HybridOrientationChangesFrame which he describes in this blog post in September 2010. Davids’ animations are great, are designed to execute solely on the GPU to give great performance, and come in subtly different flavours, AnimateOrientationChanges, FadeOrientationChanges and HybridorientationChanges as he described in his post. They also *just work* without you having to write any code in an OrientationChanged event handler.

The Hybrid flavour combines the best bits of AnimateOrientationChanges and FadeOrientationChanges and – as David describes in his post – “… animates the rotation between the "before" and "after" states - but fades between them instead of morphing from one shape into the other. The idea is to get some of the same "Ooh, the application is turning!" visual appeal of AnimateOrientationChangesFrame without the undesirable performance implications for complex layouts. Because the "before" and "after" states don't change size in the proposed scenario, the entire animation can be done on the composition (render) thread! This same visual effect is implemented by some of the core Windows Phone 7 applications - so now it's easy to match that effect in your own applications with HybridOrientationChangesFrame! “

A small problem presents itself if you want to use David’s orientation animations as well as the Page transition animations (page turn animations) you get in the Silverlight Toolkit. David’s animations are implemented in a custom Frame, and so are the Toolkit page transitions but since source code is available for both, I thought it shouldn’t be too difficult to merge the two.

In fact, I emailed david about it and he suggested that it might be as easy as changing the base class of his HybridorientationChangesFrame from PhoneApplicationFrame to the TransitionFrame included in the toolkit. I tested it out, and that’s all it took!

To do this yourself, download David’s solution code from the link on this blog post, unzip it and then open the solution in Visual Studio. Go to the DynamicOrientationChanges project and add a reference to Microsoft.Phone.Controls.Toolkit – the Silverlight Toolkit assembly. Then change the base class in AnimateOrientationChangesFrame, FadeOrientationChangesFrame and HybridOrientationChangesFrame from PhoneApplicationFrame to TransitionFrame (the custom frame from the Toolkit).

/// <summary>
/// PhoneApplicationFrame subclass that animates and fades between device orientation changes.
/// </summary>
public class HybridOrientationChangesFrame : TransitionFrame
{
   ...

That’s it! Now you can use Davids’ rotate animations as well as the Toolkit Page transitions as follows:

Add a reference to the DynamicOrientationChanges.dll you just built from the sample code, or add one of the AnimateOrientationChangesFrame, FadeOrientationChangesFrame or HybridOrientationChangesFrame directly to your project.
Add a reference to the Silverlight Toolkit for Windows Phone to your project:

Edit the InitializePhoneApplication method in App.xaml.cs and set RootFrame to your preferred rotate transitions frame. Optionally set any properties to affect the rotate animation – I prefer a duration of 0.6s:

private void InitializePhoneApplication()
{
    if (phoneApplicationInitialized)
        return;

    // Create the frame but don't set it as RootVisual yet; this allows the splash
    // screen to remain active until the application is ready to render.
    //RootFrame = new PhoneApplicationFrame(); // This is the standard Frame in a WP7 project
    //RootFrame = new TransitionFrame(); // This uses the custom Frame in the Silverlight Toolkit
    RootFrame = new Delay.HybridOrientationChangesFrame();  // Use the rotation-enhanced custom Frame that 
                                                            // derives from the Toolkit TransitionFrame
    ((Delay.HybridOrientationChangesFrame)RootFrame).Duration = TimeSpan.FromSeconds(0.6);

    ...

Finally, implement any Page transitions you want to use by adding the required XAML to each page, as described briefly in this post also by David Anson or in more detail by Will Faught here.

That’s It! Now you can enjoy the best screen rotate transformations and the Silverlight Toolkit page transitions together.

Enjoy!

Windows Phone 7 Page Orientation Change Animations

Andy Wigley — Tue, 23 Nov 2010 15:23:00 GMT

If you want your Windows Phone 7 Silverlight apps to look great and to integrate well with the phone look and feel, then you need to have good animations when moving from page to page, and if you’ve supported portrait and landscape orientations in your pages, when your user changes from portrait to landscape orientation and vice-versa. Of course, these kind of animations should be built into the standard project templates but currently they’re not – although I’d expect that to be rectified in some future release of the developer tools.

Fortunately, an easy remedy for this is available now. The Silverlight for Windows Phone Toolkit November 2010 has been released which contains lots of goodies, including lots of controls and something called the TransitionFrame which is a custom PhoneApplicationFrame that has been tweaked to add support for page and rotate transitions. David Anson blogged about all the great stuff in the toolkit here. Will Faught from the Silverlight Toolkit team blogged about the page transitions built into the Silverlight Toolkit bits so if you want to find out more about those, read his post.

So, there’s been plenty of coverage of the page transitions, but not much has been said about the Orientation change transitions. You enable support for both portrait and landscape orientations by setting the SupportedOrientations attribute of your PhoneApplicationPage as follows:

<phone:PhoneApplicationPage 
    x:Class="ToolkitRotateAnimations.MainPage"
    …
    SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"
    >

That is enough for the page to re-orientate automatically when the user rotates the phone from portrait to landscape or vice-versa, but by default there’s no built-in animation so it just snaps to the new orientation, which is ugly.

To add an animation when the display re-orientates, download and install the Silverlight for Windows Phone Toolkit November 2010 (or later) and then in your project, add a reference to the System.Windows.Controls.Toolkit assembly – you’ll find that on the .NET tab.

All you need to do, is to code an event handler for the OrientationChanged event of your Page object, and write code similar to the following:

public partial class MainPage : PhoneApplicationPage
{
    PageOrientation lastOrientation;

    // Constructor
    public MainPage()
    {
        InitializeComponent();

        this.OrientationChanged += new EventHandler<OrientationChangedEventArgs>(MainPage_OrientationChanged);

        lastOrientation = this.Orientation;
    }

    void MainPage_OrientationChanged(object sender, OrientationChangedEventArgs e)
    {
        PageOrientation newOrientation = e.Orientation;
        Debug.WriteLine("New orientation: " + newOrientation.ToString());

        // Orientations are (clockwise) 'PortraitUp', 'LandscapeRight', 'LandscapeLeft'

        RotateTransition transitionElement = new RotateTransition();

        switch (newOrientation)
        {
            case PageOrientation.Landscape:
            case PageOrientation.LandscapeRight:
                // Come here from PortraitUp (i.e. clockwise) or LandscapeLeft?
                if (lastOrientation == PageOrientation.PortraitUp)
                    transitionElement.Mode = RotateTransitionMode.In90Counterclockwise;
                else
                    transitionElement.Mode = RotateTransitionMode.In180Clockwise;
                break;
            case PageOrientation.LandscapeLeft:
                // Come here from LandscapeRight or PortraitUp?
                if (lastOrientation == PageOrientation.LandscapeRight)
                    transitionElement.Mode = RotateTransitionMode.In180Counterclockwise;
                else
                    transitionElement.Mode = RotateTransitionMode.In90Clockwise;
                break;
            case PageOrientation.Portrait:
            case PageOrientation.PortraitUp:
                // Come here from LandscapeLeft or LandscapeRight?
                if (lastOrientation == PageOrientation.LandscapeLeft)
                    transitionElement.Mode = RotateTransitionMode.In90Counterclockwise;
                else
                    transitionElement.Mode = RotateTransitionMode.In90Clockwise;
                break;
            default:
                break;
        }

        // Execute the transition
        PhoneApplicationPage phoneApplicationPage = (PhoneApplicationPage)(((PhoneApplicationFrame)Application.Current.RootVisual)).Content;
        ITransition transition = transitionElement.GetTransition(phoneApplicationPage);
        transition.Completed += delegate
        {
            transition.Stop();
        };
        transition.Begin();

        lastOrientation = newOrientation;
    }
}

After numerous attempts with OneNote, I managed to get a screen capture with it in mid-animation:

This gives a pleasing enough effect, but in my opinion this takes too much code, and there are better rotate animations out there in the blogosphere. In my next post, I’ll show you how to get even more pleasing rotate transformations.

Perst Database for Windows Phone 7: Demo Updated to RTM

Andy Wigley — Tue, 09 Nov 2010 04:36:13 GMT

Get the source code for Perst database on Windows Phone 7 and demo app here.

I’ve been a bit slow in doing this, but thanks to a number of requests from interested people, I have updated the Perst demo so that it works with the final version of the Windows Phone 7 libraries and tools. Click the link at the bottom of this post to download all the source code – includes the Perst database and the demo app.

The demo app is much expanded. Most importantly, it now fully supports tombstoning, which was a pretty significant omission from the previous version.

The demo app displays a list of contact records on the main page, and when the user selects a record in the list, the app navigates to a new page to show the details of the contact. This page now uses a Pivot control, so not only do we see the contact, but a swipe to left or right now displays the Leads for that contact.The best way of supporting tombstoning with a page displaying the details view of a single record in the database, is to save the object ID that every record in a Perst database has (inherited from the Persistent base class) when the app is being tombstoned, like this:

protected override void OnNavigatedFrom(System.Windows.Navigation.NavigationEventArgs e)
{
    base.OnNavigatedFrom(e);

    // Save OID of the current record we are viewing/editing
    State["DataContextObjectID"] = ((Contact)this.DataContext).Oid;
}

Then, when the app is being reactivated, we can do a simple database lookup to pull the required record out again:

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
    base.OnNavigatedTo(e);

    // For tombstoning, save the oid of a particular record in the State object on OnNavigatedFrom
    // Restore it in OnNavigatedTo and use the Database.Select<T> method to extract the correct one from the database
    if (State.ContainsKey("DataContextObjectID"))
    {
        int oid = (int)State["DataContextObjectID"];
        this.DataContext = Database.Select<Contact>("oid = " + oid.ToString()).FirstOrDefault();
        State.Remove("DataContextObjectID");
    }

    // Have we come here by navigating from the MainPage after selecting a record in the main list?
    if (this.NavigationContext.QueryString.ContainsKey("oid"))
    {
        this.DataContext = Database.Select<Contact>("oid = " + this.NavigationContext.QueryString["oid"]).FirstOrDefault();
    }
}

There are two ways for the details page to be activated: when the app is being reactivated after tombstoning and this page is the current page in the app, or when the user selects a record from the list on the main page. In the latter case, the demo app puts the Oid of the selected record into the query string. This is why the OnNavigatedTo method includes code to look for the Oid either from the State object (used to save context while tombstoning) or from the query string.

The previous version of the demo app included code to generate thousands of contacts. Each contact has a collection of Leads, and each lead has a collection of Activities. Lead and Activity objects were generated by the app before, but there was no UI to show them. Now there is:

I haven’t included code to add, edit, delete Leads and Activities – but that is essentially the same kind of code that is included for performing those operations on a Contact. That’s left as an exercise for the interested reader

Enjoy!

Windows Phone 7 Jump Start–Reloaded!

Andy Wigley — Tue, 02 Nov 2010 12:40:24 GMT

Some weeks ago, Rob Miles and I travelled over to Redmond to record some new videos for the Windows Phone 7 Jump Start series to coincide with the release of the final version of the developer tools. We also re-recorded some of the earlier sessions that covered topics that had changed between the beta and RTM. It was fun as always, and Rob managed to come up with some new awful jokes. Many thanks to Jeff, Sharon and Bob for making it happen.

I’m pleased to say that the full set of updated videos are now available online. Go to Updated! Windows Phone 7 Jump Start (Session 1 of 19) to see the first page.

Here’s the full list of videos:

Updated! Session 1: Introduction
Session 2: Building a Silverlight Application, Part 1
Session 3: Building a Silverlight Application, Part 2
Updated! Session 4: The Application Bar
Session 5: Building XNA Games for the Windows Phone 7 Platform, Part 1
Session 6: Building XNA Games for the Windows Phone 7 Platform, Part 2
Updated! Session 7: Isolation Storage
Updated! Session 8: The Application Lifecycle
Updated! Session 9: Launchers and Choosers
Updated! Session 10: Push Notifications
Session 11: Marketing your Windows Phone Applications
Session 12: Working with Media
New Sessions:
Session 13: Panorama and Pivots
Session 14: XNA Deep Dive, Part 1
Session 15: XNA Deep Dive, Part 2
Session 16: Location and Bing Maps
Session 17: Optimizing for Performance
Session 18: Designing Apps Using Expression Blend & Metro
Session 19: Ask the Experts podcast

Enjoy!

New licensing deal for Perst

Andy Wigley — Tue, 12 Oct 2010 07:27:44 GMT

In the same week that Windows Phone 7 devices and carriers are announced, McObject have announced an attractive new deal for licensing of their Perst database for use in Windows Phone 7 Silverlight applications. Previously, they had insisted on a per-unit license fee but thankfully they are now only requiring a one off charge of $395 per developer which covers free distribution to any number of phones. Note that the database is still free to use for non-commercial applications. You can read more about this in their press release here.

Well done McObject!

Perst is an object database that comes as full c# source code and which can be used in a wide range of .NET applications on different platforms. For Windows Phone 7 developers, it is particularly attractive as it works great using Isolated Storage as a backing store.

I had come across the database when working with one of my Windows Embedded Compact Edition clients and liked its performance and features, so when Windows Phone 7 came along, I wanted to see if it would port to WP7. It did! You can read more about it in my ealrier posts here and here.

Technorati Tags: wp7dev,silverlight,windows phone

Jump Start Part 2

Andy Wigley — Fri, 17 Sep 2010 13:21:50 GMT

So following the RTM of the Windows Phone OS a few weeks ago, now the Windows Phone 7 Developer Tools have gone final.

Lots of good stuff in there since the beta: Pivot and Panorama controls, and the Bing Maps control. Fortunately, we at Appamundi have been working with these as Microsoft have been building them, as we have been one of the privileged ISVs who are building apps ready for launch. Exciting times.

Also exciting is the first release of the Silverlight Toolkit for Windows Phone, providing some of the controls you’ll need that are missing from the ‘official’ controls set. Controls such as a DatePicker and a TimePicker, a WrapPanel, Gesture Recognizer and a ContextMenu – all really useful!

Best way of learning about all this stuff is to read Brandon’s latest post here.

And we’re doing our bit as well!! Rob Miles and myself are back in Redmond next week to deliver a follow-up to our phenominally successful video training series. As Brandon says in his post, this series of 12 video recordings have so far notched up 125,000 viewing hours. Awesome!!

So next Tuesday, we’re doing some more: sessions on the Pivot, Panorama, Bing Maps and Location, and the Silverlight Toolkit. Plus important sessions on building high performance Silverlight apps. Mr. Miles is doing two hours of up to date XNA stuff as well. Register here to join us for session one on Tuesday morning which is the Pivot, Pano, Bing Maps, XNA and Silverlight Toolkit session and here for session 2, which includes the perf, Expression Blend and Live Q&A sessions.

Hope you can join us!!!

Technorati Tags: wp7dev,silverlight,windows phone