Windows Phone の SharePoint リスト アイテムを保存および取得するStore and retrieve SharePoint list items on a Windows Phone

Windows Phone アプリケーションのライフ サイクルと、ネットワーク データをローカルに保存する方法について説明します。 Windows Phone アプリの開発において最も重要な考慮事項の 1 つは、状態情報の管理です。状態情報は、アプリケーション全体と、アプリケーション内の個々のページまたはデータ アイテムの両方について管理します。Windows Phone アプリを開発する際は、アプリのユーザーがネットワーク リソース (SharePoint リストなど) への接続を失う可能性があることを考慮する必要があります。Windows Phone アプリ用の開発インフラストラクチャでは、アプリのライフ サイクル内のさまざまな段階で状態情報を扱うためのメカニズムが提供されています。Learn about the Windows Phone application life cycle and storing network data locally. One of the most important considerations in the development of Windows Phone apps is the management of state information, both for the overall application and for individual pages or data items within the application. If you're developing Windows Phone apps, you must take into account that users of your apps might lose connectivity to network resources (such as SharePoint lists). The development infrastructure for Windows Phone apps provides mechanisms for handling state information at various stages in the life cycle of an app.

重要: Windows Phone 8 用アプリを開発している場合は、Visual Studio 2010 Express ではなく Visual Studio Express 2012 を使用する必要があります。Important: If you are developing an app for Windows Phone 8, you must use Visual Studio Express 2012 instead of Visual Studio 2010 Express. 開発環境を除き、この記事のすべての情報は、Windows Phone 8 用アプリと Windows Phone 7 用アプリを作成する場合に適用されます。Except for the development environment, all information in this article applies to creating apps for both Windows Phone 8 and Windows Phone 7. > 詳細については、「[方法]: SharePoint 用モバイル アプリの開発環境をセットアップする」を参照してください。> For more information, see How to: Set up an environment for developing mobile apps for SharePoint.

Windows Phone 上に SharePoint リスト データをローカルに保存するStore SharePoint list data locally on a Windows Phone

Windows Phone では、同時に実行されるアプリは 1 つだけです。ユーザーがスマートフォン上の他のアプリに切り替えると (たとえば、スマートフォン上の [ スタート] ボタンを押すことによって)、それまで実行されていたアプリは非アクティブ化されます (Windows Phone 開発の用語では、廃棄 (トゥームストーン化 ) と呼ばれます)。ユーザーがこの非アクティブ化されたアプリに戻った場合 ([ 戻る] ボタンを押すことによって) は、アプリを再アクティブ化することができますが、これには、アプリケーション ライフ サイクルの変化に対応して状態情報を処理できるようにロジックを提供しておく必要があります。状態情報は、既定では、アクティブから非アクティブになり、そこから再び戻った場合に保持されません。(Windows Phone アプリのアプリケーション ライフ サイクルについての詳細は、 Windows Phone の実行モデルの概要を参照してください。)On a Windows Phone, only one app runs at a time, and when a user switches to another app on the phone (by pressing the Start button on the phone, for example), the app currently running is deactivated, or, in the terms of Windows Phone development,tombstoned. If the user switches back to the deactivated app (by pressing the Back button), the app can be reactivated, but unless you provide logic to handle application state information over the course of the app life cycle, that state information is not preserved by default in the transition from activation to deactivation and back again. (For more information about the application life cycle for Windows Phone apps, see Execution Model Overview for Windows Phone.)

Windows Phone アプリでは、 PhoneApplicationService クラスが、アプリケーション状態の管理に使用できる標準的なライフサイクル イベントを提供しています。Windows Phone SharePoint リスト アプリケーション テンプレートから作成したプロジェクトでは ( Silverlight for Windows Phone テンプレートのいずれかから作成したプロジェクトと同様)、これらの標準 Windows Phone アプリケーション ライフサイクル イベントが App.xaml ファイルで宣言され、分離コード ファイル App.xaml.cs でイベント ハンドラーに関連付けられています。SharePoint リスト アプリの場合、App.xaml ファイルでの宣言は次のようなマークアップになります。For Windows Phone apps, the PhoneApplicationService class exposes standard life-cycle events that can be used to manage application state. In projects created from the Windows Phone SharePoint List Application template (as with projects created from all Silverlight for Windows Phone templates), these standard Windows Phone application life-cycle events are declared in the App.xaml file and associated with event handlers in the code-behind file, App.xaml.cs. The declarations in the App.xaml file for your SharePoint list apps should look like the following markup.


<Application.ApplicationLifetimeObjects>
    <!--Required object that handles lifetime events for the application-->
    <shell:PhoneApplicationService 
        Launching="Application_Launching" Closing="Application_Closing"Activated="Application_Activated" Deactivated="Application_Deactivated"/>
</Application.ApplicationLifetimeObjects>

App.xaml ファイルで宣言されている Application_Activated および Application_Deactivated イベント ハンドラーは App.xaml.cs 分離コード ファイルで実装されています。この実装には、そのスマート フォン アプリが終了されない限りアプリで使用できるようにアプリケーション状態をキャッシュするという既定のロジックが含まれています。これらのイベントに対するハンドラーの実装には、データを保存する PhoneApplicationService クラスの State プロパティ ( Dictionary オブジェクトへのアクセスを提供する) が使用されています。この State プロパティに保存されたデータは一時的なものです。つまり、アプリが非アクティブ化 (廃棄) されたときには保持されますが、アプリが終了されたときには保持されません。プロジェクトでアプリケーション ライフサイクル イベントを扱う際に考慮すべき重要な点として、ユーザーが他のアプリに切り替えると Windows アプリは非アクティブ化されること、そして非アクティブ化されたアプリは Windows Phone オペレーティング システムによって状況によっては終了される可能性があることを覚えておいてください。永続的ストレージに保存されていないスマートフォン上のデータは、 PhoneApplicationServiceState プロパティを使用して一時的ストレージに保存されていた場合でも、すべて失われます。The Application_Activated and Application_Deactivated event handlers declared in the App.xaml file are implemented in the App.xaml.cs code-behind file with default logic that caches application state information for use in the phone app as long as the app is not terminated. The implementation of the handlers for these events uses the State property (which provides access to a Dictionary object) of the PhoneApplicationService class to store data. Data stored in this State property is transient. That is, it is preserved when the app is deactivated or tombstoned, but not when the app is terminated. It is important to keep in mind as you handle application life-cycle events in your projects that if a Windows app is deactivated when a user switches to another app, that deactivated app is subject to termination by the Windows Phone operating system, depending on circumstances. Any data on the phone that isn't saved to persistent storage is lost, even if that data was saved to transient storage by using the State property of the PhoneApplicationService.

