16 章の概要です。Summary of Chapter 16. データ バインディングData binding

サンプルのダウンロードサンプルをダウンロードします。Download Sample Download the sample

注意

このページに関する注意事項は、この本で説明されている内容が Xamarin.Forms が異なっている領域を示しています。Notes on this page indicate areas where Xamarin.Forms has diverged from the material presented in the book.

多くの場合、プログラマは、1 つのオブジェクトのプロパティが変更されたときを検出するイベント ハンドラーの記述の湧くや、別のオブジェクトのプロパティの値を変更するに使用します。Programmers often find themselves writing event handlers that detect when a property of one object has changed, and use that to change the value of a property in another object. この処理を自動化するための手法でデータ バインディングします。This process can be automated with the technique of data binding. データ バインディングは、通常、XAML で定義されておよびユーザー インターフェイスの定義の一部になります。Data bindings are usually defined in XAML and become part of the definition of the user interface.

非常に多くの場合、これらのデータ バインディングは、ユーザー インターフェイス オブジェクトを基になるデータに接続します。Very often, these data bindings connect user-interface objects to underlying data. これでさらに調査されている手法第 18 章です。MVVMします。This is a technique that is explored more in Chapter 18. MVVM. ただし、データ バインドは 2 つ以上のユーザー インターフェイス要素にも接続できます。However, data bindings can also connect two or more user-interface elements. この章では、データ バインディングの初期の例のほとんどは、この方法を示しています。Most of the early examples of data binding in this chapter demonstrate this technique.

バインディングの基礎Binding basics

データ バインディングでは、いくつかのプロパティ、メソッド、およびクラスが関係します。Several properties, methods, and classes are involved in data binding:

次の 2 つのクラスは、バインドの XAML マークアップ拡張機能をサポートします。The following two classes support XAML markup extensions for bindings:

データ バインディングにおける 2 つのインターフェイスが含まれます。Two interfaces are involved in data binding:

  • INotifyPropertyChanged System.ComponentModel名前空間がプロパティが変更されたときに通知を実装するためにはINotifyPropertyChanged in the System.ComponentModel namespace is for implementing notification when a property changes
  • IValueConverter 1 つの型から別のデータ バインドの値を変換する小さなクラスを定義するために使用します。IValueConverter is used to define small classes that convert values from one type to another in data bindings

データ バインディングは、同一のオブジェクト、または 2 つの異なるオブジェクト (一般) の 2 つのプロパティを接続します。A data binding connects two properties of the same object, or (more commonly) two different objects. これら 2 つのプロパティとして参照されます、ソースターゲットします。These two properties are referred to as the source and the target. 通常、ソース プロパティの変更により、ターゲット プロパティに存在する変更が、方向を反転することがあります。Generally, a change in the source property causes a change to occur in the target property, but sometimes the direction is reversed. 関係なく。Regardless:

実装するクラスINotifyPropertyChanged発生、 PropertyChanged イベント プロパティの値が変更されたとき。A class that implements INotifyPropertyChanged fires a PropertyChanged event when a property changes value. BindableObject 実装INotifyPropertyChanged自動的に発生して、PropertyChangedイベントによってプロパティがバックアップされている場合、BindableProperty値を変更するが、実装する、独自のクラスを記述できますINotifyPropertyChangedから派生することがなくBindableObjectします。BindableObject implements INotifyPropertyChanged and automatically fires a PropertyChanged event when a property backed by a BindableProperty changes values, but you can write your own classes that implement INotifyPropertyChanged without deriving from BindableObject.

コードと XAMLCode and XAML

OpacityBindingCode サンプル コードでデータ バインディングを設定する方法を示します。The OpacityBindingCode sample demonstrates how to set a data binding in code:

  • ソースが、Valueのプロパティを SliderThe source is the Value property of a Slider
  • ターゲットが、Opacityのプロパティを LabelThe target is the Opacity property of a Label

