Windows Phone 7用のアプリケーションを最初から最後まで作成します。 パート9.データマッピング

前の部分



これで、アプリケーションの完全なページが作成されました。 今、あなたはおそらくそれらにさまざまなデータを投入したいでしょう。



このパートでは、次のことを学習します。

• データをユーザーインターフェイスにバインドする方法。
• Visual Studioを使用してデータバインディングを作成する方法。
• リストにデータを表示する方法。
• より複雑なバインドシナリオの使用方法。

ユーザーインターフェイスへのデータのバインド

Fuel Trackerアプリには3つのデータページがあります。 データは主に3つのクラスに保存されます。 次の画像は、ページとその関連クラスを示しています。







データを表示するには、通常、データバインディングが使用されます。 データバインディングは、ユーザーインターフェイスをデータソースに接続する機能を提供します。 バインディングが作成され、データソースが変更されると、データソースに関連付けられているユーザーインターフェイス要素に変更が自動的に表示されます。 同様に、ユーザーがユーザーインターフェイス要素に加えた変更は、データソースに反映されます。 たとえば、ユーザーがTextBoxの値を変更すると、対応するデータソースが自動的に更新され、これらの変更が反映されます。



次のXAMLコードフラグメントは、TextBoxコントロールのTextプロパティをソースオブジェクトのNameプロパティにバインドするために使用される構文を示しています。

< TextBox x:Name ="NameTextBox" Text ="{Binding Name, Mode=TwoWay}" /> * This source code was highlighted with Source Code Highlighter .

1. < TextBox x:Name ="NameTextBox" Text ="{Binding Name, Mode=TwoWay}" /> * This source code was highlighted with Source Code Highlighter .
   
   
   
   

< TextBox x:Name ="NameTextBox" Text ="{Binding Name, Mode=TwoWay}" /> * This source code was highlighted with Source Code Highlighter .

次の図は、このようなバインディングの例を示しています。







各バインディングには、データが更新される方法とタイミングを決定するModeプロパティがあります。 OneWay（一方向）バインディングは、ソースが変更された場合にユーザーインターフェイスのターゲット要素が更新されることを意味します。 TwoWay（双方向）バインディングとは、ターゲットとソースのいずれかが変更された場合、ターゲットとソースの両方が更新されることを意味します。 OneWayまたはTwoWayバインディングを使用する場合、バインディングにソースオブジェクトの変更が通知されるようにするには、INotifyPropertyChangedインターフェイスを実装する必要があります。 このインターフェイスについては、次のセクション「データクラスの作成」で詳しく説明します。



DataContextプロパティ（データコンテキスト）を設定して、ソースオブジェクトを指定します。 ListBoxコントロールを使用している場合、ItemsSourceプロパティを設定してソースオブジェクトを指定する必要があります。 次の例は、CarHeaderパネルのDataContextプロパティを、静的プロパティから取得したソースオブジェクトに設定する方法を示しています。

1. CarHeader.DataContext = CarDataStore.Car;

*このソースコードは、 ソースコードハイライターで強調表示されました。

DataContextプロパティを使用すると、すべての子要素を含むユーザーインターフェイス要素全体に標準バインディングを設定できます。 場合によっては、ページ全体に対してDataContextプロパティを設定する方が便利な場合があります。また、場合によっては、ページ上の各要素に対して個別に設定する方が便利な場合があります。 XAMLの各レベルでDataContextを設定すると、上位レベルの設定がオーバーライドされます。 さらに、個々のバインディングのSourceプロパティを設定することにより、個々のバインディングのDataContext設定を実際にオーバーライドできます。



たとえば、Fuel Trackerアプリケーションでは、各ページでDataContextを異なる値に設定します。 ただし、 FillupPageページでは、車の名前とその写真を表示するパネルのページレベルのDataContextがオーバーライドされます。 次の画像は、Fuel Trackerアプリケーションのデータコンテキスト設定を示しています。

データバインディングビルダーの使用

Visual Studioには、XAMLでデータバインディングを作成するのに役立つデータバインディングビルダーが含まれています。 データバインディングビルダーはパフォーマンスを改善できますが、考えられるすべてのシナリオをサポートしているわけではありません。 たとえば、インデックス付き要素へのバインドをサポートせず、コードで作成されたバインドを認識しません。 したがって、場合によっては、データバインディングを手動で指定する必要があります。



データバインディングビルダーを使用するには ：

1. バインディングを作成するコントロールを選択します。
2. [プロパティ]ウィンドウで、バインドするプロパティを見つけます。
3. 左列の端にあるプロパティマーカーアイコンをクリックし、[ データバインディングの適用 ]ボタンをクリックします。
   
   データバインディングビルダーが開きます。
4. データバインディングビルダーのさまざまなパネルをクリックして、さまざまなオプションを表示します。
   
   次の画像は、次のパラメーターを使用したデータバインディングビルダーを示しています。
   • データコンテキスト： Fillupオブジェクト
   • バインディングパス： OdometerReadingプロパティ
   • コンバーター： ZeroFormatter
   • モード：TwoWay
   
   
   

次のXAMLスニペットは、データバインディングビルダーによって生成されたコードを示しています。

1. < TextBox
2. グリッド 行 = "0" グリッド 。 列 = "1"
3. x：名前 = "OdometerTextBox"
4. テキスト =「{OdometerReadingのバインド、モード= TwoWay、コンバーター= {StaticResource ZeroFormatter}}」
5. InputScope = "TelephoneNumber"
6. MaxLength = "8" />