SharePoint リストからデータを取得する Windows Phone アプリでは、複数のセッションを通してスマートフォン上で使用するデータは、サーバーが使用可能である場合は当然、SharePoint Server を実行しているサーバーから取得されます。しかし、場所やその他の要因によってサービスの対応範囲はさまざまであるため、Windows Phone デバイスで SharePoint Server への継続的な接続が使用可能でない場合もあります。SharePoint Server を実行しているサーバーへの接続がない場合でもアプリのユーザーがデータにアクセスできるようにするには、または単純に、サーバーが使用できるかどうかにかかわらずアプリの複数のセッションを通して使用するデータを永続的ストレージに保存するには、 PhoneApplicationService クラスの Closing イベントと Launching イベントを使用します。In a Windows Phone app that gets data from a SharePoint list, the data used on the phone from session to session can of course be retrieved from the server running SharePoint Server, if the server is available. But continuous connectivity to a SharePoint Server may not be available for a Windows Phone device, owing to variations in service coverage by location and other factors. To provide users of your app with access to data in the event of lost connectivity with the server running SharePoint Server, or simply to save data to persistent storage between sessions of the app regardless of server availability, you can take advantage of the Closing and Launching events of the PhoneApplicationService class.

これらのイベント用の Application_Launching ハンドラーおよび Application_Closing ハンドラーは App.xaml で宣言され、App.xaml.cs ファイルで定義されていますが、実装はされていません。アプリが終了する際のアプリケーション状態情報の保存および取得を実現するには、 Application_Closing イベント ハンドラーを実装し、そのアプリ専用の分離ストレージにデータを保存することによって、アプリの複数のセッションを通してデータが永続化されるようにします。さらに、 Application_Launching イベント ハンドラーを実装し、アプリの新しいセッションが開始されたとき (アプリが起動されたとき) に、本来のデータ ソースである SharePoint Server を実行するサーバーへの接続がない場合でも、分離ストレージからデータを取得できるようにします。The Application_Launching and Application_Closing handlers for these events are declared in App.xaml and defined in the App.xaml.cs file, but they are not implemented. To handle storing and retrieving application state information in the context of app termination, you can provide an implementation for the Application_Closing event handler to store data in the isolated storage designated for the app so that the data persists between sessions of the app, and you can provide an implementation for the Application_Launching event handler to retrieve data from isolated storage when a new session of the app is started (when the app is launched), even if connectivity to the server running SharePoint Server that is the original source of the data is not available.

ヒント: データは、暗号化してからローカル デバイスに保存することが推奨されます。Tip: Data should be encrypted before you save it to a local device. 暗号化についての詳細は、「方法: Windows Phone アプリケーションでデータを暗号化する」を参照してください。For more information about how to encrypt the data, see How to: Encrypt Data in a Windows Phone Application

アプリケーション状態を保存および取得するためのイベント ハンドラーを実装するTo implement event handlers for storing and retrieving application state

  1. [方法] Windows Phone 用の SharePoint リスト アプリを作成する の手順に従い、Visual Studio で Windows Phone SharePoint リスト アプリケーション テンプレートを使用して Windows Phone アプリを作成します。Create a Windows Phone app by using the Windows Phone SharePoint List Application template in Visual Studio by following the steps in How to: Create a Windows Phone SharePoint list app.

  2. ソリューション エクスプローラーで App.xaml ファイルを選択します。In Solution Explorer, choose the App.xaml file.

  3. 分離コード ファイル App.xaml.cs を編集用に開くには、 F7 を押します。Press F7 to open the code-behind file, App.xaml.cs, for editing.

  4. Application_Launching エベント ハンドラーの実装 (空の実装) の場所を探し、それを以下のコードに置き換えます。Locate the (empty) implementation of the Application_Launching event handler and replace the event handler with the following code.


private void Application_Launching(object sender, LaunchingEventArgs e)
{
    if (IsolatedStorageSettings.ApplicationSettings.Contains(DataProvider.ListTitle))
    {
        App.MainViewModel = (ListViewModel)IsolatedStorageSettings.ApplicationSettings
                                              [DataProvider.ListTitle];                
        App.MainViewModel.Initialize();
    }
}
  1. Application_Closing イベント ハンドラーの実装 (空の実装) の場所を探し、それを以下のコードに置き換えます。Locate the (empty) implementation of the Application_Closing event handler and replace that event handler with the following code.

private void Application_Closing(object sender, ClosingEventArgs e)
{
    if (IsolatedStorageSettings.ApplicationSettings.Contains(DataProvider.ListTitle))
    {
        IsolatedStorageSettings.ApplicationSettings[DataProvider.ListTitle] = App.MainViewModel;
    }
    else
    {
        IsolatedStorageSettings.ApplicationSettings.Add(DataProvider.ListTitle, App.MainViewModel);
    }
    IsolatedStorageSettings.ApplicationSettings.Save();
}
  1. ファイルを保存します。Save the file.

これらを実装したら、アプリを実行し、SharePoint Server を実行しているサーバーからのデータでアプリ内のメインの ViewModel を初期化します。スマートフォン上でアプリを終了し ([ 戻る] ボタンを押してアプリの最初のページを越えて戻ることにより) Application_Closing イベントを発生させます。この後、サーバーへの接続がないままアプリを実行すると、( Application_Closing イベントで) IsolatedStorageSettings Dictionary オブジェクトに保存された ViewModel が取得されて初期化されます。アプリの前回のセッションで分離ストレージに保存された SharePoint リスト アイテムがアプリのリスト フォーム (List.xaml) に表示されます。With these implementations in place, run your app to initialize the main ViewModel in the app with data from the server running SharePoint Server. Exit the app on the phone (by pressing the Back button to navigate past the first page of the app) to trigger the Application_Closing event. If you then run your app without connectivity to the server, the ViewModel that was saved to the IsolatedStorageSettings Dictionary object (in the Application_Closing event) is retrieved and initialized. The SharePoint list items that were saved to isolated storage in a previous session of the app are displayed in the List form (List.xaml) of the app.

リスト アイテムをオフラインで編集するメカニズムを実装するImplement a mechanism for editing list items offline

