ListPicker does not 'tick' selected items when ItemsSource is binded to data fetched from service

Question

I followed instructions at http://mobileworld.appamundi.com/blogs/andywigley/archive/2012/02/02/how-to-databind-selecteditems-of-the-listpicker-and-recurringdayspicker.aspx to bind SelectedItems in multiselect ListPicker.

When I bind ItemsSource to the ObservableCollection of objects created in the ViewModel, ListPicker works without any problems. However, when I bind ItemsSource to ObservableCollection fetched from WCF service, problems start. ListPicker displays all items properly, they can also be selected and displayed as selected on main screen. But when I click the picker to select again, ListPicker is not able to 'tick' selected items on the template.

I could rewrite the list of all elements fetched from service but I'm wondering if there is a neat way of solving that problem?

Project info: WP 7.0, WCF services, EntityFramework, lots of coffee

Entity class:

DataContract(IsReference=true)]
public class TypeOfDish
{
    [DataMember]
    public int TypeOfDishID { get; set; }
    [DataMember]
    public string NameToDisplay { get; set; }
}

WCF Service:

[ServiceContract]
public interface IMyService
{
    [OperationContract]
    [ApplyDataContractResolver]
    IEnumerable<TypeOfDish> GetDishTypes();
}

Xaml:

<StackPanel x:Name="DishTypeGroup" Orientation="Vertical" Width="400">
    <helpers:ListPickerExtended x:Name="TypeOfDishPicker" >
         ItemsSource="{Binding DishTypeList}" 
         SelectionMode="Multiple"
         SelectedItems="{Binding SelectedDishTypes, Mode=TwoWay}"
         Margin="8,0,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Center">

        <toolkit:ListPicker.FullModeItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Path=NameToDisplay}" />
            </DataTemplate>
        </toolkit:ListPicker.FullModeItemTemplate>
    </helpers:ListPickerExtended>
</StackPanel>

ListPickerExtended.cs

public class ListPickerExtended : ListPicker
{
    public new IList SelectedItems
    {
        get
        {
            return (IList)GetValue(SelectedItemsProperty);
        }
        set
        {
            base.SetValue(SelectedItemsProperty, value);
        }
    }
}

ViewModel

public ObservableCollection<TypeOfDish> DishTypeList
{
    get
    {
        //myModel.DichTypes is loaded with data from calling 
        //GetDishTypesAsync() on my service client
        return myModel.DishTypes;
    }
}

ObservableCollection<object> _selectedDishes = new ObservableCollection<object>();

public ObservableCollection<object> SelectedDishTypes
{
    get { return _selectedDishes; }
    set
    {
       if (_selectedDishes == value) { return; }
       _selectedDishes = value;
       RaisePropertyChanged("SelectedDishTypes");
    }
}

Answer 1

I've just found solution.

I was fetching data from the service every time the page was loaded. When returning from full mode template in ListPicker, the main page was reloaded, resetting DishTypesList property using newly fetched data. Although ListPicker.SelectedItems were still set, the new object were not matching the objects in them.

I just needed to move loading data into View Model constructor and ListPicker started working correctly.