Windows Phone 用 SharePoint リスト アプリのユーザー インターフェイスをカスタマイズするCustomize the user interface of a SharePoint list app for Windows Phone

Windows Phone SharePoint リスト アプリケーション テンプレートによって生成された Windows Phone ユーザー インターフェイスをカスタマイズします。 Windows Phone SharePoint リスト アプリケーション テンプレートから作成された SharePoint リスト アプリケーションは、Silverlight for Windows Phone フレームワークに基づきます。開発者は Windows Phone の Silverlight プラットフォームによって提供されるすべての機能を使用して、Windows Phone 用に設計されている SharePoint リスト アプリケーションのユーザー インターフェイス (UI) をカスタマイズすることができます。Customize the Windows Phone user interface generated by the Windows Phone SharePoint List Application template. SharePoint list apps created from the Windows Phone SharePoint List Application template are based on the Silverlight for Windows Phone framework. All of the capabilities provided by the Silverlight platform on a Windows Phone are available to developers for customizing the user interface (UI) of a SharePoint list app designed for a Windows Phone.

重要: 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.

ユーザー インターフェイスのカスタマイズに対応した SharePoint リスト アプリを作成するCreate a SharePoint list app for user interface customizations

以下の手順では、SharePoint Server を実行しているサーバーが Custom List テンプレートから作成された Product Orders リストを保持しているものとします。このリストは、「 SharePoint 用 Windows Phone アプリにビジネス ロジックとデータ検証を実装する方法」で使用される Product Orders リストのサンプルと類似しています。このトピックで使用する Windows Phone アプリのサンプルでは、このアプリが基づく Product Orders リストが変更されていて、追加フィールドが含まれます。このトピックの例で使用する変更された Product Orders リストは、表 1 に示されている列とフィールド型を使用して作成されています。For the following procedures, assume a server running SharePoint Server has a Product Orders list created from the Custom List template, similar to the sample Product Orders list used in How to: Implement business logic and data validation in a Windows Phone app for SharePoint. For the sample Windows Phone app used in this topic, the Product Orders list on which the app is based has been modified to include additional fields. The modified Product Orders list used for the purposes of the examples in this topic has been created with the columns and field types shown in Table 1.

表 1. 変更された Product Orders リストTable 1. Modified Product Orders list

Column Type 必須Required
Product (すなわち、タイトル)Product (i.e., Title)
1 行テキスト (Text)Single line of text (Text)
はいYes
説明Description
1 行テキスト (Text)Single line of text (Text)
いいえNo
Product CategoryProduct Category
選択肢Choice
いいえNo
数量Quantity
NumberNumber
はいYes
Order DateOrder Date
日付/時刻 (DateTime)Date and Time (DateTime)
いいえNo
Fulfillment DateFulfillment Date
日付/時刻 (DateTime)Date and Time (DateTime)
いいえNo
RushRush
ブール値Boolean
いいえNo
Contact NumberContact Number
1 行テキスト (Text)Single line of text (Text)
いいえNo

[方法] Windows Phone 用の SharePoint リスト アプリを作成する」に示されている手順に従って、Windows Phone SharePoint リスト アプリケーション テンプレートを使用して、以下の UI をカスタマイズするための開始点として SharePoint リスト アプリケーションを生成します。アプリケーションのターゲット SharePoint リストとして、表 1 に表されているリストに類似したスキーマを持つリストを指定します。Follow the procedures in How to: Create a Windows Phone SharePoint list app to use the Windows Phone SharePoint List Application template to generate a SharePoint list app as a starting point for the following UI customizations. Specify as the target SharePoint list for the app a list that has a schema similar to what is represented in Table 1.

TextBox コントロールを DatePicker コントロールに置き換えるReplace TextBox controls with DatePicker controls