Closing イベントおよび Launching イベント用のハンドラーを前のセクションの手順に従ってアプリに実装した場合は、サーバーへの接続が可能だったときにサーバーから取得した SharePoint リスト データが、アプリの次のセッションでサーバーへの接続がない場合でも表示されるようになります。これは、リスト アイテムがスマートフォン上のローカル永続的ストレージから取得されているためです。しかし前のセクションでの実装の場合、リスト アイテムはオフラインのときに表示はできますが、サーバーとの接続が再び可能にならない限り、編集したり、その変更内容をサーバーに戻したりすることはできません。以下の手順では、接続がない場合に、編集したリスト アイテムをローカルに保存するメカニズムをアプリに追加します。そしてサーバーとの接続が再び可能になったときに、この編集したリスト アイテムを取得し、変更内容をサーバーに書き戻すことができるようにします。If you follow the procedure in the previous section to implement handlers for the Closing and Launching events in your app, SharePoint list data that was retrieved from the server when connectivity was available can be displayed in your app even if connectivity to the server is lost in a subsequent session of the app, because the list items are retrieved from local persistent storage on the phone. Based on the implementation in the previous section, however, the list items made available in this way for display while offline can't be edited and saved back to the server unless connectivity is restored. In the following procedure, you'll add a mechanism to your app to provide for storing edited versions of list items locally when connectivity is unavailable. When connectivity to the server is available again, you can retrieve these edited list items and save your changes back to the server.

このセクションの手順では、Windows Phone SharePoint リスト アプリケーション テンプレートから作成した Windows Phone アプリ プロジェクトで作業していることを前提とします。また、表 1 に示されている列とフィールド型を含む、サーバー上のカスタム リスト テンプレートから作成された商品注文リストを使用しているものとします。For the procedures in this section, we assume you're working in the context of a Windows Phone app project created from the Windows Phone SharePoint List Application template and that your app is based on a Product Orders list created from the Custom List template on the server and contains the columns and field types shown in Table 1.

表 1. サンプルの商品注文リストTable 1. Sample Product Orders list

Column Type 必須Required
商品 (名称など)Product (for example, Title)
1 行テキスト (Text)Single line of text (Text)
はいYes
説明Description
1 行テキスト (Text)Single line of text (Text)
いいえNo
数量Quantity
NumberNumber
はいYes
Order DateOrder Date
日付/時刻 (DateTime)Date and Time (DateTime)
いいえNo
Fulfillment DateFulfillment Date
日付/時刻 (DateTime)Date and Time (DateTime)
いいえNo
Contact NumberContact Number
1 行テキスト (Text)Single line of text (Text)
いいえNo

オフラインでのアイテムの編集をサポートするクラスを実装するTo implement a class to support editing items while offline

  1. 表 1 に示した商品注文リストを基に作成した Visual Studio プロジェクトから始めます。 ソリューション エクスプローラーで、このプロジェクトを表すノード (たとえば SPListAppLocalStorage など) を選択します。Starting with a Visual Studio project that was created based on the Product Orders list represented by Table 1, in Solution Explorer, choose the node that represents the project (for example, SPListAppLocalStorage).

  2. [ プロジェクト] メニューの [ クラスの追加] を選択します。On the Project menu, choose Add Class.

    [ 新しい項目の追加] ダイアログ ボックスが表示され、C# の クラス テンプレートが選択されています。The Add New Item dialog box appears with the C# Class template selected.

  3. クラス ファイルの名前を DraftItemStore.cs として、[ 追加 ] をクリックします。Name the class file DraftItemStore.cs, and then choose Add.

    クラス ファイルがプロジェクトに追加され、それが編集できるように開かれます。The class file is added to the project and opened for editing.

  4. クラス ファイルの内容を次のコードで置き換えます。Replace the contents of the class file with the following code.


using System;
using System.Net;
using System.Windows;
using System.Collections.Generic;
using System.IO.IsolatedStorage;

namespace SPListAppLocalStorage // Based on project name by default.
{
    public class DraftItemStore
    {
        const string DraftsKey = "Drafts";

        public static void AddDraftItem(string id, EditItemViewModel model)
        {
            Dictionary<string, EditItemViewModel> draftCollection = GetDraftItemCollection();
            draftCollection[id] = model;
            SaveDrafts(draftCollection);
        }

        public static void RemoveDraftItem(string id)
        {
            Dictionary<string, EditItemViewModel> draftCollection = GetDraftItemCollection();
            draftCollection.Remove(id);
            SaveDrafts(draftCollection);
        }

        public static void SaveDrafts(Dictionary<string, EditItemViewModel> draft)
        {
            if (IsolatedStorageSettings.ApplicationSettings.Contains(DraftsKey))
            {
                IsolatedStorageSettings.ApplicationSettings[DraftsKey] = draft;
            }
            else
            {
                IsolatedStorageSettings.ApplicationSettings.Add(DraftsKey, draft);
            }
        }

        public static List<EditItemViewModel> Drafts
        {
            get
            {
                Dictionary<string, EditItemViewModel> draftCollection = GetDraftItemCollection();

                List<EditItemViewModel> modelCollection = new List<EditItemViewModel>();
                foreach (KeyValuePair<string, EditItemViewModel> entry in draftCollection)
                {
                    modelCollection.Add(entry.Value);
                }

                return modelCollection;
            }
        }

        public static Dictionary<string, EditItemViewModel> GetDraftItemCollection()
        {
            Dictionary<string, EditItemViewModel> draftCollection = null;
            if (IsolatedStorageSettings.ApplicationSettings.Contains(DraftsKey))
                draftCollection = (Dictionary<string,
                EditItemViewModel>)IsolatedStorageSettings.ApplicationSettings[DraftsKey];

            if (draftCollection == null)
                draftCollection = new Dictionary<string, EditItemViewModel>();

            return draftCollection;
        }

        public static EditItemViewModel GetDraftItemById(string id)
        {
            Dictionary<string, EditItemViewModel> draftCollection = GetDraftItemCollection();
            return !draftCollection.ContainsKey(id) ? null : draftCollection[id];
        }
    }
}
The namespace specified in this code is based on the name of the project (SPListAppLocalStorage in this case). You might want to specify a different namespace, based on the name of your project.
  1. ファイルを保存します。Save the file.