設定して 2 つのオブジェクトが接続されている、BindingContextLabelオブジェクトをSliderオブジェクト。The two objects are connected by setting the BindingContext of the Label object to the Slider object. 2 つのプロパティが呼び出すことによって接続されている、 SetBinding 拡張メソッドをLabelを参照する、OpacityPropertyバインド可能なプロパティとValueのプロパティ、Sliderで表した、文字列。The two properties are connected by calling a SetBinding extension method on the Label referencing the OpacityProperty bindable property and the Value property of the Slider expressed as a string.

操作、Sliderなります、Labelフェードインおよびフェードアウトします。Manipulating the Slider then causes the Label to fade in and out of view.

OpacityBindingXaml は XAML で設定するデータ バインドで同じプログラムです。The OpacityBindingXaml is the same program with the data binding set in XAML. BindingContextLabelに設定されている、x:Referenceマークアップ拡張機能を参照する、 Slider、およびOpacityのプロパティ、Labelに設定されている、Bindingマークアップ拡張機能をその Pathプロパティを参照する、Valueのプロパティ、Sliderします。The BindingContext of the Label is set to an x:Reference markup extension referencing the Slider, and the Opacity property of the Label is set to the Binding markup extension with its Path property referencing the Value property of the Slider.

ソースと BindingContextSource and BindingContext

BindingSourceCode サンプル コードでその他の方法を示しています。The BindingSourceCode sample shows an alternative approach in code. ABinding設定してオブジェクトが作成される、 Source プロパティをSliderオブジェクトと Path プロパティを「値」にします。A Binding object is created by setting the Source property to the Slider object and the Path property to "Value". SetBinding メソッドのBindableObjectがで呼び出され、Labelオブジェクト。The SetBinding method of BindableObject is then called on the Label object.

Bindingコンス トラクターを定義することが使用されても、Bindingオブジェクト。The Binding constructor could also have been used to define the Binding object.

BindingSourceXaml サンプル XAML で同等の方法を示しています。The BindingSourceXaml sample shows the comparable technique in XAML. Opacityのプロパティ、Labelに設定されている、Bindingマークアップ拡張機能を Path に設定、Valueプロパティと Source に設定、埋め込みx:Referenceマークアップ拡張機能。The Opacity property of the Label is set to a Binding markup extension with Path set to the Value property and Source set to an embedded x:Reference markup extension.

要約するは、バインディング ソース オブジェクトを参照する 2 つの方法があります。In summary, there are two ways to reference the binding source object:

  • を通じて、BindingContextターゲットのプロパティThrough the BindingContext property of the target
  • を通じて、Sourceのプロパティ、Bindingオブジェクト自体Through the Source property of the Binding object itself

両方が指定されている場合は、2 つ目が優先されます。If both are specified, the second takes precedence. 利点、BindingContextビジュアル ツリーを通じて伝達されるです。The advantage of the BindingContext is that it is propagated through the visual tree. これは非常に複数のターゲット プロパティが同じソース オブジェクトにバインドされている場合に便利です。This is very handy if multiple target properties are bound to the same source object.

WebViewDemo プログラムでは、この方法を示して、 WebView 要素。The WebViewDemo program demonstrates this technique with the WebView element. 2 つButton継承前後を移動するための要素をBindingContextを参照する親のWebViewします。Two Button elements for navigating backwards and forwards inherit a BindingContext from their parent that references the WebView. IsEnabledの 2 つのボタンのプロパティは、単純ながBindingマークアップ拡張機能をボタンを対象とするIsEnabledの設定に基づいて、プロパティ、 CanGoBack CanGoForwardの読み取り専用プロパティ、WebViewします。The IsEnabled properties of the two buttons then have simple Binding markup extensions that target the button IsEnabled properties based on the settings of the CanGoBack and CanGoForward read-only properties of the WebView.

バインド モードThe binding mode