テンプレートによって生成されたプロジェクトに基づいて、 DateTime フィールドとして (たとえば、同じ Product Orders リストの Order Date フィールドとして) 指定されたリストのフィールドは、既定でアプリケーションの Edit フォーム (EditForm.xaml) および New フォーム (NewForm.xaml) の TextBox コントロールにバインドされます。ユーザー インターフェイスに加える最初の改良は、 Silverlight for Windows Phone Toolkit から、こうしたフィールドに関連する TextBox コントロールを DatePicker コントロールに置き換えることによりフィールドの日付値の入力を推進することです。オープンソース ソフトウェア プロジェクトのホスティング サイトである CodePlex Web サイトから Silverlight for Windows Phone Toolkit をインストールできます。Based on the project as generated by the template, fields in the list designated as DateTime fields (as, for example, the Order Date field in the sample Product Orders list) are bound by default to TextBox controls in the Edit form (EditForm.xaml) and the New form (NewForm.xaml) in the app. The first improvement you will make to the user interface is to facilitate entering date values for such fields by replacing their associated TextBox controls with DatePicker controls from the Silverlight for Windows Phone Toolkit. You can install Silverlight for Windows Phone Toolkit from the CodePlex Website, a hosting site for open-source software projects.

TextBox コントロールを DatePicker コントロールに置き換えるにはTo replace TextBox controls with DatePicker controls

  1. Microsoft Visual Studio 2010 では、プロジェクトが開いていない場合、Windows Phone SharePoint リスト アプリケーション テンプレートに基づき、表 1 に表されている Product Orders リストに類似した SharePoint リストを使用して、前のセクションで作成したプロジェクトを開きます。In Microsoft Visual Studio 2010, if the project is not opened already, open the project you created in the preceding section, based on the Windows Phone SharePoint List Application template and using a SharePoint list like the Product Orders list represented in Table 1.

  2. Visual Studio で [ プロジェクト] メニューを開き、[ 参照の追加] をクリックします。[ 参照の追加] ダイアログ ボックスが表示されます。On the Project menu in Visual Studio, click Add Reference. The Add Reference dialog box appears.

  3. [ブラウザー] タブで、Silverlight for Windows Phone Toolkit でインストールされた Microsoft.Phone.Controls.Toolkit.dll アセンブリに移動します。On the Browse tab, navigate to the Microsoft.Phone.Controls.Toolkit.dll assembly installed by the Silverlight for Windows Phone Toolkit.

    注意

    Toolkit の標準インストールの場合、Microsoft.Phone.Controls.Toolkit.dll アセンブリは %PROGRAMFILES%(x86)\Microsoft SDKs\Windows Phone\v7.1\Toolkit\< MonthYear >\Bin にあります。< MonthYear > は、インストールされている Toolkit のバージョンに応じて "Oct11" などになります。Note: The Microsoft.Phone.Controls.Toolkit.dll assembly can be found in %PROGRAMFILES%(x86)\Microsoft SDKs\Windows Phone\v7.1\Toolkit< MonthYear\Bin in a standard installation of the Toolkit, where < MonthYear > may be something like "Oct11", depending on the version of the Toolkit installed. (また、Toolkit でインストールしたアセンブリは、システムで [スタート] ボタンをクリックして [すべてのプログラム] をポイントし、[プログラム] メニュー内の [Microsoft Silverlight for Windows Phone Toolkit] 項目を展開して [バイナリ] をクリックすることで見つけることもできます)。(Or you can find the assemblies installed by the Toolkit on your system by clicking the Start button, pointing to All Programs, expanding the Microsoft Silverlight for Windows Phone Toolkit item in the Programs menu, and clicking Binaries.)

  4. [ソリューション エクスプローラー] で、[ビュー] ノードにある EditForm.xaml ファイルを選択します。In Solution Explorer, select the EditForm.xaml file under the Views node.

  5. SHIFT + F7 を押して (または、ファイルをダブルクリックして)、デザイナーでファイルを開きます。Press SHIFT + F7 (or double-click the file) to open the file in the designer.

  6. デザイナーの [XAML] ウィンドウで、Toolkit アセンブリ内のコントロールを識別するための名前空間宣言を <phone:PhoneApplicationPage> タグに追加します。In the XAML pane of the designer, add a namespace declaration for distinguishing the controls in the Toolkit assembly to the <phone:PhoneApplicationPage> tag.


<phone:PhoneApplicationPage
    x:Class="ContosoSPListApp.EditForm"
    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:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    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 = "EditPage">