EditItemViewModel クラスの 1 つのインスタンスは、スマートフォン上で編集される SharePoint リスト アイテムを表します。編集済みのリスト アイテムは、アイテムへの変更がサーバーに保存されるまでは「下書き (Draft) アイテム」と考えることができます。このクラスのコードの AddDraftItem メソッドは EditItemViewModel クラスの特定のインスタンス (つまり、下書きアイテム) を値として Dictionary オブジェクトに追加します。 Dictionary 内の EditItemViewModel には、特定のリスト アイテム用の識別子に基づいてキーが関連付けられます。(識別子は、SharePoint Server によってリスト内の各アイテムに割り当てられます。Windows Phone SharePoint リスト アプリケーション テンプレートに基づくプロジェクトでは、この識別子は特定の ViewModel クラス ( EditItemViewModel または DisplayItemViewModel など、リスト アイテムを表すクラス) の ID プロパティに保存されます。 RemoveDraftItem メソッドは、指定された識別子に基づいて EditItemViewModelDictionary オブジェクトから削除します。これらのメソッドはどちらも GetDraftItemCollection メソッドを使用して、 EditItemViewModel オブジェクトを含む Dictionary オブジェクトを分離ストレージから取得します。そしてどちらのメソッドも SaveDrafts メソッドを使用して、変更された Dictionary オブジェクト (追加または削除の対象となる下書きアイテム) を分離ストレージに書き戻します。 GetDraftItemCollection メソッドは最初に、"Drafts" (下書き) Dictionary オブジェクトが分離ストレージに保存されているかどうかを判断します。保存されている場合、このメソッドはその Dictionary オブジェクトを戻します。保存されていない場合は新しい Dictionary オブジェクトを初期化して戻します。クラスの Drafts プロパティは、下書きアイテム ( EditItemViewModel オブジェクト) のリスト ( List ジェネリックに基づくオブジェクト) を戻すことにより、下書きアイテムの Dictionary へのアクセスを提供します。 GetDraftItemById メソッドは、指定された識別子の値に基づいて、 Dictionary オブジェクトから特定の下書きアイテムを戻します。A specific instance of the EditItemViewModel class represents a SharePoint list item that is being edited on the phone. You can consider a list item that was edited as a "draft item" before changes to the item are saved to the server. In the code in this class, the AddDraftItem method adds a specific instance of the EditItemViewModel class (that is, a draft item) as a value to a Dictionary object, associating the EditItemViewModel in the Dictionary with a key based on the identifier for the given list item. (An identifier is assigned by SharePoint Server to each item in a list. In a project based on the Windows Phone SharePoint List Application template, that identifier is stored in the ID property of the given ViewModel class, such as EditItemViewModel or DisplayItemViewModel, which represents the list item.) The RemoveDraftItem method removes an EditItemViewModel from the Dictionary object based on a specified identifier. Both of these methods use the GetDraftItemCollection method to retrieve the Dictionary object containing the EditItemViewModel objects from isolated storage and both methods use the SaveDrafts method to save the modified Dictionary object (with a draft item either added to it or removed from it) back to isolated storage. The GetDraftItemCollection method first determines whether a "Drafts" Dictionary object has been saved to isolated storage. If so, the method returns that Dictionary object; otherwise, the method initializes and returns a new Dictionary object. The Drafts property of the class provides access to the Dictionary of draft items by returning a list (that is, an object based on the List generic) of draft items as EditItemViewModel objects. The GetDraftItemById method returns a given draft item from the Dictionary object based on a specified identifier value.

スマートフォン アプリのユーザー インターフェイスに要素を追加し、 DraftItemStore クラスを使用するようにそれを構成することで、リスト アイテムをオフラインで編集できるようにします。以降の手順では、次のことを行います。Now you can add elements to the user interface of the phone app and configure them to use the DraftItemStore class for editing list items offline. In the following procedures, you will:

  • 下書きアイテムとしてスマートフォン上の分離ストレージに保存されたすべてのリスト アイテムを表示する Windows Phone ページを追加し、構成します。Add and configure a Windows Phone page to display all list items that were saved as draft items to isolated storage on the phone.

  • さらに、個々の下書きアイテムを編集するためのページを追加し、構成して、 EditItemViewModel にバインドします。これは、リスト アイテム用の編集フォーム (EditForm.xaml) と同様のものです。Add and configure another page, bound to an EditItemViewModel, for editing an individual draft item, analogous to the Edit form (EditForm.xaml) for list items.

  • SaveAsDraft メソッドを EditItemViewModel クラスに追加します。これは、前の手順で実装した DraftItemStore クラスの AddDraftItem メソッドを実行します。Add a method, SaveAsDraft, to the EditItemViewModel class that executes the AddDraftItem method of the DraftItemStore class implemented in the previous procedure.

  • SaveAsDraft メソッドを呼び出す ApplicationBar ボタンを EditForm.xaml ファイルに追加します。Add an ApplicationBar button to the EditForm.xaml file to call the SaveAsDraft method.

  • 下書きとして保存されたすべてのリスト アイテムを表示するページに移動する ApplicationBar ボタンを List.xaml ファイルに追加します。Add an ApplicationBar button to the List.xaml file to navigate to the page that displays all list items saved as drafts.

スマートフォン上に保存されたすべての下書きアイテムを表示するページを追加するTo add a page for displaying all draft items saved on the phone

  1. ソリューション エクスプローラーViews フォルダーを選択します。In Solution Explorer, choose the Views folder.

  2. [ プロジェクト] メニューの [ 新しい項目の追加] を選択します。On the Project menu, choose Add New Item.

    [ 新しい項目の追加] ダイアログ ボックスが開きます。The Add New Item dialog box opens.

  3. [ 新しい項目の追加] ダイアログ ボックスの Visual C# ノードの下にある Silverlight for Windows Phone ノードを選択します。In the Add New Item dialog box, under the Visual C# node, choose the Silverlight for Windows Phone node.

  4. [ テンプレート] ウィンドウで、[ Windows Phone Portrait Page] テンプレートを選択します。In the Templates pane, choose the Windows Phone Portrait Page template.

  5. ファイルに「Drafts.xaml」という名前を付けて、[ 追加] をクリックします。Name the file Drafts.xaml, and then choose Add.

    ファイルが、プロジェクトの Views ノードの下に追加され、編集用に開かれます。The file is added to the project under the Views node and opened for editing.

  6. デザイナーの [XAML] ウィンドウで、ファイルのコンテンツを次の XAML に置き換えます。In the XAML pane of the designer, replace the contents of the file with the following XAML.


<phone:PhoneApplicationPage
    x:Class="SPListAppLocalStorage.Views.Drafts"
    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"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="696" d:DesignWidth="480"
    shell:SystemTray.IsVisible="True">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="Product Orders" 
                                    Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="Draft Items" Margin="9,-7,0,0" 
                                      Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <ListBox x:Name="lstBoxDraftItems" ItemsSource="{Binding}"
                                  SelectionChanged="lstBoxDraftItems_SelectionChanged">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel>
                            <TextBlock Text="{Binding [Title]}" Style="
                                           {StaticResource PhoneTextTitle2Style}"></TextBlock>
                            <TextBlock Text="{Binding [Description]}" Style="
                                            {StaticResource PhoneTextNormalStyle}"></TextBlock>
                            <TextBlock Text="{Binding [Contact_x0020_Number]}" Style="
                                           {StaticResource PhoneTextNormalStyle}"></TextBlock>
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </Grid>
    </Grid>

    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton x:Name="btnCancel" 
             IconUri="/Images/appbar.cancel.rest.png" Text="Cancel" Click="OnCancelButtonClick" />
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>

</phone:PhoneApplicationPage>
The value of the namespace designation  `<x:Class>` in this code ("SPListAppLocalStorage.Views.Drafts") will vary depending on the name of your project.
  1. ソリューション エクスプローラーで選択された Drafts.xaml ファイルで、F7 キーを押して、関連する分離コード ファイル Drafts.xaml.cs を編集用に開きます。With the Drafts.xaml file selected in Solution Explorer, press F7 to open the associated code-behind file, Drafts.xaml.cs, for editing.

  2. ファイルのコンテンツを次のコードで置き換えます。Replace the contents of the file with the following code.


using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace SPListAppLocalStorage.Views
{
    public partial class Drafts : PhoneApplicationPage
    {
        public Drafts()
        {
            InitializeComponent();
            this.Loaded += new RoutedEventHandler(Drafts_Loaded);
        }

        private void lstBoxDraftItems_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            ListBox lstBox = sender as ListBox;
            if (lstBox.SelectedIndex == -1)
                return;

            EditItemViewModel selectedDraftItem = lstBox.SelectedItem as EditItemViewModel;
            NavigationService.Navigate(new Uri(string.Format("/Views/DraftItemEditForm.xaml?ID={0}",
                                                   selectedDraftItem.ID), UriKind.Relative));

            lstBox.SelectedIndex = -1;
        }

        void Drafts_Loaded(object sender, RoutedEventArgs e)
        {
            this.DataContext = DraftItemStore.Drafts;
        }

        private void OnCancelButtonClick(object sender, EventArgs e)
        {
            // Navigate back to initial List View form.
            NavigationService.Navigate(new Uri("/Views/List.xaml", UriKind.Relative));
        }
    }
}
  1. ファイルを保存します。Save the files.