設定、 Mode プロパティのBindingのメンバーに、 BindingMode 列挙体。Set the Mode property of Binding to a member of the BindingMode enumeration:

  • OneWay ソース プロパティの変更がターゲットに影響するためOneWay so that changes in the source property affect the target
  • OneWayToSource ターゲット プロパティの変更がソースに影響するためOneWayToSource so that changes in the target property affect the source
  • TwoWay ソースとターゲットの変更が互いに影響するためTwoWay so that changes in the source and target affect each other
  • Default 使用する、 DefaultBindingMode ときに指定されたターゲットBindablePropertyが作成されました。Default to use the DefaultBindingMode specified when the target BindableProperty was created. 指定されていない場合、既定値はOneWayの通常のバインド可能なプロパティとOneWayToSourceのバインド可能なプロパティが読み取り専用です。If none was specified, the default is OneWay for normal bindable properties, and OneWayToSource for read-only bindable properties.

注意

BindingMode列挙を今すぐも含まれています。OnTimeときではなく、バインディング コンテキストが変更された場合にのみ、バインドを適用するため、ソース プロパティを変更します。The BindingMode enumeration now also includes OnTime for applying a binding only when the binding context changes and not when the source property changes.

一般に MVVM シナリオでのデータ バインドの対象とする可能性があるプロパティをDefaultBindingModeTwoWayします。Properties that are likely to be the targets of data bindings in MVVM scenarios generally have a DefaultBindingMode of TwoWay. これらの数値は、次のとおりです。These are:

  • Value プロパティのSliderStepperValue property of Slider and Stepper
  • IsToggled プロパティ SwitchIsToggled property of Switch
  • Text プロパティのEntryEditorSearchBarText property of Entry, Editor, and SearchBar
  • Date プロパティ DatePickerDate property of DatePicker
  • Time プロパティ TimePickerTime property of TimePicker

BindingModes サンプルでは、対象のデータ バインディングを次の 4 つのバインド モード、FontSizeのプロパティをLabelソースであり、 ValueプロパティをSliderします。The BindingModes sample demonstrates the four binding modes with a data binding where the target is the FontSize property of a Label and the source is the Value property of a Slider. これにより、各Sliderの対応するフォント サイズを制御するLabelします。This allows each Slider to control the font size of the corresponding Label. Sliderために、要素が初期化されていない、DefaultBindingModeFontSizeプロパティはOneWayします。But the Slider elements are not initialized because the DefaultBindingMode of the FontSize property is OneWay.

ReverseBinding サンプルでバインディングの設定、Valueのプロパティ、Sliderを参照する、FontSizeの各プロパティLabelします。The ReverseBinding sample sets the bindings on the Value property of the Slider referencing the FontSize property of each Label. 初期化でより適切にうまく機能する旧バージョンと、これが表示されます、Slider要素のため、Valueのプロパティ、Sliderが、DefaultBindingModeTwoWayします。This appears to be backwards, but it works better in initialzing the Slider elements because the Value property of the Slider has a DefaultBindingMode of TwoWay.

バインドを逆の 3 倍になるスクリーン ショットTriple screenshot of Reverse Binding

これが MVVM では、バインドを定義する方法に似ており、この種類のバインドを頻繁に使用します。This is analogous to how bindings are defined in MVVM, and you'll use this type of binding frequently.

文字列の書式設定String formatting

型のターゲット プロパティがstring、使用することができます、 StringFormat プロパティによって定義されたBindingBaseをソースに変換する、stringします。When the target property is of type string, you can use the StringFormat property defined by BindingBase to convert the source to a string. 設定、StringFormatプロパティは、静的で使用する文字列の書式設定、.NET を String.Format 形式オブジェクトを表示します。Set the StringFormat property to a .NET formatting string that you would use with the static String.Format format to display the object. マークアップ拡張機能内でこの書式指定文字列を使用する場合は、埋め込みのマークアップ拡張機能の中かっこと混同しないように単一引用符で囲みます。When using this formatting string within a markup extension, surround it with single quotation marks so the curly braces won't be mistaken for an embedded markup extension.