The only change to the default markup generated by the template is the addition of the "xmlns:toolkit" namespace designation. Also note that the value of the **Class** attribute here is based on the name of your project. "ContosoSPListApp" is the name of this sample project. The value of this attribute in your project will differ from the value here depending on the name of your project.
  1. EditForm.xaml ファイルで、 Order Date フィールド (フィールドの XML スキーマで "Order_x0020_Date" として指定されます) に関連するコントロールを含むマークアップの StackPanel コントロールを見つけます。既定では、テンプレートは、 DateTime フィールドに対して 1 つの TextBox コントロールと 2 つの TextBlock コントロールを生成します。 StackPanel コントロールとこのコントロールに含まれるコントロールのマークアップは、以下のマークアップのようになります。In the EditForm.xaml file, locate the StackPanel control in the markup that contains the controls associated with the Order Date field (designated as "Order_x0020_Date" in the XML schema for the field). By default, the template generates a TextBox control and two TextBlock controls for DateTime fields. The markup for the StackPanel control and the controls it contains should resemble the following markup.

<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>
  1. StackPanel コントロールとこのコントロールに含まれるコントロールを以下のマークアップに置き換えます。Replace that StackPanel control and the controls it contains with the following markup.

<StackPanel Orientation="Vertical" Margin="0,5,0,5">
    <toolkit:DatePicker Header="Order Date" Value="{Binding [Order_x0020_Date], Mode=TwoWay}">
              </toolkit:DatePicker>
</StackPanel>
  1. 次に、Fulfillment Date フィールド (フィールドのスキーマで "Fulfillment_x0020_Date" として指定されます) に関連するコントロールを含むマークアップで (または EditForm.xaml で)、 StackPanel コントロールを見つけます。 StackPanel コントロールとこのコントロールに含まれるコントロールのマークアップは、以下のマークアップのようになります。Next, locate (also in EditForm.xaml) the StackPanel control in the markup that contains the controls associated with the Fulfillment Date field (designated as "Fulfillment_x0020_Date" in the schema for the field). The markup for the StackPanel and the controls it contains should resemble the following markup.

<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>
  1. StackPanel コントロールとこのコントロールに含まれるコントロールを以下のマークアップに置き換えます。Replace that StackPanel control and the controls it contains with the following markup.

<StackPanel Orientation="Vertical" Margin="0,5,0,5">
    <toolkit:DatePicker Header="Fulfillment Date" Value="{Binding [Fulfillment_x0020_Date], Mode=TwoWay}"></toolkit:DatePicker>
