Walkthrough: Consuming OData with MVVM for Windows Phone

http://services.odata.org/Northwind/Northwind.svc/

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data.Services.Client;
using System.Linq;
using System.Windows;
using MVVMODataTestApp.Northwind;

namespace MVVMODataTestApp
{
    public class ViewModel : INotifyPropertyChanged
    {
        // Defines the root URI of the data service.
        // This is the URI of the public, read-only Northwind data service. 
        // To make updates and save changes, replace this URI 
        // with your own Northwind service implementation.
        private static readonly Uri _rootUri = 
            new Uri("http://services.odata.org/Northwind/Northwind.svc/");

        // Define the typed DataServiceContext.
        private NorthwindEntities _context;

        // Define the binding collection for Customers.
        private DataServiceCollection<Customer> _customers;

        // Gets and sets the collection of Customer objects from the feed.
        // This collection is used to bind to the UI (View).
        public DataServiceCollection<Customer> Customers
        {
            get { return _customers; }

            private set
            {
                // Set the Titles collection.
                _customers = value;

                // Register a handler for the LoadCompleted callback.
                _customers.LoadCompleted += OnCustomersLoaded;

                // Raise the PropertyChanged events.
                NotifyPropertyChanged("Customers");
            }
        }

        // Used to determine whether the data is loaded.
        public bool IsDataLoaded { get; private set; }

        // Loads data when the application is initialized.
        public void LoadData()
        {
            // Instantiate the context and binding collection.
            _context = new NorthwindEntities(_rootUri);
            Customers = new DataServiceCollection<Customer>(_context);

            // Specify an OData query that returns all customers.
            var query = from cust in _context.Customers
                        select cust;

            // Load the customer data.
            Customers.LoadAsync(query);
        }

        // Displays data from the stored data context and binding collection 
        public void LoadData(NorthwindEntities context,
            DataServiceCollection<Customer> _customers)
        {
            _context = context;
            Customers = _customers;

            IsDataLoaded = true;
        }

        // Handles the DataServiceCollection<T>.LoadCompleted event.
        private void OnCustomersLoaded(object sender, LoadCompletedEventArgs e)
        {
            // Make sure that we load all pages of the Customers feed.
            if (Customers.Continuation != null)
            {
                Customers.LoadNextPartialSetAsync();
            }
            IsDataLoaded = true;
        }

        // Declare a PropertyChanged for the UI to register 
        // to get updates from the ViewModel.
        public event PropertyChangedEventHandler PropertyChanged;