個々の下書きアイテムを編集するためのページを追加するTo add a page for editing individual draft items

  1. ソリューション エクスプローラーViews フォルダーを選択します。In Solution Explorer, choose the Views folder.

  2. [ プロジェクト] メニューの [ 新しい項目の追加] を選択します。On the Project menu, choose Add New Item.

    [ 新しい項目の追加] ダイアログ ボックスが開きます。The Add New Item dialog box opens.

  3. [ 新しい項目の追加] ダイアログ ボックスの Visual C# ノードの下にある Silverlight for Windows Phone ノードを選択します。In the Add New Item dialog box, under the Visual C# node, choose the Silverlight for Windows Phone node.

  4. [ テンプレート] ウィンドウで、[ Windows Phone Portrait Page] テンプレートを選択します。In the Templates pane, choose the Windows Phone Portrait Page template.

  5. ファイルに「DraftItemEditForm.xaml」という名前を付けて、[ 追加] をクリックします。Name the file DraftItemEditForm.xaml, and then choose Add.

    ファイルが、プロジェクトの Views ノードの下に追加され、編集用に開かれます。The file is added to the project under the Views node and opened for editing.

  6. デザイナーの [XAML] ウィンドウで、ファイルのコンテンツを次の XAML に置き換えます。In the XAML pane of the designer, replace the contents of the file with the following XAML.