</StackPanel>
  1. 最後に、Silverlight for Windows Phone Toolkit からユーザー インターフェイス アイコン イメージをプロジェクトに追加できます。 ソリューション エクスプローラーで、プロジェクトを表すノード (たとえば、"ContosoSPListApp" という名前の) を選択します。Finally, you can add user interface icon images from the Silverlight for Windows Phone Toolkit to your project. In Solution Explorer, select the node representing the project (named, for example, "ContosoSPListApp").

  2. Visual Studio の [ プロジェクト] メニューで、[ 新しいフォルダー] をクリックします。プロジェクト ノードの下に新しいフォルダーが追加されます。フォルダーに "Toolkit.Content" という名前を付けます。On the Project menu in Visual Studio, click New Folder. A new folder is added under the project node. Name the folder "Toolkit.Content".

  3. ソリューション エクスプローラーで、前の手順で作成したフォルダーを選択します。In Solution Explorer, select the folder you created in the preceding step.

  4. [ プロジェクト] メニューの [ 既存の項目の追加] をクリックします。[ File Browser] ウィンドウが開きます。On the Project menu, click Add Existing Item. A File Browser window opens.

  5. Silverlight for Windows Phone Toolkit でサポート アイコン画像の ApplicationBar.Cancel.png と ApplicationBar.Check.png がインストールされた場所に移動します。Navigate to the folder where the supporting icon images, ApplicationBar.Cancel.png and ApplicationBar.Check.png, were installed by the Silverlight for Windows Phone Toolkit.

    注意

    これらのイメージは、ツールキットの標準インストールの %PROGRAMFILES%(x86)\Microsoft SDKs\Windows Phone\v7.1\Toolkit\< MonthYear >\Bin\Icons にあります。ここで、< MonthYear > は、インストールされたツールキットのバージョンに応じて、"Oct11" のようになります。Note The images are in %PROGRAMFILES%(x86)\Microsoft SDKs\Windows Phone\v7.1\Toolkit< MonthYear\Bin\Icons in a standard installation of the Toolkit, where < MonthYear > may be something like "Oct11", depending on the version of the Toolkit installed.

  6. 両方の画像を選択して [追加] をクリックします。画像ファイルは、[Toolkit.Content] フォルダー ノードの下のプロジェクトに追加されます。Select both images and click Add. The image files are added to the project under the Toolkit.Content folder node.

    重要: Silverlight for Windows Phone Toolkit のコンポーネントがアイコン画像を使用できるようにするには、前の手順で指定したプロジェクトの場所に画像を配置する必要があります。Important: For the components of the Silverlight for Windows Phone Toolkit to be able to use the icon images, they must be placed in the location in your projected as specified in the preceding steps.

  7. [ソリューション エクスプローラー] で、[Toolkit.Content] フォルダーの下にある両方の画像を選択します。In Solution Explorer, select both image files under the Toolkit.Content folder.

  8. [ プロパティ ウィンドウ] で、イメージの [ ビルド アクション ] プロパティを [コンテンツ] に設定し、[ 出力ディレクトリにコピー ] プロパティを [新しい場合はコピーする] に設定します。In the Properties Window, set the Build Action property for the images to "Content" and set the Copy to Output Directory property to "Copy if newer".

    注意

    プロパティ ウィンドウが表示されていない場合は、CTRL + W キーを押してから P キーを押すと、このウィンドウが Visual Studio 内に表示されます。Note: If the Properties Window is not visible, press CTRL + W and then P to display the window in Visual Studio.

    プロジェクトを開始して (F5 キーを押す)、Windows Phone エミュレーターにプロジェクトを展開すると、アイテムの [編集] フォームに移動できます (メインの [リスト ビュー] ページ内のアイテムをクリックしてから、アプリの [アプリケーション バー][編集] をクリックする)。If you start the project (by pressing F5) to deploy it to the Windows Phone Emulator, you can navigate to the Edit form for an item (by clicking an item in the main List View page and then clicking the Edit button on the Application Bar in the app). フォーム内の DateTime フィールドは、図 1 に示すように、DatePicker コントロールに関連付けられるようになります。The DateTime fields in the form are now associated with the DatePicker control, as shown in Figure 1.

    図 1. DatePicker コントロールがある Edit フォームFigure 1. Edit form with DatePicker control

    DatePicker コントロールがある Edit フォーム

DatePicker コントロール (図 1 で Order Date フィールドが強調表示されています) は、ラベルとして関連する TextBlock を持つ TextBox コントロールに非常に類似していまが、図 2 に示されているように、 DatePicker コントロールをクリックしたときに (または、Windows Phone デバイスでコントロールをタップしたときに)、このコントロールは、ジェスチャを使用して日付を選択するコントロールを持つ個別のページを表示する点が異なります。The DatePicker control (highlighted for the Order Date field in Figure 1) looks very much like a TextBox control with an associated TextBlock as a label, except that when you click the DatePicker control (or tap it on a Windows Phone device), the control displays a separate page with controls for selecting dates using gestures, as shown in Figure 2.

図 2. 日付選択ページFigure 2. Date chooser page

日付選択ページ

[ 完了] ボタンをクリックすると、選択した日付が Edit フォームの DatePicker コントロールに転送されます。上記の手順でコントロールの Value プロパティが EditForm.xaml ファイルの適切なフィールドにバインドされているので、このフォームの [ 保存] ボタンをクリックすると、 DatePicker コントロールに関連付けられている DateTime フィールドの値がサーバーの SharePoint リストで更新されます。New フォームでも TextBox コントロールを DatePicker コントロールに置き換えるには、プロジェクトの NewForm.xaml ファイルの手順 4 ~ 10 を繰り返します。Clicking the Done button transfers the chosen date to the DatePicker control on the Edit form. If you then click the Save button on that form, the values of the DateTime fields associated with the DatePicker controls are updated in the SharePoint list on the server, because the Value properties of the controls were bound to the appropriate fields in the EditForm.xaml file in the procedure above. If you wanted to replace TextBox controls with DatePicker controls in the New form as well, you would repeat Steps 4 through 10 of the procedure for the NewForm.xaml file in the project.

選択肢フィールドのカスタム fill-in オプションをサポートするためにコントロールを追加するAdd controls to support custom fill-in options for Choice fields