ShowViewValues サンプルを使用する方法を示しますStringFormatXAML でします。The ShowViewValues sample demonstrates how to use StringFormat in XAML.

WhatSizeBindings へのバインドと、ページのサイズを表示するサンプルに示します、WidthHeightのプロパティ、ContentPageします。The WhatSizeBindings sample demonstrates displaying the size of the page with bindings to the Width and Height properties of the ContentPage.

"Path"を理由と呼ばれるでしょうか。Why is it called "Path"?

Path プロパティのBinding一連のプロパティとピリオドで区切られたインデクサーがあるためにと呼ばれるようにします。The Path property of Binding is so called because it can be a series of properties and indexers separated by periods. BindingPathDemos サンプルがいくつかの例を示しています。The BindingPathDemos sample shows several examples.

値コンバーターのバインディングBinding value converters

バインディングのソースとターゲットのプロパティは、さまざまな種類が、バインディング コンバーターを使用して型の間で変換できます。When the source and target properties of a binding are different types, you can convert between the types using a binding converter. これは、実装するクラス、 IValueConverter インターフェイスし、2 つのメソッドが含まれています: Convert ソースをターゲットに変換して ConvertBack ターゲットをソースに変換します。This is a class that implements the IValueConverter interface and contains two methods: Convert to convert the source to the target, and ConvertBack to convert the target to the source.

IntToBoolConverter クラス、 Xamarin.FormsBook.Toolkit ライブラリは、変換の例をintboolします。The IntToBoolConverter class in the Xamarin.FormsBook.Toolkit library is an example for converting an int to a bool. 示されていることが、 ButtonEnabler サンプルについては、できるだけ、Buttonに少なくとも 1 つの文字が入力した場合、Entryします。It is demonstrated by the ButtonEnabler sample, which only enables the Button if at least one character has been typed into an Entry.

BoolToStringConverter クラスに変換します、boolstringにどのようなテキストを返す必要があるかを指定する 2 つのプロパティを定義およびfalsetrue値。The BoolToStringConverter class converts a bool to a string and defines two properties to specify what text should be returned for false and true values. BoolToColorConverter は似ています。The BoolToColorConverter is similar. SwitchText サンプルに基づいてさまざまな色に異なるテキストを表示するこれら 2 つのコンバーターの使用例、Switch設定します。The SwitchText sample demonstrates using these two converters to display different texts in different colors based on a Switch setting.

ジェネリック BoolToObjectConverter 置き換えることができます、BoolToStringConverterBoolToColorConverter、一般化されたとして機能し、 bool-に-任意の型のオブジェクトのコンバーター。The generic BoolToObjectConverter can replace the BoolToStringConverter and BoolToColorConverter and serve as a generalized bool-to-object converter of any type.

バインディングとカスタム ビューBindings and custom views

データ バインドを使用してカスタム コントロールを簡素化することができます。You can simplify custom controls using data bindings. NewCheckBox.cs コード ファイルを定義しますTextTextColorFontSizeFontAttributes、およびIsCheckedプロパティ、コントロールのビジュアルのすべてのロジックはありません。The NewCheckBox.cs code file defines Text, TextColor, FontSize, FontAttributes, and IsChecked properties, but has no logic at all for the visuals of the control. 代わりに、 NewCheckBox.cs.xaml ファイルがデータ バインドを使用で、コントロールのビジュアルのすべてのマークアップを含む、Label分離コード ファイルで定義されたプロパティに基づいて要素。Instead the NewCheckBox.cs.xaml file contains all the markup for the control's visuals through data bindings on the Label elements based on the properties defined in the code-behind file.

NewCheckBoxDemo サンプルでは、NewCheckBoxカスタム コントロール。The NewCheckBoxDemo sample demonstrates the NewCheckBox custom control.