<phone:PhoneApplicationPage
    x:Class="SPListAppLocalStorage.DraftItemEditForm"
    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"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="696"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True" x:Name="DraftItemEditPage">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
             xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=
                Microsoft.Phone.Controls">
        <StackPanel>
            <ProgressBar Background="Red" x:Name="progressBar" Opacity="1" 
                                    HorizontalAlignment="Center" VerticalAlignment="Top" 
                                    Height="15" Width="470" IsIndeterminate="{Binding IsBusy}" 
                                    Visibility="{Binding ShowIfBusy}" />
            <ScrollViewer HorizontalScrollBarVisibility="Auto" Height="700">
                <Grid x:Name="ContentPanel" Width="470">
                    <StackPanel Margin="0,5,0,5">
                        <StackPanel Orientation="Vertical" Margin="0,5,0,5">
                            <TextBlock TextWrapping="Wrap" HorizontalAlignment="Left" 
                                Style="{StaticResource PhoneTextNormalStyle}">Product*</TextBlock>
                            <TextBox Style="{StaticResource TextValidationTemplate}" 
                         FontSize="{StaticResource   PhoneFontSizeNormal}" Width="470" 
                         HorizontalAlignment="Left" Name="txtTitle" Text="{Binding [Title], 
                                   Mode=TwoWay,ValidatesOnNotifyDataErrors=True,NotifyOnValidationError=True}" 
                                                                         TextWrapping="Wrap" />
                        </StackPanel>
                        <StackPanel Orientation="Vertical" Margin="0,5,0,5">
                            <TextBlock TextWrapping="Wrap" HorizontalAlignment="Left" 
                               Style="{StaticResource PhoneTextNormalStyle}">Description</TextBlock>
                            <TextBox Style="{StaticResource TextValidationTemplate}" 
                               FontSize="{StaticResource PhoneFontSizeNormal}" Width="470" 
                                HorizontalAlignment="Left" Name="txtDescription" 
                                                           Text="{Binding [Description],
                                                           Mode=TwoWay, ValidatesOnNotifyDataErrors=True, 
                                                           NotifyOnValidationError=True}" 
                                       TextWrapping="Wrap" />
                        </StackPanel>
                        <StackPanel Orientation="Vertical" Margin="0,5,0,5">
                            <TextBlock TextWrapping="Wrap" HorizontalAlignment="Left" 
                               Style="{StaticResource PhoneTextNormalStyle}">
                                                           Product Category</TextBlock>
                            <ListBox MaxHeight="400" Width="Auto" x:Name="lstBoxProduct_x0020_Category"
                                              ItemsSource="{Binding [Product_x0020_Category]}">
                                <ListBox.ItemTemplate>
                                    <DataTemplate>
                                        <RadioButton FontSize="{StaticResource PhoneFontSizeNormal}" 
                                          HorizontalAlignment="Left" GroupName="Product_x0020_Category" 
                                                                 Content="{Binding Name}" 
                               IsChecked="{Binding IsChecked, Mode=TwoWay}" />
                                    </DataTemplate>
                                </ListBox.ItemTemplate>
                            </ListBox>
                        </StackPanel>
                        <StackPanel Orientation="Vertical" Margin="0,5,0,5">
                            <TextBlock TextWrapping="Wrap" HorizontalAlignment="Left" 
                                       Style="{StaticResource PhoneTextNormalStyle}">Quantity*</TextBlock>
                            <TextBox Style="{StaticResource TextValidationTemplate}" 
                                   FontSize="{StaticResource PhoneFontSizeNormal}" Width="470" 
                                      HorizontalAlignment="Left" Name="txtQuantity" Text="{Binding [Quantity], 
                                        Mode=TwoWay, ValidatesOnNotifyDataErrors=True, 
                                           NotifyOnValidationError=True}"
                                             TextWrapping="Wrap" />
                        </StackPanel>
                        <StackPanel Orientation="Vertical" Margin="0,5,0,5">
                            <TextBlock TextWrapping="Wrap" HorizontalAlignment="Left" 
                                Style="{StaticResource PhoneTextNormalStyle}">Order Date</TextBlock>
                            <TextBox Height="Auto" Style="{StaticResource TextValidationTemplate}"
                                               FontSize="{StaticResource PhoneFontSizeNormal}" Width="470"  
                                                         HorizontalAlignment="Left" Name="txtOrder_x0020_Date" 
                         Text="{Binding [Order_x0020_Date], Mode=TwoWay, ValidatesOnNotifyDataErrors=True, 
                                           NotifyOnValidationError=True}" TextWrapping="Wrap" />
                            <TextBlock FontSize="16" TextWrapping="Wrap" HorizontalAlignment="Left" 
                                                 Style="{StaticResource PhoneTextSubtleStyle}" 
                                                             Text="{Binding DateTimeFormat}" />
                        </StackPanel>
                        <StackPanel Orientation="Vertical" Margin="0,5,0,5">
                            <TextBlock TextWrapping="Wrap" HorizontalAlignment="Left" 
                         Style="{StaticResource PhoneTextNormalStyle}">Fulfillment Date</TextBlock>
                            <TextBox Height="Auto" Style="{StaticResource TextValidationTemplate}"
                                          FontSize="{StaticResource PhoneFontSizeNormal}" Width="470" 
                                          HorizontalAlignment="Left" Name="txtFulfillment_x0020_Date" 
                        Text="{Binding [Fulfillment_x0020_Date], Mode=TwoWay, 
                     ValidatesOnNotifyDataErrors=True, NotifyOnValidationError=True}" 
                         TextWrapping="Wrap" />
                            <TextBlock FontSize="16" TextWrapping="Wrap" HorizontalAlignment="Left"
                                                    Style="{StaticResource PhoneTextSubtleStyle}" Text="{Binding
                                                           DateTimeFormat}" />
                        </StackPanel>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock TextWrapping="Wrap" Width="150" HorizontalAlignment="Left"
                                                  Style="{StaticResource PhoneTextNormalStyle}">Rush 
                                                                   :</TextBlock>
                            <CheckBox Name="txtRush" FontSize="{StaticResource PhoneFontSizeNormal}" 
                                          HorizontalAlignment="Left" IsChecked="{Binding [Rush], Mode=TwoWay, 
                               ValidatesOnNotifyDataErrors=True, NotifyOnValidationError=True}" />
                        </StackPanel>
                        <StackPanel Orientation="Vertical" Margin="0,5,0,5">
                            <TextBlock TextWrapping="Wrap" HorizontalAlignment="Left" 
                        Style="{StaticResource PhoneTextNormalStyle}">Contact Number</TextBlock>
                            <TextBox Style="{StaticResource TextValidationTemplate}" 
                                   FontSize="{StaticResource PhoneFontSizeNormal}" Width="470"
                                              HorizontalAlignment="Left" Name="txtContact_x0020_Number"
                                                         Text="{Binding [Contact_x0020_Number], 
                                                         Mode=TwoWay, ValidatesOnNotifyDataErrors=True, 
                                                         NotifyOnValidationError=True}" 
                                                                           TextWrapping="Wrap" />
                        </StackPanel>
                    </StackPanel>
                </Grid>
            </ScrollViewer>
        </StackPanel>
    </Grid>

    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton x:Name="btnSubmit" 
                                IconUri="/Images/appbar.save.rest.png" 
                                Text="Submit" Click="OnSubmitButtonClick"/>
            <shell:ApplicationBarIconButton x:Name="btnBack" 
                                IconUri="/Images/appbar.back.rest.png" 
                                 Text="Back to List" Click="OnBackButtonClick"/>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>

</phone:PhoneApplicationPage>
The XAML for defining this page is similar to that of the EditForm.xaml file. You can copy the EditForm.xaml file to use as a basis for DraftItemEditForm.xaml, making the modifications to the file as indicated in this markup.
  1. ソリューション エクスプローラーで選択された DraftItemEditForm.xaml ファイルで、F7 キーを押して、関連する分離コード ファイル DraftItemEditForm.xaml.cs を編集用に開きます。With the DraftItemEditForm.xaml file chosen in Solution Explorer, press F7 to open the associated code-behind file, DraftItemEditForm.xaml.cs, for editing.

  2. ファイルのコンテンツを次のコードで置き換えます。Replace the contents of the file with the following code.


using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using Microsoft.SharePoint.Client;
using Microsoft.Phone.Tasks;
using System.Device.Location;
using Microsoft.Phone.Shell;
using Microsoft.SharePoint.Phone.Application;

namespace SPListAppLocalStorage
{
    public partial class DraftItemEditForm : PhoneApplicationPage
    {
        EditItemViewModel viewModel;

        /// <summary>
        /// Constructor for Draft Item Edit Form.
        /// </summary>
        public DraftItemEditForm()
        {
            InitializeComponent();
        }

        protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
        {
 // Include initialization of ViewModel here rather than in constructor to be able to use QueryString value.
            if (viewModel == null)
            {
                viewModel = DraftItemStore.GetDraftItemById(NavigationContext.QueryString["ID"].ToString());
            }

            viewModel.Initialize();
            this.DataContext = viewModel;

            base.OnNavigatedTo(e);
            viewModel.ItemUpdated += new EventHandler<ItemUpdatedEventArgs>(OnItemUpdated);
        }

        protected override void OnNavigatedFrom(System.Windows.Navigation.NavigationEventArgs e)
        {
            base.OnNavigatedFrom(e);
            viewModel.ItemUpdated -= new EventHandler<ItemUpdatedEventArgs>(OnItemUpdated);
        }

        private void OnViewModelInitialization(object sender, InitializationCompletedEventArgs e)
        {
            this.Dispatcher.BeginInvoke(() =>
            {
                // If initialization has failed show error message and return.
                if (e.Error != null)
                {
                    MessageBox.Show(e.Error.Message, e.Error.GetType().Name, MessageBoxButton.OK);
                    return;
                }

                // Set Page's DataContext to current ViewModel instance.
                this.DataContext = (sender as EditItemViewModel);
            });
        }

        private void OnCancelButtonClick(object sender, EventArgs e)
        {
            NavigationService.Navigate(new Uri("/Views/List.xaml", UriKind.Relative));
        }