SharePoint リストの選択肢フィールド型で指定されたフィールドを SharePoint Server で構成することにより、ユーザーが、サーバーで定義されたときに選択肢フィールドに割り当てられる宣言選択肢の値の他に、フィールドのカスタム (または "fill-in") 選択肢の値を指定できるようにすることが可能です。Windows Phone SharePoint リスト アプリケーション テンプレートから作成されたプロジェクトでは、"fill-in" オプションを入力する UI サポートを含めるために、選択肢フィールドは既定でレンダリングされません。このセクションの手順で、UI コントロールとコードをアプリケーションに追加し、Product Category フィールドのカスタム選択肢の値の入力をサポートします。Fields designated with the Choice field type in a SharePoint list can be configured on a SharePoint Server to allow users to specify custom (or "fill-in") choice values for a field, in addition to any declared choice values that may be assigned to a Choice field when it is defined on the server. In projects created from the Windows Phone SharePoint List Application template, Choice fields are not rendered by default to include UI support for entering "fill-in" options. In the procedures in this section, you will add UI controls and code to your app to support entering custom choice values for the Product Category field.

以下の手順では、次の操作を行います。In the following procedures, you will:

  • データを処理して Product Category 選択肢フィールドに保存する変換ロジックを持つクラス ( ContosoConverter) を追加します。Add a class ( ContosoConverter) with conversion logic to process data to be saved to the Product Category Choice field.

  • プロパティ メンバー ( OtherCategoryValue) を、選択肢フィールドの "fill-in" 値を表す文字列へのアクセスを提供する EditItemViewModel クラスに追加します。このプロパティ メンバーは、Edit フォームに追加された TextBox コントロールのバインディング宣言のソースとして機能します。Add a property member ( OtherCategoryValue) to the EditItemViewModel class that provides access to a string representing the "fill-in" value for the Choice field. This property member will serve as the source in a Binding declaration for an added TextBox control on the Edit form.

  • RadioButton コントロールと TextBox コントロールを Edit フォームに追加し、ユーザーが Product Category フィールドの "fill-in" 選択肢の値を指定できるようにします。Add a RadioButton control and a TextBox control to the Edit form for users to be able to specify a "fill-in" choice value for the Product Category field.

  • Edit フォームに関連付けられている分離コード ファイル EditForm.xaml.cs を変更し、選択肢フィールドのために編集フィールド値コンバーターの set 関数を登録し、Edit フォームに追加されているコントロールのイベント ハンドラーを実装します。Modify the code-behind file, EditForm.xaml.cs, associated with the Edit form to register an edit field value converter set function for Choice fields and implement event handlers for the controls added to the Edit form.

注意

フィールド値コンバーターの詳細については、「方法: Windows Phone アプリ用に SharePoint フィールド タイプをサポートおよび変換する」を参照してください。Note: For more information about field value converters, see How to: Support and convert SharePoint field types for Windows Phone apps.

選択肢フィールドのデータ変換をサポートするクラスを追加するにはTo add a class to support data conversion for Choice fields

  1. ソリューション エクスプローラーで、プロジェクトを表すノード (たとえば、ContosoSPListApp という名前が付いています) を選択します。In Solution Explorer, select the node representing the project (named, for example, ContosoSPListApp).

  2. Visual Studio (または、Visual Studio Express for Windows Phone) の [ プロジェクト] メニューで [ クラスの追加] をクリックします。C# の [ クラス] テンプレートが既に選択されている [ 新しい項目の追加] ダイアログ ボックスが表示されます。On the Project menu in Visual Studio (or Visual Studio Express for Windows Phone), click Add Class. The Add New Item dialog box opens with the C# Class template already selected.

  3. クラス ファイルの名前 (たとえば、ContosoConverter.cs) を指定し、[ 追加] をクリックします。クラス ファイルがプロジェクトに追加され、編集用に開きます。Specify a name for the class file (as, for example, ContosoConverter.cs) and click Add. The class file is added to the project and opened for editing.

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


using System;
using System.Net;
using System.Windows;
using System.Collections.ObjectModel;
using Microsoft.SharePoint.Phone.Application;
using Microsoft.SharePoint.Client;