        // Notifies the binding about a changed property value.
        private void NotifyPropertyChanged(string propertyName)
        {
            var propertyChanged = PropertyChanged;
            if (propertyChanged != null)
            {
                // Raise the PropertyChanged event.
                propertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }
}

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="NORTHWIND TRADERS" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="Customers" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <ListBox x:Name="MainListBox" Margin="0,0,-12,0" ItemsSource="{Binding Customers}" SelectionChanged="MainListBox_SelectionChanged">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Margin="0,0,0,17" Width="432" Height="100">
                    <TextBlock Text="{Binding CompanyName}" TextWrapping="NoWrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                    <TextBlock Text="{Binding ContactName}" TextWrapping="NoWrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
                    <TextBlock Text="{Binding Phone}" TextWrapping="NoWrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</Grid>
</Grid>

// Set the data context of the listbox control to the sample data.
DataContext = App.ViewModel;

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
        <TextBlock x:Name="PageTitle" Text="NORTHWIND TRADERS" 
                    Style="{StaticResource PhoneTextNormalStyle}"/>
        <TextBlock x:Name="ListTitle" Text="{Binding CompanyName}" Margin="9,-7,0,0" 
                    Style="{StaticResource PhoneTextTitle1Style}" />
    </StackPanel>
    <ScrollViewer Grid.Row="1">
        <Grid x:Name="ContentPanel" Margin="12,0,12,0">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="165"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <TextBlock Text="Contact name:" Style="{StaticResource PhoneTextNormalStyle}" 
                    VerticalAlignment="Center" Grid.Row="0" Grid.Column="0"/>
            <TextBlock Text="Contact title:" Style="{StaticResource PhoneTextNormalStyle}" 
                    VerticalAlignment="Center" Grid.Row="1" Grid.Column="0"/>
            <TextBlock Text="Phone number:" Style="{StaticResource PhoneTextNormalStyle}" 
                    VerticalAlignment="Center" Grid.Row="2" Grid.Column="0"/>
            <TextBlock Text="Address:" Style="{StaticResource PhoneTextNormalStyle}" 
                    VerticalAlignment="Center" Grid.Row="3" Grid.Column="0"/>
            <TextBlock Text="City:" Style="{StaticResource PhoneTextNormalStyle}" 
                    VerticalAlignment="Center" Grid.Row="4" Grid.Column="0"/>
            <TextBlock Text="Region:" Style="{StaticResource PhoneTextNormalStyle}" 
                    VerticalAlignment="Center" Grid.Row="5" Grid.Column="0"/>
            <TextBlock Text="Postal code:" Style="{StaticResource PhoneTextNormalStyle}" 
                    VerticalAlignment="Center" Grid.Row="6" Grid.Column="0"/>
            <TextBox Text="{Binding ContactName, Mode=TwoWay}" Grid.Row="0" Grid.Column="1"/>
            <TextBox Text="{Binding ContactTitle, Mode=TwoWay}" Grid.Row="1" Grid.Column="1"/>
            <TextBox Text="{Binding Phone, Mode=TwoWay}" Grid.Row="2" Grid.Column="1"/>
            <TextBox Text="{Binding Address, Mode=TwoWay}" Grid.Row="3" Grid.Column="1"/>
            <TextBox Text="{Binding City, Mode=TwoWay}" Grid.Row="4" Grid.Column="1"/>
            <TextBox Text="{Binding Region, Mode=TwoWay}" Grid.Row="5" Grid.Column="1"/>
            <TextBox Text="{Binding PostalCode, Mode=TwoWay}" Grid.Row="6" Grid.Column="1"/>
        </Grid>
    </ScrollViewer>
</Grid>

// When the page is navigated to, set the data context 
// to the selected item in the list.
protected override void OnNavigatedTo(NavigationEventArgs e)
{
    string selectedIndex = "";
    if (NavigationContext.QueryString.TryGetValue("selectedItem", out selectedIndex))
    {
        int index = int.Parse(selectedIndex);
        DataContext = App.ViewModel.Customers[index];
    }
}

// Return a string serialization of the application state.
public string SaveState()
{
    if (App.ViewModel.IsDataLoaded)
    {
        // Create a new dictionary to store binding collections. 
        var collections = new Dictionary<string, object>();

        // Add the current Customers binding collection.
        collections["Customers"] = Customers;

        // Return the serialized context and binding collections.
        return DataServiceState.Serialize(_context, collections);
    }
    else
    {
        return string.Empty;
    }
}

// Restores the view model state from the supplied state serialization.
public void RestoreState(string appState)
{
    // Create a dictionary to hold any stored binding collections.
    Dictionary<string, object> collections;

    if (!string.IsNullOrEmpty(appState))
    {
        // Deserialize the DataServiceState object.
        DataServiceState state
            = DataServiceState.Deserialize(appState);

        // Restore the context and binding collections.
        var context = state.Context as NorthwindEntities;
        collections = state.RootCollections;

        // Get the binding collection of Customer objects.
        DataServiceCollection<Customer> customers
            = collections["Customers"] as DataServiceCollection<Customer>;

        // Initialize the application with stored data. 
        App.ViewModel.LoadData(context, customers);
    }
}

// Code to execute when the application is deactivated (sent to the background).
// This code will not execute when the application is closing.
private void Application_Deactivated(object sender, DeactivatedEventArgs e)
{
    if (App.ViewModel.IsDataLoaded)
    {
        // Store application state in the state dictionary.              
        PhoneApplicationService.Current.State["ApplicationState"]
            = ViewModel.SaveState();
    }
}

// Code to execute when the application is activated (brought to the foreground).
// This code will not execute when the application is first launched.
private void Application_Activated(object sender, ActivatedEventArgs e)
{
    // If data is not still loaded, try to get it from the state store.
    if (!ViewModel.IsDataLoaded)
    {
        if (PhoneApplicationService.Current.State.ContainsKey("ApplicationState"))
        {
            // Get back the serialized data service state from the dictionary.
            string appState =
                PhoneApplicationService.Current.State["ApplicationState"]
                as string;

            // Use the returned dictionary to restore the state of the data service.
            App.ViewModel.RestoreState(appState);
        }
        else
        {
            // Load the data since it is not persisted in the state dictionary. 
            App.ViewModel.LoadData();
        }
    }
}

public void CancelCustomersAsyncLoad()
{
    // Call the CancelAsyncLoad method on the binding collection.
    this.Customers.CancelAsyncLoad();
}

public void SaveChanges()
{
    // Start the save changes operation. 
    this._context.BeginSaveChanges(OnChangesSaved, this._context);
}

private void OnChangesSaved(IAsyncResult result)
{
    // Use the Dispatcher to ensure that the 
    // asynchronous call returns in the correct thread.
    Deployment.Current.Dispatcher.BeginInvoke(() =>
    {
        this._context = result.AsyncState as NorthwindEntities;

        try
        {
            // Complete the save changes operation.
            this._context.EndSaveChanges(result);
        }
        catch (DataServiceRequestException ex)
        {
            // Ideally, we should not create a UI element 
            // from the ViewModel. A better way is to use a 
            // service or event to report exceptions to the view.
            MessageBox.Show(string.Format(
                    "{0} The target Northwind data service ('{1}') is read-only.",
                    ex.Message, this._context.BaseUri));
        }
    }
    );
}

public void Refresh()
{
    // Cache the current merge option and change 
    // it to MergeOption.OverwriteChanges.
    MergeOption cachedOption = _context.MergeOption;
    _context.MergeOption = MergeOption.OverwriteChanges;

    // Reload data from the data service.
    this.LoadData();

    // Reset the merge option.
    _context.MergeOption = cachedOption;
}

private void AppBarCancel_Click(object sender, EventArgs e)
{
    App.ViewModel.CancelCustomersAsyncLoad();
}

private void AppBarRefresh_Click(object sender, EventArgs e)
{
    // Reload the data from the OData service.
    App.ViewModel.Refresh();
}

private void AppBarSave_Click(object sender, EventArgs e)
{
    App.ViewModel.SaveChanges();
}

<!--Sample code showing usage of ApplicationBar-->
<!--<phone:PhoneApplicationPage.ApplicationBar>

…

</phone:PhoneApplicationPage.ApplicationBar>-->

<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True" >
            <shell:ApplicationBarIconButton IconUri="AppBarRefresh.png" 
                        Text="Refresh" Click="AppBarRefresh_Click" />
            <shell:ApplicationBarIconButton IconUri="AppBarCancel.png" 
                        Text="Cancel" Click="AppBarCancel_Click" />
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

<!--Sample code showing usage of ApplicationBar-->
<!--<phone:PhoneApplicationPage.ApplicationBar>

…

</phone:PhoneApplicationPage.ApplicationBar>-->

<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True" >
        <shell:ApplicationBarIconButton IconUri="AppBarSave.png" 
                    Text="Save" Click="AppBarSave_Click" />
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>