        private void OnSubmitButtonClick(object sender, EventArgs e)
        {
            viewModel.UpdateItem();
        }

        private void OnItemUpdated(object sender, ItemUpdatedEventArgs e)
        {
            this.Dispatcher.BeginInvoke(() =>
            {
                if (e.Error != null)
                {
                    MessageBox.Show(e.Error.Message, e.Error.GetType().Name, MessageBoxButton.OK);
                    return;
                }

                // Remove Draft Item from local storage if update to server succeeds.
                DraftItemStore.RemoveDraftItem(viewModel.ID.ToString());
                this.NavigationService.Navigate(new Uri("/Views/List.xaml", UriKind.Relative));
            });
        }

        private void OnBackButtonClick(object sender, EventArgs e)
        {
            NavigationService.Navigate(new Uri("/Views/List.xaml", UriKind.Relative));
        }
    }
}
As you can see, the namespace used in this file is based on the name of the project (SPListAppLocalStorage).
  1. DraftItemEditForm.xaml で宣言されている ApplicationBar ボタン (btnBack) 用に、appbar.back.rest.png 画像をプロジェクトに追加します。 ソリューション エクスプローラーImages フォルダー ノードを選択します。Add the appbar.back.rest.png image to your project for the ApplicationBar button (btnBack) declared in the DraftItemEditForm.xaml file. In Solution Explorer, choose the Images folder node in the project.

  2. [ プロジェクト] メニューの [ 既存の項目の追加] を選択します。On the Project menu, choose Add Existing Item.

  3. 開いているブラウザーで、Windows Phone SDK 7.1 によって標準の Windows Phone アイコン画像がインストールされているフォルダーに移動します。In the browser that opens, navigate to the folder in which the standard Windows Phone icon images were installed by the Windows Phone SDK 7.1.

    注意

    明るい前景と暗い背景のイメージは、SDK の標準インストールの %PROGRAMFILES%(x86)\\Microsoft SDKs\\Windows Phone\\v7.1\\Icons\\dark にあります。%PROGRAMFILES%(x86)\\Microsoft SDKs\\Windows Phone\\v7.1\\Icons\\dark The images with a light foreground and a dark background are in in a standard installation of the SDK.

  4. appbar.back.rest.png という名前の画像ファイルを選択して [追加] を選択します。イメージ ノードの下のプロジェクトに画像が追加されます。Choose the image file named appbar.back.rest.png, and choose Add. The image is added to the project under the Images node.

  5. ソリューション エクスプローラーで、今追加した画像を選択します。そのファイルの [ プロパティ ウィンドウ] で、画像ファイルの [ ビルド アクション] プロパティを [ コンテンツ] に設定し、[ 出力ディレクトリにコピー] プロパティを [ 新しい場合はコピーする] に設定します。In Solution Explorer, choose the image file you just added, and in the Properties Window for the file, set the Build Action property for the image file to Content, and set the Copy to Output Directory property to Copy if newer.

  6. ファイルを保存します。Save the files.

アイテムを下書きとして保存するための ApplicationBar ボタンを編集フォームに追加するTo add an ApplicationBar button to the Edit Form for saving an item as a draft

  1. ソリューション エクスプローラーで、プロジェクトの ViewModels ノードの下の EditItemViewModel.cs ファイルを選択します。 F7 を押して、ファイルを編集用に開きます。In Solution Explorer, choose the EditItemViewModel.cs file under the ViewModels node in the project. Press F7 to open the file for editing.

  2. EditItemViewModel クラスを実装するコード ブロック (左中かっこと右中かっこで区切られる) について、次の public メソッドをファイルに追加します。Within the code block (demarcated by opening and closing braces) that implements the EditItemViewModel class, add the following public method to the file.


public void SaveAsDraft()
{
    DraftItemStore.AddDraftItem(this.ID.ToString(), this);
}
  1. ソリューション エクスプローラーで、プロジェクトの Views ノードの下の EditForm.xaml ファイルをダブルクリックします。In Solution Explorer, under the Views node in the project, double-click the EditForm.xaml file.

    ファイルが編集用にデザイナーに開かれます。The file is opened for editing in the designer.

  2. デザイナーの XAML ペインで、(既存の Submit ボタンと Cancel ボタンに加えて) もう 1 つのボタンを <shell:ApplicationBar> タグに追加します。以下の XAML のようにします。In the XAML pane of the designer, add another button to the <shell:ApplicationBar> tag (in addition to the existing Submit and Cancel buttons), as shown in the following XAML.


<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
        <shell:ApplicationBarIconButton x:Name="btnSubmit" 
              IconUri="/Images/appbar.save.rest.png" 
              Text="Submit" Click="OnBtnSubmitClick"/>
        <shell:ApplicationBarIconButton x:Name="btnSaveDraft"            IconUri="/Images/appbar.save.rest.png" Text="Save Draft"            Click="OnSaveDraftButtonClick"/>
        <shell:ApplicationBarIconButton x:Name="btnCancel" 
                      IconUri="/Images/appbar.cancel.rest.png" 
                      Text="Cancel" Click="OnCancelButtonClick"/>
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
  1. ソリューション エクスプローラーで EditForm.xaml ファイルを選択して F7 を押し、関連付けられている分離コード ファイル EditForm.xaml.cs を編集用に開きます。With the EditForm.xaml file chosen in Solution Explorer, press F7 to open the associated code-behind file, EditForm.xaml.cs, for editing.

  2. EditForm 部分クラスを実装するコード ブロック (左中かっこと右中かっこで区切られる) について、次のイベント ハンドラーをファイルに追加します。Within the code block (demarcated by opening and closing braces) that implements the EditForm partial class, add the following event handler to the file.


private void OnSaveDraftButtonClick(object sender, EventArgs e)
{
    viewModel.SaveAsDraft();
}
  1. ファイルを保存します。Save the files.

すべての下書きアイテムを表示する ApplicationBar ボタンをリスト表示フォームに追加するTo add an ApplicationBar button to the List View Form to display all draft items

  1. ソリューション エクスプローラーで、 Views ノードの下の List.xaml ファイルをダブルクリックします。In Solution Explorer, under the Views node, double-click the List.xaml file.

    ファイルが編集用にデザイナーに開かれます。The file is opened for editing in the designer.

  2. デザイナーの XAML ペインで、(既存の New ボタンと Refresh ボタンに加えて) もう 1 つのボタンを <shell:ApplicationBar> タグに追加します。以下の XAML のようにします。In the XAML pane of the designer, add another button to the <shell:ApplicationBar> tag (in addition to the existing New and Refresh buttons), as shown in the following XAML markup.