*このソースコードは、 ソースコードハイライターで強調表示されました。

注：

コードでDataContextプロパティを設定すると、データバインディングビルダーはデータソースで使用可能なプロパティを認識できず、バインディングパスの選択を支援できません。 ただし、設計時にデータコンテキストを設定することにより、この問題を解決できます。 開発中のデータコンテキストの設定に関する詳細については、「 チュートリアル：DesignInstanceを使用してSilverlightデザイナーでデータにバインドする」を参照してください 。

リストデータ

アイテムのコレクションをリストに表示することは、電話の主要なタスクの1つです。 データバインディングを使用して要素のコレクションをリストに表示するには、次のことを行う必要があります。

1. ListBoxをアプリケーションに追加します。
2. コレクションをItemsSourceプロパティにバインドして、ListBoxのデータソースを指定します。
3. ListBoxの各アイテムの外観をカスタマイズするには、ListBoxのデータテンプレートを追加します。
4. データテンプレートで、ListBoxアイテムをアイテムコレクションのプロパティにバインドします。

次の画像は、Fuel Trackerの概要ページのリストボックスのバインディングを示しています。







次のXAMLコードは、ListBoxのバインディングがどのように指定されたかを示しています。

1. < ListBox ItemContainerStyle = "{StaticResource ListBoxStyle}"
2. ItemsSource = "{Binding FillupHistory}"
3. 高さ = "380" Horizo​​ntalAlignment = "左" マージン = "5.25,0.0"
4. VerticalAlignment = "Top" 幅 = "444" >
5. < ListBox.ItemTemplate >
6. < DataTemplate >
7. < StackPanel Orientation = "Horizo​​ntal" >
8. < TextBlock Style = "{StaticResource SummaryStyle}"
9. テキスト =「{バインディング日付、コンバーター= {StaticResource StringFormatter}、ConverterParameter = \ {0：d \}}」
10. 幅 = "105" TextWrapping = "ラップ" />
11. < TextBlock Style = "{StaticResource SummaryStyle}"
12. テキスト = "{Binding FuelQuantity}" TextWrapping = "Wrap" />
13. < TextBlock Style = "{StaticResource SummaryStyle}"
14. Text = "{Binding DistanceDriven}" TextWrapping = "Wrap" />
15. < TextBlock Style = "{StaticResource SummaryStyle}"
16. テキスト =「{Binding PricePerFuelUnit、 Converter = {StaticResource StringFormatter}、ConverterParameter = \ {0：c \}、ConverterCulture = en-US}」 />
17. < TextBlock Style = "{StaticResource SummaryStyle}"
18. テキスト = "{Binding FuelEfficiency、 Converter = {StaticResource StringFormatter}、ConverterParameter = \ {0：F \}}" TextWrapping = "Wrap" />
19. </ stackpanel >
20. </ DataTemplate >
21. </ ListBox.ItemTemplate >
22. </ リストボックス >

*このソースコードは、 ソースコードハイライターで強調表示されました。

前のXAMLコードでは、ListBox.ItemsSourceプロパティはCar.FillupHistoryプロパティにバインドされているため、ストーリーコレクションの各FillupオブジェクトはListBoxの個別のアイテムとして表示されます。 DataTemplate要素は各アイテムの外観を定義し、いくつかのTextBlock要素を含みます。各TextBlock要素は、 Fillupクラスのプロパティに関連付けられています。



SummaryPage.xaml.csの次のコードに示すように、このXAMLはCarオブジェクトが最初にページに関連付けられている場合にのみ機能します。

1. this .DataContext = CarDataStore.Car;

*このソースコードは、 ソースコードハイライターで強調表示されました。

パフォーマンス改善のヒント：

ListBoxでのスクロールがスムーズで応答性に欠ける場合は、次のヒントを使用してください。

• リストボックス内のアイテムを簡素化します。
• バックグラウンドで画像をダウンロードします。
• データ仮想化を使用します。
• DeferredLoadListBoxまたはLazyListBoxの使用に注意してください。
• ネストされたリストを使用しないでください。

複雑なスナップパス

任意のレベルでDataContextプロパティを設定する柔軟性（より高いレベルで設定をオーバーライドできる）に加えて、 Car.FillupHistoryなどのリンクプロパティに「ドリル」するために複雑なバインディングパスを指定することもできます。 たとえば、SummaryPage.xamlからの次のXAMLコードは、給油履歴コレクションの最初のアイテムのFillup.FuelEfficiencyプロパティへのバインドを示しています。

1. < TextBlock Text = "{Binding FillupHistory [0] .FuelEfficiency、 Converter = {StaticResource StringFormatter}、ConverterParameter = \ {0：F \}}" />

*このソースコードは、 ソースコードハイライターで強調表示されました。

次の画像は、SummaryPage.xamlのバインディングを示し、すべてが同じDataContextを参照している場合でも、複雑なバインディングとデータテンプレートを使用して、コントロールをさまざまなオブジェクトのさまざまなプロパティにバインドする方法を示します。







左側のピボット画面の緑色の長方形は、複雑なパスを使用して固定されたコントロールを示しています。 これらのパスは、 Car.FillupHistoryコレクションの最初の要素（インデックス0）で始まり 、 Fillupクラスのさまざまなプロパティで終わります。 たとえば、現在のMPGフィールドは、バインディングパスFillupHistory [0] .FuelEfficiencyを使用します。 このパスにページのDataContext設定を含めると、バインディングパス全体は次のようになります： CarDataStore.Car.FillupHistory [0] .FuelEfficiency 。



次の部分