namespace SPListAppUICustomization
{
    public class ContosoConverter
    {
        // Edit Field Value Converter SET function for Choice fields.
        public static void SetConvertedChoiceEditFieldValue(string fieldName, object fieldValue, 
                                        ListItem item, ConversionContext context, string customCategory)
        {
            ObservableCollection<ChoiceFieldViewModel> choices = fieldValue as
                                                   ObservableCollection<ChoiceFieldViewModel>;
               bool isCustomValue = true;

            string specifiedChoice = string.Empty;

            if (choices != null)
            {
                foreach (ChoiceFieldViewModel choiceItem in choices)
                {
                    if ((choiceItem.IsChecked == true) || (choiceItem.Name.Equals(customCategory, 
                                                             StringComparison.CurrentCultureIgnoreCase)))
                    {
                        specifiedChoice = choiceItem.Name;
                        isCustomValue = false;
                        break;
                    }
                }

                if (isCustomValue == true)
                {
                    specifiedChoice = customCategory;
                }
            }
            else
            {
                specifiedChoice = customCategory;
            }

            item[fieldName] = specifiedChoice;
        }
    }
}
  1. ファイルを保存します。Save the file.

この SetConvertedChoiceEditFieldValue 関数は、アプリケーションの選択肢フィールド用に登録されている、編集フィールド値コンバーターの set 関数デリゲートの実装に使用されます。この関数は、 fieldValue 引数として渡される ChoiceFieldViewModel オブジェクトのコレクションを反復処理します。 ChoiceFieldViewModel オブジェクトは、Windows Phone SharePoint リスト アプリケーション テンプレートに基づいて、プロジェクトの選択肢フィールドの個々の値を表すために使用されます。各オブジェクトには、指定された選択を表す Name プロパティと、指定された選択の値 (定義済みのフィールドで使用できる値) がフィールド用に指定された値かどうかを示す Boolean プロパティ ( IsChecked) があります。 SetConvertedChoiceEditFieldValue 関数は、コレクションの ChoiceFieldViewModel オブジェクトがチェックされたかどうか、またはオブジェクトの Name プロパティが Product Category フィールドに指定されたカスタム値に一致するかどうかを決定します。一致する場合は、 ChoiceFieldViewModel オブジェクトの Name プロパティは、フィールドの値を設定するために使用されます。そうでない場合は、指定されたカスタム値 ( customCategory 引数から) がフィールドの値として設定されます。The SetConvertedChoiceEditFieldValue function here is used for the implementation of the edit field value converter set function delegate registered for Choice fields in the app. The function iterates through the collection of ChoiceFieldViewModel objects passed as the fieldValue argument. ChoiceFieldViewModel objects are used to represent individual values for Choice fields in projects based on the Windows Phone SharePoint List Application template. Each object has a Name property that represents a given choice and a Boolean property ( IsChecked) indicating whether a given choice value (of those values available for a field as was defined) is the value specified for the field. The SetConvertedChoiceEditFieldValue function determines whether a ChoiceFieldViewModel object in the collection is checked or whether the Name property of an object matches a specified custom value for the Product Category field. If so, the Name property of that ChoiceFieldViewModel object is used to set the value of the field. Otherwise, a specified custom value (from the customCategory argument) is set as the value of the field.

次に、プロパティ メンバーを、選択肢フィールドの "fill-in" 値 (または、選択肢フィールドの指定値がサーバーのフィールドに定義されている使用可能な選択肢の 1 つである場合は空の文字列) へのアクセスを提供する EditItemViewModel クラスに追加します。Next you will add a property member to the EditItemViewModel class that provides access to the "fill-in" value for a Choice field (or an empty string if the specified value of the Choice field is one of the available choices defined for the field on the server).

プロパティ メンバーを EditItemViewModel クラスに追加するにはTo add a property member to the EditItemViewModel class

  1. ソリューション エクスプローラーで、 ViewModels フォルダー ノードの下にある EditItemViewModel.cs ファイルを選択します。In Solution Explorer, under the ViewModels folder node, select the EditItemViewModel.cs file.

  2. F7 を押して (または、ファイルをダブルクリックして)、編集するファイルを開きます。Press F7 (or double-click the file) to open the file for editing.

  3. ファイルの既定の using ディレクティブの後に、次のディレクティブを追加します。After the default using directives in the file, add the following directive.