<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
        <shell:ApplicationBarIconButton x:Name="btnNew" 
        IconUri="/Images/appbar.new.rest.png" Text="New" 
                    Click="OnNewButtonClick"/>
        <shell:ApplicationBarIconButton x:Name="btnRefresh" 
                   IconUri="/Images/appbar.refresh.rest.png" 
        Text="Refresh" IsEnabled="True" Click="OnRefreshButtonClick"/>
        <shell:ApplicationBarIconButton x:Name="btnDrafts"            IconUri="/Images/appbar.folder.rest.png"            Text="View Drafts" IsEnabled="True"            Click="OnDraftsButtonClick"/>
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
  1. Drafts ボタン用のアイコン画像をプロジェクトに追加します。 ソリューション エクスプローラーで、プロジェクトの Images フォルダーを選択します。Add an icon image to your project for the Drafts button. In Solution Explorer, choose the Images folder node in the project.

  2. [ プロジェクト] メニューの [ 既存の項目の追加] を選択します。On the Project menu, choose Add Existing Item.

  3. 開いているブラウザーで、Windows Phone SDK 7.1 によって標準の Windows Phone アイコン画像がインストールされているフォルダーに移動します。In the browser that opens, navigate to the folder in which the standard Windows Phone icon images were installed by the Windows Phone SDK 7.1.

    注意

    明るい前景と暗い背景のイメージは、SDK の標準インストールの %PROGRAMFILES%(x86)\\Microsoft SDKs\\Windows Phone\\v7.1\\Icons\\dark にあります。%PROGRAMFILES%(x86)\\Microsoft SDKs\\Windows Phone\\v7.1\\Icons\\dark The images with a light foreground and a dark background are in in a standard installation of the SDK.

  4. appbar.folder.rest.png という名前の画像ファイルを選択して [追加] を選択します。Choose the image file named appbar.folder.rest.png, and then choose Add.

    イメージ ノードの下のプロジェクトに画像が追加されます。The image is added is added to the project under the Images node.

  5. ソリューション エクスプローラーで、今追加した画像を選択します。そのファイルの [ プロパティ ウィンドウ] で、画像ファイルの [ ビルド アクション] プロパティを [ コンテンツ] に設定し、[ 出力ディレクトリにコピー] プロパティを [ 新しい場合はコピーする] に設定します。In Solution Explorer, choose the image file you just added and in the Properties Window, set the Build Action property for the image file to Content and set the Copy to Output Directory property to Copy if newer.

  6. ソリューション エクスプローラーで、 Views ノードの下の List.xaml ファイルを選択して F7を押します。関連付けられている分離コード ファイル List.xaml.cs が編集用に開かれます。In Solution Explorer, choose the List.xaml file under the Views node and press F7. The associated code-behind file, List.xaml.cs, is opened for editing.

  7. ListForm 部分クラスを実装するコード ブロック (左中かっこと右中かっこで区切られる) について、次のイベント ハンドラーをファイルに追加します。Add the following event handler to the file, within the code block (demarcated by opening and closing braces) that implements the ListForm partial class.


private void OnDraftsButtonClick(object sender, EventArgs e)
{
    NavigationService.Navigate(new Uri("/Views/Drafts.xaml", UriKind.Relative));
}
  1. ソリューション内のすべてのファイルを保存し、 F6 を押してソリューションをコンパイルします。Save all the files in the solution and press F6 to compile the solution.

プロジェクトを開始して Windows Phone エミュレーターに展開すると、[ View Drafts] ボタンがリスト フォームの ApplicationBar に表示されます (図 1)。このボタンは、下書きとして保存されたすべてのリスト アイテムを表示します。If you start the project and deploy it to a Windows Phone Emulator, you see a View Drafts button on the ApplicationBar of the List form (Figure 1), which brings up all list items stored as drafts.

図 1. [View Drafts] ボタンを含むように変更されたリスト フォームFigure 1. Modified List Form with View Drafts button

[下書き表示] ボタンを含むように変更されたリスト フォーム

最初は、下書きが保存されていないので、下書きを表示するページは空になります。リスト フォームからアイテムを選択し (アイテムの表示フォーム (DisplayForm.xaml) を表示し)、[ Edit] ボタンを押して編集フォームを表示します。SharePoint Server との接続がない場合は、編集フォームの [ Save Draft] ボタンを押し (図 2)、リスト アイテムに加えた変更内容を分離ストレージに保存できます。At first, because no drafts are saved, the page to display drafts will be empty. Choose an item from the List form (to show the Display form (DisplayForm.xaml) for an item), and then choose the Edit button to display the Edit form. If you should lose connectivity with the SharePoint Server, you can then choose the Save Draft button on the Edit Form (Figure 2) to save any changes you've made to the list item to isolated storage.

図 2. [Save Draft] ボタンを含むように変更された編集フォームFigure 2. Modified Edit Form with Save Draft button

[下書きの保存] ボタンを含むように変更された編集フォーム

サーバーが再び使用できるようになったら、リスト フォームの [ View Drafts] ボタンを押して下書きページを表示します (図 3)。When the server becomes available again, you can choose the View Drafts button on the List form to display the Drafts page (Figure 3).

図 3. 下書きとして分離ストレージに保存されたアイテムを表示する下書きページFigure 3. Drafts page displaying items saved as drafts to isolated storage

下書きとして保存したリスト項目が表示されている下書きページ

下書きページ上でアイテムを 1 つ選択すると、下書きアイテム編集フォーム (DraftItemEditForm.xaml) が表示されます (図 4)。ここでさらに変更を加えることもできます。[ Submit] ボタンを押し、編集したアイテムをサーバーに保存します。変更内容がサーバーに保存されると下書きアイテムとして扱われなくなるため、この時点でアイテムは分離ストレージから削除されます。If you choose an item on the Drafts page, the Draft Item Edit form (DraftItemEditForm.xaml) is displayed (Figure 4) and you can make any additional changes, and then click the Submit button to save the edited item to the server. At that point, the item is removed from isolated storage because it's no longer treated as a draft item after it's saved with its changes to the server.

図 4. 下書きアイテム編集フォームFigure 4. Draft Item Edit Form

下書きアイテム編集フォーム

アプリ内の下書きアイテム編集フォーム (図 4) と、通常の編集フォーム (図 2) がほぼ同じであることに注目してください。下書きアイテムの編集エクスペリエンスは、編集フォームでのアイテムの編集エクスペリエンスとほぼ同じであることが推奨されます。Notice the similarity between the Draft Item Edit form (Figure 4) and the standard Edit form (Figure 2) in this app. The editing experience for items as draft items should be about the same as the editing experience for items in the context of the Edit form.

関連項目See also