using System.Collections.ObjectModel;
  1. EditItemViewModel クラスを実装するコード ブロック (左かっこと右かっこで区切られる) 内で、次のプロパティ メンバー ( OtherCategoryValue という名前が付いています) の実装をファイルに追加します。Add the following implementation of a property member (named OtherCategoryValue) to the file, within the code block (demarcated by opening and closing braces) that implements the EditItemViewModel class.
  public string OtherCategoryValue
{
    get
    {
        string specifiedCategory = string.Empty;

        // See if specified Choice field value is one of the available values
        // from the List ViewModel. If it is, return an empty string.
        ObservableCollection<ChoiceFieldViewModel> choicesCollection = this["Product_x0020_Category"] as
                                               ObservableCollection<ChoiceFieldViewModel>;
        if (choicesCollection != null &amp;&amp; choicesCollection.Any(choice => choice.IsChecked))
        {
            return specifiedCategory;
        }

        // If Choice field value is not one of the values from the List ViewModel,
        // get the value from the underlying list item and return value as string.
        specifiedCategory = SharePointListItem.FieldValuesAsText["Product_x0020_Category"];
        return specifiedCategory;
    }
}
  1. ファイルを保存します。Save the file.

次に、コントロールを Edit フォームに追加し、これらのコントロールを構成して、Product Category フィールドのカスタム値の入力をサポートします。Next, you will add controls to the Edit form and configure those controls to support entering custom values for the Product Category field.

カスタム選択肢フィールドの値を入力する UI コントロールを追加および構成するにはTo add and configure UI controls for entering custom Choice field values

  1. ソリューション エクスプローラーで、 Views フォルダー ノードの下にある EditForm.xaml ファイルを選択します。In Solution Explorer, select the EditForm.xaml file under the Views folder node.

  2. SHIFT + F7 を押して (または、ファイルをダブルクリックして)、デザイナーでファイルを開きます。Press SHIFT + F7 (or double-click the file) to open the file in the designer.

  3. Product Orders SharePoint リストから Product Category フィールドをレンダリングするコントロール ( TextBlock コントロールと ListBox コントロール) を含む StackPanel コントロールを見つけます。次のコードに示されているように、 RadioButton コントロールと別の TextBox コントロールを StackPanel コンテナーに追加して構成します。Locate the StackPanel control that contains the controls (a TextBlock control and a ListBox control) for rendering the Product Category field from the Product Orders SharePoint list. Add and configure a RadioButton control and another TextBox control to the StackPanel container, as shown in the following code.


<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>
    <!-- The following two controls added to support UI Customization for Choice field. -->
    <RadioButton x:Name="rbOtherCategory" FontSize="{StaticResource PhoneFontSizeNormal}" HorizontalAlignment="Left" GroupName="Product_x0020_Category" Content="Other:" IsChecked ="True" /><TextBox x:Name="txtOtherCategory" Text="{Binding OtherCategoryValue}" FontSize="{StaticResource PhoneFontSizeNormal}" Width="470" HorizontalAlignment="Left" TextWrapping="Wrap" Visibility="Visible" />
</StackPanel>
  1. ソリューション エクスプローラーで選択されている EditForm.xaml ファイルで、 F7 を押して、関連した分離コード ファイル EditForm.xaml.cs を編集用に開きます。With the EditForm.xaml file selected in Solution Explorer, press F7 to open its associated code-behind file, EditForm.xaml.cs, for editing.

  2. ファイルのコンストラクターを変更し、 Loaded イベントのハンドラー EditForm_Loaded を追加します。変更されたコンストラクターは次のコードのコンストラクターと一致する必要があります。Modify the constructor in the file to add a handler, EditForm_Loaded, for the Loaded event. The modified constructor should match the constructor in the following code.


public EditForm()
{
    InitializeComponent();

    viewModel = App.MainViewModel.SelectedItemEditViewModelInstance;
    if (!viewModel.IsInitialized)
    {
        viewModel.InitializationCompleted += new
                       EventHandler<InitializationCompletedEventArgs>(OnViewModelInitialization);
        viewModel.Initialize();
    }
    else
    {
        this.DataContext = viewModel;
    }

    // Adding handler for Loaded event.
    this.Loaded += new RoutedEventHandler(EditForm_Loaded);
}
  1. EditForm 部分クラスを実装するコード ブロック (左かっこと右かっこで区切られる) 内で、次の EditForm_Loaded イベント ハンドラーの実装をファイルに追加します。Add the following implementation for the EditForm_Loaded event handler to the file, within the code block (demarcated by opening and closing braces) that implements the EditForm partial class.

private void EditForm_Loaded(object sender, RoutedEventArgs e)
{
    // Register EditFieldValueConverter SET function on Choice fields.
    Converter.RegisterEditFieldValueConverter(FieldType.Choice, 
                            (string fieldName, object fieldValue, ListItem item, 
                                               ConversionContext context) =>
    {
        string otherCategoryValue = string.Empty;
        if (this.rbOtherCategory.IsChecked == true)
        {                    
            otherCategoryValue = this.txtOtherCategory.Text.Trim();
            if (string.IsNullOrWhiteSpace(OtherCategoryValue))
            {
                otherCategoryValue = "(Unspecified)";
            }
        }

        ContosoConverter.SetConvertedChoiceEditFieldValue(fieldName, 
                                         fieldValue, item, context, otherCategoryValue);
    });

    // Adding RadioButton event handlers here because the
    // txtOtherCategory TextBox will be loaded and available at this point.
    this.rbOtherCategory.Checked += new RoutedEventHandler(rbOtherCategory_Checked);
    this.rbOtherCategory.Unchecked += new RoutedEventHandler(rbOtherCategory_Unchecked);
}
In this code, the lambda statement used in the call to the **RegisterEditFieldValueConverter** method of the **Converter** class determines whether the **rbOtherCategory** **RadioButton** control (added in Step 3) is checked. If so, the value in the **Text** property of **txtOtherCategory** **TextBox** control is passed to the **SetConvertedChoiceEditFieldValue** function. If **rbOtherCategory** is not checked, an empty string is passed. If **rbOtherCategory** is checked, but nothing is actually specified by the user in the **txtOtherCategory** text box, a value of "(Unspecified)" is passed.
  1. 最後に、 rbOtherCategory RadioButtonChecked および Unchecked イベントのハンドラーを追加し、Product Category のカスタム値を提供するために使用される TextBox コントロールを表示または非表示にします。 EditForm 部分クラスを実装するコード ブロックの範囲内で、これらのハンドラーの次の実装を EditForm.xaml.cs ファイルに含めます。Finally, add handlers for the Checked and Unchecked events of the rbOtherCategory RadioButton to show or hide the TextBox control used to provide custom Product Category values. Include the following implementations for these handlers in the EditForm.xaml.cs file, again within the code block that implements the EditForm partial class.

private void rbOtherCategory_Checked(object sender, RoutedEventArgs e)
{
    this.txtOtherCategory.Visibility = System.Windows.Visibility.Visible;
    this.txtOtherCategory.Focus();
}

private void rbOtherCategory_Unchecked(object sender, RoutedEventArgs e)
{
    this.txtOtherCategory.Visibility = System.Windows.Visibility.Collapsed;
}
  1. ファイルを保存します。Save the file.

プロジェクトをビルドして Windows Phone エミュレーターに展開している場合は ( F5を押して)、Edit フォームで、選択肢フィールドの既定の UI レンダリング ロジックに基づいて、 RadioButton コントロールが Product Category フィールドの定義で指定されている各選択肢の値に追加されることが確認できます。さらに、別の RadioButton コントロール (UI で "その他:" という名前が付いています) が含まれるので、ユーザーがカスタム選択肢の値を指定することができます。追加の RadioButton コントロールがチェックされる場合は、目的の値を入力するための TextBox コントロールが表示されます。If you build the project and deploy it to a Windows Phone Emulator (by pressing F5), you can see that in the Edit form, a RadioButton control is added for each choice value designated in the Product Category field definition, based on the default UI rendering logic for Choice fields. In addition, another RadioButton control (labeled as "Other:" in the UI) is included for users to be able to specify custom choice values. If the additional RadioButton control is checked, a TextBox control is displayed for entering the intended value.

カスタム Product Category の値に既に関連付けられていて、アプリケーションで編集された Product Orders リストでは、既にチェックされている RadioButton 追加コントロールおよびカスタム値を表示している TextBox コントロールによって、Edit フォームがレンダリングされます。For items in the Product Orders list that are already associated with a custom Product Category value and then edited in the app, the Edit form is rendered with the additional RadioButton control already checked and the TextBox control displaying the custom value already visible.

関連項目See also