データ バインディングの詳細Data binding in depth

重要な APIImportant APIs

注意

このトピックでは、データ バインディングの機能について詳しく説明します。This topic describes data binding features in detail. 簡潔で実用的な紹介については、「データ バインディングの概要」をご覧ください。For a short, practical introduction, see Data binding overview.

このトピックでは、ユニバーサル Windows プラットフォーム (UWP) アプリケーションでのデータ バインディングについて。This topic is about data binding in Universal Windows Platform (UWP) applications. ここで説明した Api に存在、 Windows.UI.Xaml.Data名前空間します。The APIs discussed here reside in the Windows.UI.Xaml.Data namespace.

データ バインディングは、アプリの UI でデータを表示し、必要に応じてそのデータとの同期を保つ方法です。Data binding is a way for your app's UI to display data, and optionally to stay in sync with that data. データ バインディングによって、UI の問題からデータの問題を切り離すことができるため、概念的なモデルが簡素化されると共に、アプリの読みやすさ、テストの容易性、保守容易性が向上します。Data binding allows you to separate the concern of data from the concern of UI, and that results in a simpler conceptual model as well as better readability, testability, and maintainability of your app.

データ バインディングは、UI が最初に表示されたときにデータ ソースからの値を表示するだけの場合に使うことができ、それらの値の変化に応答するために使うことはできません。You can use data binding to simply display values from a data source when the UI is first shown, but not to respond to changes in those values. これは、モードというバインドの1 回限り、し、実行時に変更されない値に対して適切に機能します。This is a mode of binding called one-time, and it works well for a value that doesn't change during run-time. または、値を「確認」を変更するときに UI を更新するを選択できます。Alternatively, you can choose to "observe" the values and to update the UI when they change. このモードと呼ばれる一方向、および読み取り専用データに対して適切に機能します。This mode is called one-way, and it works well for read-only data. 最終的には、ユーザーが UI で値に対して行った変更が自動的にデータ ソースにプッシュバックされるように、監視と更新の両方を行うことを選択できます。Ultimately, you can choose to both observe and update, so that changes that the user makes to values in the UI are automatically pushed back into the data source. このモードと呼ばれる双方向、および読み取り/書き込みデータに対して適切に機能します。This mode is called two-way, and it works well for read-write data. 例をいくつか紹介します。Here are some examples.

  • 1 回限りのモードを使用してバインドすることが、 イメージ現在のユーザーの写真にします。You could use the one-time mode to bind an Image to the current user's photo.
  • 一方向のモードを使用してバインドすることが、 ListView 新聞のセクションでグループ化されたリアルタイムのニュース記事のコレクションにします。You could use the one-way mode to bind a ListView to a collection of real-time news articles grouped by newspaper section.
  • 双方向のモードを使用してバインドすることが、 TextBox フォームで顧客の名前にします。You could use the two-way mode to bind a TextBox to a customer's name in a form.

モードに依存しない、バインディングの 2 種類がありますし、どちらも通常宣言される UI のマークアップでします。Independent of mode, there are two kinds of binding, and they're both typically declared in UI markup. {x:Bind} マークアップ拡張{Binding} マークアップ拡張のいずれを使うかを選択できます。You can choose to use either the {x:Bind} markup extension or the {Binding} markup extension. また、同じアプリや同じ UI 要素で、この 2 つを組み合わせて使うこともできます。And you can even use a mixture of the two in the same app—even on the same UI element. {x:Bind} は Windows 10 の新機能で、パフォーマンスが向上しています。{x:Bind} is new for Windows 10 and it has better performance. このトピックで説明されているすべての詳細は、特に明記していない限り、両方の種類のバインディングに適用されます。All the details described in this topic apply to both kinds of binding unless we explicitly say otherwise.

{X:bind} を示すサンプル アプリSample apps that demonstrate {x:Bind}

{バインディング} を示すサンプル アプリSample apps that demonstrate {Binding}

すべてのバインディングに関連する要素Every binding involves these pieces

  • バインディング ソースA binding source. これは、バインディング用のデータのソースで、UI に表示する値を持つメンバーが含まれる、任意のクラスのインスタンスを使うことができます。This is the source of the data for the binding, and it can be an instance of any class that has members whose values you want to display in your UI.
  • バインディング ターゲットA binding target. これは、データを表示する UI の FrameworkElementDependencyProperty です。This is a DependencyProperty of the FrameworkElement in your UI that displays the data.
  • バインディング オブジェクトA binding object. これは、ソースからターゲットに、および必要に応じてターゲットからソースに、データ値を転送する要素です。This is the piece that transfers data values from the source to the target, and optionally from the target back to the source. バインディング オブジェクトは、XAML の読み込み時に {x:Bind} または {Binding} マークアップ拡張から作成されます。The binding object is created at XAML load time from your {x:Bind} or {Binding} markup extension.

次のセクションでは、バインディング ソース、バインディング ターゲット、バインド オブジェクトについて詳しく見てみます。In the following sections, we'll take a closer look at the binding source, the binding target, and the binding object. また、以下のセクションでは、HostViewModel という名前のクラスに属する NextButtonText という名前の文字列プロパティに、ボタンのコンテンツをバインドする例へのリンクも示します。And we'll link the sections together with the example of binding a button's content to a string property named NextButtonText, which belongs to a class named HostViewModel.

バインディング ソースBinding source

バインディング ソースとして使用できるクラスの非常に基本的な実装を次に示します。Here's a very rudimentary implementation of a class that we could use as a binding source.

使用している場合C +/cli WinRT、新規に追加し、 Midl ファイル (.idl) という名前の c++ で示すように、プロジェクトに項目/cli WinRT コードの例の一覧が下です。If you're using C++/WinRT, then add new Midl File (.idl) items to the project, named as shown in the C++/WinRT code example listing below. それらの新しいファイルの内容を置き換えます、 MIDL 3.0の一覧で示すようにコードを生成するプロジェクトをビルドHostViewModel.h.cpp、し、一覧に一致するように、生成されたファイルにコードを追加します。Replace the contents of those new files with the MIDL 3.0 code shown in the listing, build the project to generate HostViewModel.h and .cpp, and then add code to the generated files to match the listing. 生成されたファイルに関する詳細情報と、プロジェクトにコピーする方法は、次を参照してください。 XAML 制御; バインド c++/cli WinRT プロパティFor more info about those generated files and how to copy them into your project, see XAML controls; bind to a C++/WinRT property.

public class HostViewModel
{
    public HostViewModel()
    {
        this.NextButtonText = "Next";
    }

    public string NextButtonText { get; set; }
}
// HostViewModel.idl
namespace DataBindingInDepth
{
    runtimeclass HostViewModel
    {
        HostViewModel();
        String NextButtonText;
    }
}

// HostViewModel.h
// Implement the constructor like this, and add this field:
...
HostViewModel() : m_nextButtonText{ L"Next" } {}
...
private:
    std::wstring m_nextButtonText;
...

// HostViewModel.cpp
// Implement like this:
...
hstring HostViewModel::NextButtonText()
{
    return hstring{ m_nextButtonText };
}

void HostViewModel::NextButtonText(hstring const& value)
{
    m_nextButtonText = value;
}
...

HostViewModel の実装とその NextButtonText プロパティは、1 回限りのバインディングにのみ適しています。That implementation of HostViewModel, and its property NextButtonText, are only appropriate for one-time binding. ただし、一方向バインディングと双方向バインディングは非常に一般的であり、これらの種類のバインディングでは、UI はバインディング ソースのデータ値の変化に対応して自動的に更新されます。But one-way and two-way bindings are extremely common, and in those kinds of binding the UI automatically updates in response to changes in the data values of the binding source. これらの種類のバインディングが正常に動作するには、バインディング ソースをバインディング オブジェクトから "監視可能" にする必要があります。In order for those kinds of binding to work correctly, you need to make your binding source "observable" to the binding object. この例では、NextButtonText プロパティに対して一方向または双方向バインディングを設定する場合、実行時にこのプロパティの値に対して発生するすべての変更を、バインディング オブジェクトから監視可能にする必要があります。So in our example, if we want to one-way or two-way bind to the NextButtonText property, then any changes that happen at run-time to the value of that property need to be made observable to the binding object.

そのための方法の 1 つは、DependencyObject からバインディング ソースを表すクラスを派生させ、DependencyProperty を通じてデータ値を公開することです。One way of doing that is to derive the class that represents your binding source from DependencyObject, and expose a data value through a DependencyProperty. これが、FrameworkElement を監視可能にする方法です。That's how a FrameworkElement becomes observable. FrameworkElements は、そのまま利用できる優れたバインディング ソースです。FrameworkElements are good binding sources right out of the box.

より簡単にクラスを監視可能にする方法 (および既に基底クラスがあるクラスで必要な方法) は、System.ComponentModel.INotifyPropertyChanged を実装することです。A more lightweight way of making a class observable—and a necessary one for classes that already have a base class—is to implement System.ComponentModel.INotifyPropertyChanged. この方法は、PropertyChanged という名前の単一のイベントを実装するだけです。This really just involves implementing a single event named PropertyChanged. HostViewModel を使った例を次に示します。An example using HostViewModel is below.

...
using System.ComponentModel;
using System.Runtime.CompilerServices;
...
public class HostViewModel : INotifyPropertyChanged
{
    private string nextButtonText;

    public event PropertyChangedEventHandler PropertyChanged = delegate { };

    public HostViewModel()
    {
        this.NextButtonText = "Next";
    }

    public string NextButtonText
    {
        get { return this.nextButtonText; }
        set
        {
            this.nextButtonText = value;
            this.OnPropertyChanged();
        }
    }

    public void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        // Raise the PropertyChanged event, passing the name of the property whose value has changed.
        this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
}
// HostViewModel.idl
namespace DataBindingInDepth
{
    runtimeclass HostViewModel : Windows.UI.Xaml.Data.INotifyPropertyChanged
    {
        HostViewModel();
        String NextButtonText;
    }
}

// HostViewModel.h
// Add this field:
...
    winrt::event_token PropertyChanged(Windows::UI::Xaml::Data::PropertyChangedEventHandler const& handler);
    void PropertyChanged(winrt::event_token const& token) noexcept;

private:
    winrt::event<Windows::UI::Xaml::Data::PropertyChangedEventHandler> m_propertyChanged;
...

// HostViewModel.cpp
// Implement like this:
...
void HostViewModel::NextButtonText(hstring const& value)
{
    if (m_nextButtonText != value)
    {
        m_nextButtonText = value;
        m_propertyChanged(*this, Windows::UI::Xaml::Data::PropertyChangedEventArgs{ L"NextButtonText" });
    }
}

winrt::event_token HostViewModel::PropertyChanged(Windows::UI::Xaml::Data::PropertyChangedEventHandler const& handler)
{
    return m_propertyChanged.add(handler);
}

void HostViewModel::PropertyChanged(winrt::event_token const& token) noexcept
{
    m_propertyChanged.remove(token);
}
...

これで、NextButtonText プロパティは監視可能です。Now the NextButtonText property is observable. そのプロパティへの一方向または双方向のバインディングを作成する場合 (方法については後述)、作成したバインディング オブジェクトは PropertyChanged イベントを受信登録します。When you author a one-way or a two-way binding to that property (we'll show how later), the resulting binding object subscribes to the PropertyChanged event. そのイベントが発生すると、バインディング オブジェクトのハンドラーは、変更されたプロパティの名前を含む引数を受け取ります。When that event is raised, the binding object's handler receives an argument containing the name of the property that has changed. このようにして、バインディング オブジェクトはどのプロパティの値が残っており、再び読み取る必要があるかを識別します。That's how the binding object knows which property's value to go and read again.

使用している場合は、複数回、上記のパターンを実装する必要があるないようにC#だけから派生することができ、 BindableBaseで低音のクラス、 QuizGame (サンプル"Common"フォルダー)。So that you don't have to implement the pattern shown above multiple times, if you're using C# then you can just derive from the BindableBase bass class that you'll find in the QuizGame sample (in the "Common" folder). どのようになるかを示す例を以下に示します。Here's an example of how that looks.

public class HostViewModel : BindableBase
{
    private string nextButtonText;

    public HostViewModel()
    {
        this.NextButtonText = "Next";
    }

    public string NextButtonText
    {
        get { return this.nextButtonText; }
        set { this.SetProperty(ref this.nextButtonText, value); }
    }
}
// Your BindableBase base class should itself derive from Windows::UI::Xaml::DependencyObject. Then, in HostViewModel.idl, derive from BindableBase instead of implementing INotifyPropertyChanged.

注意

C++/cli WinRT、基底クラスから派生した、アプリケーションで宣言された任意のランタイム クラスと呼ばれる、コンポーザブルクラス。For C++/WinRT, any runtime class that you declare in your application that derives from a base class is known as a composable class. 構成可能なクラスに関する制約があります。And there are constraints around composable classes. アプリケーションに渡す、 Windows アプリ認定キットVisual Studio では、Microsoft Store での送信を検証するために使用するテスト (ため Microsoft Store に正常に取り込まれるアプリケーションの)、コンポーザブル クラスは、Windows の基本クラスから最終的に派生する必要があります。For an application to pass the Windows App Certification Kit tests used by Visual Studio and by the Microsoft Store to validate submissions (and therefore for the application to be successfully ingested into the Microsoft Store), a composable class must ultimately derive from a Windows base class. つまり、継承階層の非常にルートにあるクラスは、Windows.* 名前空間で生成された型である必要があります。Meaning that the class at the very root of the inheritance hierarchy must be a type originating in a Windows.* namespace. ランタイム クラスを基底クラスから派生する必要は場合—を実装する例をBindableBaseクラスから派生するは、ビュー モデルのすべての—から派生できます Windows.UI.Xaml.DependencyObjectします。If you do need to derive a runtime class from a base class—for example, to implement a BindableBase class for all of your view models to derive from—then you can derive from Windows.UI.Xaml.DependencyObject.

String.Empty または null の引数を使って PropertyChanged イベントを発生させることは、オブジェクトのすべての非インデクサー プロパティを再び読み取る必要があることを示します。Raising the PropertyChanged event with an argument of String.Empty or null indicates that all non-indexer properties on the object should be re-read. 引数を使用してオブジェクトのインデクサー プロパティを変更したことを示すイベントを発生させることができます"項目[インデクサー]"特定のインデクサー (場所インデクサーはインデックス値にある) かの値を"項目[]"のすべてのインデクサー。You can raise the event to indicate that indexer properties on the object have changed by using an argument of "Item[indexer]" for specific indexers (where indexer is the index value), or a value of "Item[]" for all indexers.

バインディング ソースは、プロパティにデータが含まれる単一のオブジェクト、またはオブジェクトのコレクションとして処理できます。A binding source can be treated either as a single object whose properties contain data, or as a collection of objects. C# Visual Basic のコードを実装するオブジェクトを 1 回限りのバインドをできますと List (Of T) 実行時に変更することはコレクションを表示します。In C# and Visual Basic code, you can one-time bind to an object that implements List(Of T) to display a collection that doesn't change at run-time. 監視可能なコレクション (コレクションの項目の追加と削除を監視する) の場合、代わりに ObservableCollection(Of T) への一方向バインディングを設定します。For an observable collection (observing when items are added to and removed from the collection), one-way bind to ObservableCollection(Of T) instead. C++ コードでは、監視可能なコレクションと監視可能ではないコレクションの両方について、Vector<T> にバインドできます。In C++ code, you can bind to Vector<T> for both observable and non-observable collections. 独自のコレクション クラスにバインドするには、次の表をご覧ください。To bind to your own collection classes, use the guidance in the following table.

シナリオScenario C# と VB (CLR)C# and VB (CLR) C++/WinRTC++/WinRT C++/CXC++/CX
オブジェクトにバインドする。Bind to an object. どのオブジェクトでもかまいません。Can be any object. どのオブジェクトでもかまいません。Can be any object. オブジェクトで BindableAttribute を指定するか、ICustomPropertyProvider を実装する必要があります。Object must have BindableAttribute or implement ICustomPropertyProvider.
バインドされたオブジェクトからプロパティの変更通知を取得します。Get property change notifications from a bound object. オブジェクトを実装する必要があります INotifyPropertyChangedします。Object must implement INotifyPropertyChanged. オブジェクトを実装する必要があります INotifyPropertyChangedします。Object must implement INotifyPropertyChanged. オブジェクトを実装する必要があります INotifyPropertyChangedします。Object must implement INotifyPropertyChanged.
コレクションにバインドする。Bind to a collection. List(Of T) List(Of T) IVector IInspectable、または IBindableObservableVectorします。IVector of IInspectable, or IBindableObservableVector. 参照してくださいXAML コントロールの項目。 c++ にバインド/cli WinRT コレクションコレクション c++/cli WinRTSee XAML items controls; bind to a C++/WinRT collection and Collections with C++/WinRT. ベクター<T> Vector<T>
バインドのコレクションからコレクションの変更通知を取得します。Get collection change notifications from a bound collection. ObservableCollection (Of T) ObservableCollection(Of T) IObservableVector IInspectableします。IObservableVector of IInspectable. IObservableVector<T> IObservableVector<T>
バインドをサポートするコレクションを実装する。Implement a collection that supports binding. List(Of T) を拡張するか、IListIList(Of Object)、IEnumerable、または IEnumerable(Of Object) を実装します。Extend List(Of T) or implement IList, IList(Of Object), IEnumerable, or IEnumerable(Of Object). 汎用の IList(Of T)IEnumerable(Of T) へのバインドはサポートされていません。Binding to generic IList(Of T) and IEnumerable(Of T) is not supported. 実装 IVector IInspectableします。Implement IVector of IInspectable. 参照してくださいXAML コントロールの項目。 c++ にバインド/cli WinRT コレクションコレクション c++/cli WinRTSee XAML items controls; bind to a C++/WinRT collection and Collections with C++/WinRT. IBindableVectorIBindableIterableIVector<Object^>、IIterable<Object^>、IVector<IInspectable*>、または IIterable<IInspectable*> を実装します。Implement IBindableVector, IBindableIterable, IVector<Object^>, IIterable<Object^>, IVector<IInspectable*>, or IIterable<IInspectable*>. 汎用の IVector<T>IIterable<T> へのバインドはサポートされていません。Binding to generic IVector<T> and IIterable<T> is not supported.
コレクションの変更通知をサポートするコレクションを実装します。Implement a collection that supports collection change notifications. ObservableCollection(Of T) を拡張するか、(汎用ではない) IListINotifyCollectionChanged を実装します。Extend ObservableCollection(Of T) or implement (non-generic) IList and INotifyCollectionChanged. 実装 IObservableVector IInspectable、または IBindableObservableVector.Implement IObservableVector of IInspectable, or IBindableObservableVector. IBindableVectorIBindableObservableVector を実装します。Implement IBindableVector and IBindableObservableVector.
段階的読み込みをサポートするコレクションを実装する。Implement a collection that supports incremental loading. ObservableCollection(Of T) を拡張するか、(汎用ではない) IListINotifyCollectionChanged を実装します。Extend ObservableCollection(Of T) or implement (non-generic) IList and INotifyCollectionChanged. さらに、ISupportIncrementalLoading を実装します。Additionally, implement ISupportIncrementalLoading. 実装 IObservableVector IInspectable、または IBindableObservableVector.Implement IObservableVector of IInspectable, or IBindableObservableVector. さらに、ISupportIncrementalLoading を実装しますAdditionally, implement ISupportIncrementalLoading IBindableVectorIBindableObservableVectorISupportIncrementalLoading を実装します。Implement IBindableVector, IBindableObservableVector, and ISupportIncrementalLoading.

段階的読み込みを使うと、任意の大きさのデータ ソースにリスト コントロールをバインドすると同時に、高パフォーマンスを実現できます。You can bind list controls to arbitrarily large data sources, and still achieve high performance, by using incremental loading. たとえば、一度にすべての結果を読む込むことなく、Bing の画像クエリ結果にリスト コントロールをバインドすることができます。For example, you can bind list controls to Bing image query results without having to load all the results at once. この場合、すぐに読み込むのは一部の結果だけで、他の結果は必要に応じて読み込みます。Instead, you load only some results immediately, and load additional results as needed. 増分読み込みをサポートするために実装する必要があります ISupportIncrementalLoading コレクションをサポートするデータ ソースに通知を変更します。To support incremental loading, you must implement ISupportIncrementalLoading on a data source that supports collection change notifications. データ バインディング エンジンがより多くのデータを要求する場合は、UI を更新するためにデータ ソースで適切な要求を行い、結果を統合して、適切な通知を送信する必要があります。When the data binding engine requests more data, your data source must make the appropriate requests, integrate the results, and then send the appropriate notifications in order to update the UI.

バインディング ターゲットBinding target

以下の 2 つの例で、 Button.Contentプロパティはバインディング ターゲット、およびバインディング オブジェクトを宣言するマークアップ拡張機能にその値を設定します。In the two examples below, the Button.Content property is the binding target, and its value is set to a markup extension that declares the binding object. 最初に {x:Bind} を示し、次に {Binding} を示します。First {x:Bind} is shown, and then {Binding}. マークアップでバインディングを宣言する方法は一般的です (便利で、読みやすく、ツールで処理できます)。Declaring bindings in markup is the common case (it's convenient, readable, and toolable). ただし、必要な場合は、マークアップを使わずに、命令を使って (プログラムで) Binding クラスのインスタンスを作成できます。But you can avoid markup and imperatively (programmatically) create an instance of the Binding class instead if you need to.

<Button Content="{x:Bind ...}" ... />
<Button Content="{Binding ...}" ... />

C + を使用している場合/cli WinRT または Visual C コンポーネント拡張 (C +/cli CX) を追加する必要があります、 BindableAttribute 属性を使用する任意のランタイム クラス、 {binding}でマークアップ拡張機能。If you're using C++/WinRT or Visual C++ component extensions (C++/CX), then you'll need to add the BindableAttribute attribute to any runtime class that you want to use the {Binding} markup extension with.

重要

使用している場合C +/cli WinRT BindableAttribute 属性は、Windows SDK バージョン (Windows 10、バージョンは 1809 10.0.17763.0 をインストールした場合に使用)、またはそれ以降。If you're using C++/WinRT, then the BindableAttribute attribute is available if you've installed the Windows SDK version 10.0.17763.0 (Windows 10, version 1809), or later. その属性がない場合は、実装する必要があります、 ICustomPropertyProviderICustomPropertyインターフェイスを使用するには、 {binding}マークアップ拡張機能。Without that attribute, you'll need to implement the ICustomPropertyProvider and ICustomProperty interfaces in order to be able to use the {Binding} markup extension.

{x:Bind} を使って宣言されたバインディング オブジェクトBinding object declared using {x:Bind}

{x:Bind} マークアップを作成する前に必要な手順が 1 つあります。There's one step we need to do before we author our {x:Bind} markup. マークアップのページを表すクラスからバインディング ソース クラスを公開する必要があります。We need to expose our binding source class from the class that represents our page of markup. プロパティを追加することで行っている (型のHostViewModelここでは) をMainPageクラスのページします。We do that by adding a property (of type HostViewModel in this case) to our MainPage page class.

namespace DataBindingInDepth
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            this.ViewModel = new HostViewModel();
        }
    
        public HostViewModel ViewModel { get; set; }
    }
}
// MainPage.idl
import "HostViewModel.idl";

namespace DataBindingInDepth
{
    runtimeclass MainPage : Windows.UI.Xaml.Controls.Page
    {
        MainPage();
        HostViewModel ViewModel{ get; };
    }
}

// MainPage.h
// Include a header, and add this field:
...
#include "HostViewModel.h"
...
    DataBindingInDepth::HostViewModel ViewModel();

private:
    DataBindingInDepth::HostViewModel m_viewModel{ nullptr };
...

// MainPage.cpp
// Implement like this:
...
MainPage::MainPage()
{
    InitializeComponent();

}

DataBindingInDepth::HostViewModel MainPage::ViewModel()
{
    return m_viewModel;
}
...

これが完了したら、バインディング オブジェクトを宣言するマークアップを詳しく見ていくことができます。That done, we can now take a closer look at the markup that declares the binding object. 次の例では、前の「バインディング ターゲット」セクションで使用したものと同じ Button.Content バインディング ターゲットを使って、HostViewModel.NextButtonText プロパティにバインドされたバインディング ターゲットを示します。The example below uses the same Button.Content binding target we used in the "Binding target" section earlier, and shows it being bound to the HostViewModel.NextButtonText property.

<!-- MainPage.xaml -->
<Page x:Class="DataBindingInDepth.Mainpage" ... >
    <Button Content="{x:Bind Path=ViewModel.NextButtonText, Mode=OneWay}" ... />
</Page>

Path として指定している値に注意してください。Notice the value that we specify for Path. この値は、ページ自体のコンテキストで解釈されるパスは、ここを参照して、 ViewModelだけに追加したプロパティ、 MainPageページ。This value is interpreted in the context of the page itself, and in this case the path begins by referencing the ViewModel property that we just added to the MainPage page. このプロパティは HostViewModel インスタンスを返すため、そのオブジェクトにドットを付けて HostViewModel.NextButtonText プロパティにアクセスできます。That property returns a HostViewModel instance, and so we can dot into that object to access the HostViewModel.NextButtonText property. さらに、Mode を指定して、{x:Bind} の既定値である 1 回限りのバインディングをオーバーライドします。And we specify Mode, to override the {x:Bind} default of one-time.

Path プロパティは、入れ子になったプロパティ、添付プロパティ、整数と文字列のインデクサーにバインドするためのさまざまな構文オプションをサポートしています。The Path property supports a variety of syntax options for binding to nested properties, attached properties, and integer and string indexers. 詳しくは、「Property-path 構文」をご覧ください。For more info, see Property-path syntax. 文字列のインデクサーにバインドすると、ICustomPropertyProvider を実装しなくても動的プロパティにバインドする効果を得られます。Binding to string indexers gives you the effect of binding to dynamic properties without having to implement ICustomPropertyProvider. その他の設定については、「{x:Bind} マークアップ拡張」をご覧ください。For other settings, see {x:Bind} markup extension.

説明するため、 HostViewModel.NextButtonTextプロパティが実際に監視可能な場合、追加、クリックして、ボタンのイベント ハンドラーの値を更新HostViewModel.NextButtonText.To illustrate that the HostViewModel.NextButtonText property is indeed observable, add a Click event handler to the button, and update the value of HostViewModel.NextButtonText. ビルド、実行、およびボタンの値を表示するボタンをクリックします。コンテンツを更新します。Build, run, and click the button to see the value of the button's Content update.

// MainPage.xaml.cs
private void Button_Click(object sender, RoutedEventArgs e)
{
    this.ViewModel.NextButtonText = "Updated Next button text";
}
// MainPage.cpp
void MainPage::ClickHandler(IInspectable const&, RoutedEventArgs const&)
{
    ViewModel().NextButtonText(L"Updated Next button text");
}

注意

変更 TextBox.Text 双方向のバインドに送信されるソース、 TextBox がフォーカスを失うとすべてのユーザーのキー入力の後。Changes to TextBox.Text are sent to a two-way bound source when the TextBox loses focus, and not after every user keystroke.

DataTemplate および x: データ型DataTemplate and x:DataType

DataTemplate 内で (項目テンプレート、コンテンツ テンプレート、ヘッダー テンプレートのいずれとして使用される場合でも)、Path の値はページのコンテキストではなく、テンプレート化されたデータ オブジェクトのコンテキストで解釈されています。Inside a DataTemplate (whether used as an item template, a content template, or a header template), the value of Path is not interpreted in the context of the page, but in the context of the data object being templated. {x:Bind} をデータ テンプレートで使用する場合、コンパイル時にバインディングを検証できるように (バインディング用に効率的なコードを生成できるように) するために、DataTemplate では、x:DataType を使って、データ オブジェクトの型を宣言する必要があります。When using {x:Bind} in a data template, so that its bindings can be validated (and efficient code generated for them) at compile-time, the DataTemplate needs to declare the type of its data object using x:DataType. 次に示す例は、SampleDataGroup オブジェクトのコレクションにバインドされている、項目コントロールの ItemTemplate として使うことができます。The example given below could be used as the ItemTemplate of an items control bound to a collection of SampleDataGroup objects.

<DataTemplate x:Key="SimpleItemTemplate" x:DataType="data:SampleDataGroup">
    <StackPanel Orientation="Vertical" Height="50">
      <TextBlock Text="{x:Bind Title}"/>
      <TextBlock Text="{x:Bind Description}"/>
    </StackPanel>
  </DataTemplate>

パス内のオブジェクトの弱い型指定Weakly-typed objects in your Path

たとえば、SampleDataGroup という名前の型があり、Title という名前の文字列プロパティを実装しているとします。Consider for example that you have a type named SampleDataGroup, which implements a string property named Title. 使用してプロパティ MainPage.SampleDataGroupAsObject、オブジェクトの型ですが、実際に SampleDataGroup のインスタンスを返します。And you have a property MainPage.SampleDataGroupAsObject, which is of type object, but which actually returns an instance of SampleDataGroup. バインディング <TextBlock Text="{x:Bind SampleDataGroupAsObject.Title}"/> は、型オブジェクトで Title プロパティが見つからないため、コンパイル エラーとなります。The binding <TextBlock Text="{x:Bind SampleDataGroupAsObject.Title}"/> will result in a compile error because the Title property is not found on the type object. これを解決するには、Path 構文に <TextBlock Text="{x:Bind ((data:SampleDataGroup)SampleDataGroupAsObject).Title}"/> などのキャストを追加します。The remedy for this is to add a cast to your Path syntax like this: <TextBlock Text="{x:Bind ((data:SampleDataGroup)SampleDataGroupAsObject).Title}"/>. Element がオブジェクトとして宣言されているが、実際には TextBlock である、<TextBlock Text="{x:Bind Element.Text}"/> という例を考えてみます。Here's another example where Element is declared as object but is actually a TextBlock: <TextBlock Text="{x:Bind Element.Text}"/>. この場合も、<TextBlock Text="{x:Bind ((TextBlock)Element).Text}"/> のようにキャストによって問題が解決されます。And a cast remedies the issue: <TextBlock Text="{x:Bind ((TextBlock)Element).Text}"/>.

場合は、データが非同期的に読み込みますIf your data loads asynchronously

ページの部分クラスに、 {x:Bind} をサポートするコードがコンパイル時に生成されます。Code to support {x:Bind} is generated at compile-time in the partial classes for your pages. これらのファイルは obj フォルダー内にあり、<view name>.g.cs (C# の場合) などの名前が付けられています。These files can be found in your obj folder, with names like (for C#) <view name>.g.cs. 生成されたコードには、ページの Loading イベントのハンドラーが含まれており、このハンドラーが、ページのバインディングを表す生成されたクラスで Initialize メソッドを呼び出します。The generated code includes a handler for your page's Loading event, and that handler calls the Initialize method on a generated class that represent's your page's bindings. 次に、InitializeUpdate を呼び出して、バインディング ソースとターゲットの間のデータの移動を開始します。Initialize in turn calls Update to begin moving data between the binding source and the target. Loading は、ページまたはユーザー コントロールの最初の測定パスの直前に発生します。Loading is raised just before the first measure pass of the page or user control. したがって、データが非同期的に読み込まれる場合、Initialize が呼び出された時点で準備ができていない可能性があります。So if your data is loaded asynchronously it may not be ready by the time Initialize is called. そのため、データを読み込んだ後、this.Bindings.Update(); を呼び出すことによって、1 回限りのバインディングを強制的に実行できます。So, after you've loaded data, you can force one-time bindings to be initialized by calling this.Bindings.Update();. 非同期的に読み込まれたデータのバインドを 1 回限りのみ必要な場合は、一方向のバインドがあると、変更をリッスンするよりも、それらがこのように初期化するためにかなり安価です。If you only need one-time bindings for asynchronously-loaded data then it's much cheaper to initialize them this way than it is to have one-way bindings and to listen for changes. データがきめ細かく変更されない場合や、特定のアクションの一部として更新される可能性が高い場合は、バインディングを 1 回限りにし、いつでも Update を呼び出すことによって、強制的に手動更新を実行できます。If your data does not undergo fine-grained changes, and if it's likely to be updated as part of a specific action, then you can make your bindings one-time, and force a manual update at any time with a call to Update.

注意

{0} バインド: x} 各部への JSON オブジェクトもアヒル型定義のディクショナリなど、遅延バインディング シナリオには適していません。{x:Bind} is not suited to late-bound scenarios, such as navigating the dictionary structure of a JSON object, nor duck typing. 「ダック タイピング」脆弱な形式でプロパティ名の構文の一致に基づく入力するは、(、「場合について説明します、水中、アヒルのように鳴いたらはアヒル」)。"Duck typing" is a weak form of typing based on lexical matches on property names (a in, "if it walks, swims, and quacks like a duck, then it's a duck"). アヒルへのバインドと、年齢プロパティで均等に満たされるように、またはワインオブジェクト (各型があることを前提、年齢プロパティ)。With duck typing, a binding to the Age property would be equally satisfied with a Person or a Wine object (assuming that those types each had an Age property). これらのシナリオを使用して、 {binding} マークアップ拡張機能。For these scenarios, use the {Binding} markup extension.

{Binding} を使って宣言されたバインディング オブジェクトBinding object declared using {Binding}

C + を使用している場合/cli WinRT または Visual C コンポーネント拡張 (C +/cli CX) し、使用する、 {binding}マークアップ拡張機能を追加する必要があります、 BindableAttribute 属性にバインドする任意のランタイム クラスをします。If you're using C++/WinRT or Visual C++ component extensions (C++/CX) then, to use the {Binding} markup extension, you'll need to add the BindableAttribute attribute to any runtime class that you want to bind to. 使用する{X:bind}、その属性は必要はありません。To use {x:Bind}, you don't need that attribute.

// HostViewModel.idl
// Add this attribute:
[Windows.UI.Xaml.Data.Bindable]
runtimeclass HostViewModel : Windows.UI.Xaml.Data.INotifyPropertyChanged
...

重要

使用している場合C +/cli WinRT BindableAttribute 属性は、Windows SDK バージョン (Windows 10、バージョンは 1809 10.0.17763.0 をインストールした場合に使用)、またはそれ以降。If you're using C++/WinRT, then the BindableAttribute attribute is available if you've installed the Windows SDK version 10.0.17763.0 (Windows 10, version 1809), or later. その属性がない場合は、実装する必要があります、 ICustomPropertyProviderICustomPropertyインターフェイスを使用するには、 {binding}マークアップ拡張機能。Without that attribute, you'll need to implement the ICustomPropertyProvider and ICustomProperty interfaces in order to be able to use the {Binding} markup extension.

{Binding} は、既定で、マークアップ ページの DataContext にバインドしていることを前提としています。{Binding} assumes, by default, that you're binding to the DataContext of your markup page. したがって、ページの DataContext を、バインディング ソース クラス (ここでは HostViewModel 型) のインスタンスに設定します。So we'll set the DataContext of our page to be an instance of our binding source class (of type HostViewModel in this case). 次の例は、バインディング オブジェクトを宣言するマークアップを示しています。The example below shows the markup that declares the binding object. 前の「バインディング ターゲット」セクションで使用したものと同じ Button.Content バインディング ターゲットを使っており、HostViewModel.NextButtonText プロパティにバインドします。We use the same Button.Content binding target we used in the "Binding target" section earlier, and we bind to the HostViewModel.NextButtonText property.

<Page xmlns:viewmodel="using:DataBindingInDepth" ... >
    <Page.DataContext>
        <viewmodel:HostViewModel x:Name="viewModelInDataContext"/>
    </Page.DataContext>
    ...
    <Button Content="{Binding Path=NextButtonText}" ... />
</Page>
// MainPage.xaml.cs
private void Button_Click(object sender, RoutedEventArgs e)
{
    this.viewModelInDataContext.NextButtonText = "Updated Next button text";
}
// MainPage.cpp
void MainPage::ClickHandler(IInspectable const&, RoutedEventArgs const&)
{
    viewModelInDataContext().NextButtonText(L"Updated Next button text");
}

Path として指定している値に注意してください。Notice the value that we specify for Path. この値は、ページの DataContext で解釈されます。この例では、HostViewModel のインスタンスに設定されます。This value is interpreted in the context of the page's DataContext, which in this example is set to an instance of HostViewModel. パスは HostViewModel.NextButtonText プロパティを参照します。The path references the HostViewModel.NextButtonText property. {Binding} の既定値である一方向のバインディングが適切であるため、Mode は省略できます。We can omit Mode, because the {Binding} default of one-way works here.

UI 要素の DataContext の既定値は、その親から継承された値です。The default value of DataContext for a UI element is the inherited value of its parent. もちろん DataContext を明示的に設定することによってこの既定値 (さらに既定で子に継承される) をオーバーライドすることができます。You can of course override that default by setting DataContext explicitly, which is in turn inherited by children by default. 要素で明示的に DataContext を設定することは、同じソースを使う複数のバインディングが必要な場合に便利です。Setting DataContext explicitly on an element is useful when you want to have multiple bindings that use the same source.

バインディング オブジェクトには Source プロパティがあり、その既定値はバインディングが宣言されている UI 要素の DataContext です。A binding object has a Source property, which defaults to the DataContext of the UI element on which the binding is declared. この既定値をオーバーライドするには、バインディングで SourceRelativeSource、または ElementName を明示的に設定します (詳しくは、「{Binding}」をご覧ください)。You can override this default by setting Source, RelativeSource, or ElementName explicitly on the binding (see {Binding} for details).

内で、 DataTemplate DataContext テンプレート化されているデータ オブジェクトが自動的に設定します。Inside a DataTemplate, the DataContext is automatically set to the data object being templated. 次の例は、TitleDescription という名前の文字列プロパティを持つ任意の型のコレクションにバインドされている、項目コントロールの ItemTemplate として使うことができますThe example given below could be used as the ItemTemplate of an items control bound to a collection of any type that has string properties named Title and Description.

<DataTemplate x:Key="SimpleItemTemplate">
    <StackPanel Orientation="Vertical" Height="50">
      <TextBlock Text="{Binding Title}"/>
      <TextBlock Text="{Binding Description"/>
    </StackPanel>
  </DataTemplate>

注意

既定では、変更 TextBox.Text 双方向のバインドに送信されるときにソース、 テキスト ボックスがフォーカスを失った。By default, changes to TextBox.Text are sent to a two-way bound source when the TextBox loses focus. 変更をユーザーの各キーストロークの後に送信するには、マークアップのバインディングで UpdateSourceTriggerPropertyChanged に設定します。To cause changes to be sent after every user keystroke, set UpdateSourceTrigger to PropertyChanged on the binding in markup. UpdateSourceTriggerExplicit に設定することによって、変更が送信されるタイミングを完全に制御することもできます。You can also completely take control of when changes are sent to the source by setting UpdateSourceTrigger to Explicit. 次に、テキスト ボックスでのイベント (通常 TextBox.TextChanged) を処理し、ターゲットで GetBindingExpression を呼び出して BindingExpression オブジェクトを取得します。最後に、BindingExpression.UpdateSource を呼び出して、データ ソースをプログラムで更新します。You then handle events on the text box (typically TextBox.TextChanged), call GetBindingExpression on the target to get a BindingExpression object, and finally call BindingExpression.UpdateSource to programmatically update the data source.

Path プロパティは、入れ子になったプロパティ、添付プロパティ、整数と文字列のインデクサーにバインドするためのさまざまな構文オプションをサポートしています。The Path property supports a variety of syntax options for binding to nested properties, attached properties, and integer and string indexers. 詳しくは、「Property-path 構文」をご覧ください。For more info, see Property-path syntax. 文字列のインデクサーにバインドすると、ICustomPropertyProvider を実装しなくても動的プロパティにバインドする効果を得られます。Binding to string indexers gives you the effect of binding to dynamic properties without having to implement ICustomPropertyProvider. ElementName プロパティは要素間のバインディングに便利です。The ElementName property is useful for element-to-element binding. RelativeSource プロパティにはいくつかの用途があり、そのうちの 1 つが、ControlTemplate 内でバインディングをテンプレート化するためのより強力な方法としての用途です。The RelativeSource property has several uses, one of which is as a more powerful alternative to template binding inside a ControlTemplate. その他の設定については、「{Binding} マークアップ拡張」と Binding クラスの説明をご覧ください。For other settings, see {Binding} markup extension and the Binding class.

ソースとターゲットが同じ型ではない場合What if the source and the target are not the same type?

ブール型プロパティの値に基づいて UI 要素の表示を制御する場合、数値の範囲や傾向に応じた色で UI 要素をレンダリングする場合、または文字列を想定している UI 要素のプロパティに日付や時刻の値を表示する場合は、値の型を別の型に変換する必要があります。If you want to control the visibility of a UI element based on the value of a boolean property, or if you want to render a UI element with a color that's a function of a numeric value's range or trend, or if you want to display a date and/or time value in a UI element property that expects a string, then you'll need to convert values from one type to another. バインディング ソース クラスから適切な型の別のプロパティを公開し、変換ロジックをカプセル化し、その中でテストできるようにしておくことが、適切なソリューションである場合があります。There will be cases where the right solution is to expose another property of the right type from your binding source class, and keep the conversion logic encapsulated and testable there. ただし、この方法はソースとターゲットのプロパティの数が多くなり、組み合わせが多くなると、柔軟性も拡張性もありません。But that isn't flexible nor scalable when you have large numbers, or large combinations, of source and target properties. その場合は、いくつかのオプションがあります。In that case you have a couple of options:

  • {X:Bind} を使用している場合、関数に直接バインドして変換を行うことができますIf using {x:Bind} then you can bind directly to a function to do that conversion
  • または、変換を実行するためのオブジェクトである、値コンバーターを指定することができますOr you can specify a value converter which is an object designed to perform the conversion

値コンバーターValue Converters

DateTime 値を月を含む文字列値に変換する、1 回限りまたは一方向のバインディングに適した値コンバーターを以下に示します。Here's a value converter, suitable for a one-time or a one-way binding, that converts a DateTime value to a string value containing the month. このクラスは、IValueConverter を実装します。The class implements IValueConverter.

public class DateToStringConverter : IValueConverter
{
    // Define the Convert method to convert a DateTime value to 
    // a month string.
    public object Convert(object value, Type targetType, 
        object parameter, string language)
    {
        // value is the data from the source object.
        DateTime thisdate = (DateTime)value;
        int monthnum = thisdate.Month;
        string month;
        switch (monthnum)
        {
            case 1:
                month = "January";
                break;
            case 2:
                month = "February";
                break;
            default:
                month = "Month not found";
                break;
        }
        // Return the value to pass to the target.
        return month;
    }

    // ConvertBack is not implemented for a OneWay binding.
    public object ConvertBack(object value, Type targetType, 
        object parameter, string language)
    {
        throw new NotImplementedException();
    }
}
// See the "Formatting or converting data values for display" section in the "Data binding overview" topic.

次に、バインディング オブジェクトのマークアップでその値コンバーターを利用する方法を示します。And here's how you consume that value converter in your binding object markup.

<UserControl.Resources>
  <local:DateToStringConverter x:Key="Converter1"/>
</UserControl.Resources>
...
<TextBlock Grid.Column="0" 
  Text="{x:Bind ViewModel.Month, Converter={StaticResource Converter1}}"/>
<TextBlock Grid.Column="0" 
  Text="{Binding Month, Converter={StaticResource Converter1}}"/>

バインドの Converter パラメーターを定義した場合、Convert メソッドと ConvertBack メソッドがバインド エンジンによって呼び出されます。The binding engine calls the Convert and ConvertBack methods if the Converter parameter is defined for the binding. ソースからデータが渡されると、バインド エンジンは、Convert を呼び出し、返すデータをターゲットに渡します。When data is passed from the source, the binding engine calls Convert and passes the returned data to the target. ターゲットからデータが渡されると (双方向バインディングの場合)、バインド エンジンは、ConvertBack を呼び出し、返すデータをソースに渡します。When data is passed from the target (for a two-way binding), the binding engine calls ConvertBack and passes the returned data to the source.

コンバーターは、省略可能なパラメーターもあります。ConverterLanguage、変換処理で使用する言語を指定することができますと ConverterParameterパラメーターを渡すことができますが、変換ロジック。The converter also has optional parameters: ConverterLanguage, which allows specifying the language to be used in the conversion, and ConverterParameter, which allows passing a parameter for the conversion logic. コンバーター パラメーターの使用例については、「IValueConverter」をご覧ください。For an example that uses a converter parameter, see IValueConverter.

注意

変換でエラーがある場合は、例外をスローしません。If there is an error in the conversion, do not throw an exception. 代わりに DependencyProperty.UnsetValue を返します。これにより、データ転送が中止されます。Instead, return DependencyProperty.UnsetValue, which will stop the data transfer.

バインディング ソースを解決できない場合に使用する既定値を表示するには、マークアップのバインディング オブジェクトで FallbackValue プロパティを設定します。To display a default value to use whenever the binding source cannot be resolved, set the FallbackValue property on the binding object in markup. これは、変換エラーや書式エラーを処理する場合に便利です。This is useful to handle conversion and formatting errors. また、バインド時にソースのプロパティが、型が混在するバインド先のコレクションのどのオブジェクトにも見つからないときにも便利です。It is also useful to bind to source properties that might not exist on all objects in a bound collection of heterogeneous types.

テキスト コントロールを文字列でない値にバインドした場合、データ バインディング エンジンは値を文字列に変換します。If you bind a text control to a value that is not a string, the data binding engine will convert the value to a string. 値が参照型である場合、データ バインディング エンジンは ICustomPropertyProvider.GetStringRepresentation または IStringable.ToString を呼び出すことで文字列の値を取得します。取得できない場合は、Object.ToString を呼び出します。If the value is a reference type, the data binding engine will retrieve the string value by calling ICustomPropertyProvider.GetStringRepresentation or IStringable.ToString if available, and will otherwise call Object.ToString. ただし、データ バインディング エンジンは基底クラスの実装を隠ぺいする ToString の実装を無視することに注意してください。Note, however, that the binding engine will ignore any ToString implementation that hides the base-class implementation. 代わりに、サブクラスの実装で基底クラスの ToString メソッドをオーバーライドする必要があります。Subclass implementations should override the base class ToString method instead. 同様に、ネイティブ言語では、すべてのマネージ オブジェクトが ICustomPropertyProviderIStringable を実装しているように見えます。Similarly, in native languages, all managed objects appear to implement ICustomPropertyProvider and IStringable. ただし、GetStringRepresentationIStringable.ToString のすべての呼び出しは、Object.ToString またはそのオーバーライドされたメソッドに割り振られます。基底クラスの実装を隠ぺいする新しい ToString メソッドの実装に割り振られることはありません。However, all calls to GetStringRepresentation and IStringable.ToString are routed to Object.ToString or an override of that method, and never to a new ToString implementation that hides the base-class implementation.

注意

Windows 10、バージョン1607 以降では、XAML フレームワークにブール値と Visibility 値のコンバーターが組み込まれています。Starting in Windows 10, version 1607, the XAML framework provides a built in boolean to Visibility converter. コンバーターは、Visible 列挙値に対して true を、Collapsed に対して false をマッピングします。これにより、コンバーターを作成せずに Visibility プロパティをブール値にバインドできます。The converter maps true to the Visible enumeration value and false to Collapsed so you can bind a Visibility property to a boolean without creating a converter. 組み込みのコンバーターを使用するには、アプリの最小のターゲット SDK バージョンが 14393 以降である必要があります。To use the built in converter, your app's minimum target SDK version must be 14393 or later. アプリがそれよりも前のバージョンの Windows 10 をターゲットとしている場合は使うことができません。You can't use it when your app targets earlier versions of Windows 10. ターゲット バージョンについて詳しくは、「バージョン アダプティブ コード」をご覧ください。For more info about target versions, see Version adaptive code.

{X:Bind} の関数バインドFunction binding in {x:Bind}

{x:Bind} は関数となるバインディング パスの最終ステップを有効化します。{x:Bind} enables the final step in a binding path to be a function. これを使って変換を実行できます。また 1 つ以上のプロパティに依存するバインディングを実行できます。This can be used to perform conversions, and to perform bindings that depend on more than one property. 参照してください X:bind 関数See Functions in x:Bind

要素の要素へのバインドElement-to-element binding

1 つの XAML 要素のプロパティは、別の XAML 要素のプロパティにバインドできます。You can bind the property of one XAML element to the property of another XAML element. 例のマークアップで表示する方法。Here's an example of how that looks in markup.

<TextBox x:Name="myTextBox" />
<TextBlock Text="{x:Bind myTextBox.Text, Mode=OneWay}" />

重要

使用して要素から要素のバインディングのために必要なワークフローのC++/WinRT を参照してください要素から要素のバインディングします。For the necessary workflow for element-to-element binding using C++/WinRT, see Element-to-element binding.

リソース ディクショナリと {x:Bind}Resource dictionaries with {x:Bind}

{x:Bind} マークアップ拡張はコードの生成に依存するため、InitializeComponent (生成されたコードを初期化する) を呼び出すコンストラクターを含むコード ビハインド ファイルが必要です。The {x:Bind} markup extension depends on code generation, so it needs a code-behind file containing a constructor that calls InitializeComponent (to initialize the generated code). ファイル名を参照する代わりに、その型をインスタンス化する (InitializeComponent が呼び出される) ことによって、リソース ファイルを再利用します。You re-use the resource dictionary by instantiating its type (so that InitializeComponent is called) instead of referencing its filename. 次の例では、既存のリソース ディクショナリがあり、その中で {x:Bind} を使う場合の対処方法を示します。Here's an example of what to do if you have an existing resource dictionary and you want to use {x:Bind} in it.

TemplatesResourceDictionary.xamlTemplatesResourceDictionary.xaml

<ResourceDictionary
    x:Class="ExampleNamespace.TemplatesResourceDictionary"
    .....
    xmlns:examplenamespace="using:ExampleNamespace">
    
    <DataTemplate x:Key="EmployeeTemplate" x:DataType="examplenamespace:IEmployee">
        <Grid>
            <TextBlock Text="{x:Bind Name}"/>
        </Grid>
    </DataTemplate>
</ResourceDictionary>

TemplatesResourceDictionary.xaml.csTemplatesResourceDictionary.xaml.cs

using Windows.UI.Xaml.Data;
 
namespace ExampleNamespace
{
    public partial class TemplatesResourceDictionary
    {
        public TemplatesResourceDictionary()
        {
            InitializeComponent();
        }
    }
}

MainPage.xamlMainPage.xaml

<Page x:Class="ExampleNamespace.MainPage"
    ....
    xmlns:examplenamespace="using:ExampleNamespace">

    <Page.Resources>
        <ResourceDictionary>
            .... 
            <ResourceDictionary.MergedDictionaries>
                <examplenamespace:TemplatesResourceDictionary/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Page.Resources>
</Page>

イベント バインディングと ICommandEvent binding and ICommand

{x:Bind} はイベント バインディングと呼ばれる機能をサポートしています。{x:Bind} supports a feature called event binding. この機能によって、バインディングを使用するイベントのハンドラーを指定できます。これは、コード ビハインド ファイルのメソッドによるイベント処理に対する追加のオプションです。With this feature, you can specify the handler for an event using a binding, which is an additional option on top of handling events with a method on the code-behind file. たとえば、MainPage クラスに RootFrame プロパティがあるとします。Let's say you have a RootFrame property on your MainPage class.

public sealed partial class MainPage : Page
{
    ...
    public Frame RootFrame { get { return Window.Current.Content as Frame; } }
}

次のように、RootFrame プロパティによって返される Frame オブジェクトのメソッドに、ボタンの Click イベントをバインドできます。You can then bind a button's Click event to a method on the Frame object returned by the RootFrame property like this. また、ボタンの IsEnabled プロパティを、同じ Frame の別のメンバーにもバインドします。Note that we also bind the button's IsEnabled property to another member of the same Frame.

<AppBarButton Icon="Forward" IsCompact="True"
IsEnabled="{x:Bind RootFrame.CanGoForward, Mode=OneWay}"
Click="{x:Bind RootFrame.GoForward}"/>

この方法では、オーバーロードされたメソッドを使ってイベントを処理することはできません。Overloaded methods cannot be used to handle an event with this technique. また、イベントを処理するメソッドにパラメーターがある場合、すべてのパラメーターがそれぞれ、イベントのすべての型から代入できる必要があります。Also, if the method that handles the event has parameters then they must all be assignable from the types of all of the event's parameters, respectively. この場合、Frame.GoForward はオーバーロードされておらず、パラメーターはありません (ただし、2 つの object パラメーターを取る場合でも有効です)。In this case, Frame.GoForward is not overloaded and it has no parameters (but it would still be valid even if it took two object parameters). Frame.GoBack がオーバー ロードされて、そのメソッドを使用してこの方法ではできないようにします。Frame.GoBack is overloaded, though, so we can't use that method with this technique.

イベント バインディングの手法は、コマンドの実装と使用に似ています (コマンドは ICommand インターフェイスを実装するオブジェクトを返すプロパティです)。The event binding technique is similar to implementing and consuming commands (a command is a property that returns an object that implements the ICommand interface). {x:Bind}{Binding} はいずれもコマンドで動作します。Both {x:Bind} and {Binding} work with commands. コマンド パターンを何度も実装する必要はありません。QuizGame サンプル (Common フォルダー) に含まれている DelegateCommand ヘルパー クラスを使うことができます。So that you don't have to implement the command pattern multiple times, you can use the DelegateCommand helper class that you'll find in the QuizGame sample (in the "Common" folder).

フォルダーやファイルのコレクションへのバインドBinding to a collection of folders or files

Windows.Storage 名前空間の API を使って、フォルダーとファイルのデータを取得できます。You can use the APIs in the Windows.Storage namespace to retrieve folder and file data. ただし、GetFilesAsync メソッド、GetFoldersAsync メソッド、GetItemsAsync メソッドは、リスト コントロールへのバインドに適した値を返さないことがあります。However, the various GetFilesAsync, GetFoldersAsync, and GetItemsAsync methods do not return values that are suitable for binding to list controls. 代わりに、FileInformationFactory クラスの GetVirtualizedFilesVector メソッド、GetVirtualizedFoldersVector メソッド、GetVirtualizedItemsVector メソッドの戻り値にバインドする必要があります。Instead, you must bind to the return values of the GetVirtualizedFilesVector, GetVirtualizedFoldersVector, and GetVirtualizedItemsVector methods of the FileInformationFactory class. StorageDataSource と GetVirtualizedFilesVector のサンプルに関するページから抜粋した次のコード例は、一般的な使用パターンを示しています。The following code example from the StorageDataSource and GetVirtualizedFilesVector sample shows the typical usage pattern. アプリ パッケージ マニフェストで picturesLibrary 機能を宣言し、ピクチャ ライブラリ フォルダーにピクチャがあることを確認します。Remember to declare the picturesLibrary capability in your app package manifest, and confirm that there are pictures in your Pictures library folder.

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    var library = Windows.Storage.KnownFolders.PicturesLibrary;
    var queryOptions = new Windows.Storage.Search.QueryOptions();
    queryOptions.FolderDepth = Windows.Storage.Search.FolderDepth.Deep;
    queryOptions.IndexerOption = Windows.Storage.Search.IndexerOption.UseIndexerWhenAvailable;

    var fileQuery = library.CreateFileQueryWithOptions(queryOptions);

    var fif = new Windows.Storage.BulkAccess.FileInformationFactory(
        fileQuery,
        Windows.Storage.FileProperties.ThumbnailMode.PicturesView,
        190,
        Windows.Storage.FileProperties.ThumbnailOptions.UseCurrentScale,
        false
        );

    var dataSource = fif.GetVirtualizedFilesVector();
    this.PicturesListView.ItemsSource = dataSource;
}

通常はこの方法で、ファイルとフォルダーの情報の読み取り専用ビューを作成します。You will typically use this approach to create a read-only view of file and folder info. たとえば、ユーザーが音楽ビューで曲を評価できるように、ファイルとフォルダーのプロパティへの双方向のバインドを作成できます。You can create two-way bindings to the file and folder properties, for example to let users rate a song in a music view. ただし、適切な SavePropertiesAsync メソッド (MusicProperties.SavePropertiesAsync など) を呼び出すまで、変更は永続化されません。However, any changes are not persisted until you call the appropriate SavePropertiesAsync method (for example, MusicProperties.SavePropertiesAsync). 項目からフォーカスが移動したときに選択のリセットがトリガーされるため、変更をコミットする必要があります。You should commit changes when the item loses focus because this triggers a selection reset.

この方法による双方向のバインドは、ミュージックなど、インデックス化された場所でのみ機能します。Note that two-way binding using this technique works only with indexed locations, such as Music. ある場所がインデックス化されているかどうかを確認するには、FolderInformation.GetIndexedStateAsync メソッドを呼び出します。You can determine whether a location is indexed by calling the FolderInformation.GetIndexedStateAsync method.

仮想化されたベクターは、一部の項目に対して、値の設定の前に null を返す場合があることにも注意してください。Note also that a virtualized vector can return null for some items before it populates their value. たとえば、仮想化されたベクターにバインドされたリスト コントロールの SelectedItem 値を使う前に、null をチェックする必要があります。または、代わりに SelectedIndex を使います。For example, you should check for null before you use the SelectedItem value of a list control bound to a virtualized vector, or use SelectedIndex instead.

キーでグループ化されたデータへのバインドBinding to data grouped by a key

項目のフラット コレクションを作成した場合 (によって表されますたとえば、ブック、 BookSkuクラス) をキーとして共通のプロパティを使用して、項目をグループ化すると (、 BookSku.AuthorNameプロパティなど)、。結果をグループ化されたデータと呼びます。If you take a flat collection of items (books, for example, represented by a BookSku class) and you group the items by using a common property as a key (the BookSku.AuthorName property, for example) then the result is called grouped data. データをグループ化すると、フラットなコレクションではなくなります。When you group data, it is no longer a flat collection. グループ化されたデータは、各グループ オブジェクトが、グループ オブジェクトのコレクションGrouped data is a collection of group objects, where each group object has

  • キーとa key, and
  • プロパティがそのキーに一致する項目のコレクション。a collection of items whose property matches that key.

結果、作成者の名前で、ブックをグループ化の結果の各グループには、作成者名グループのコレクションでブックの「例をもう一度実行するにはTo take the books example again, the result of grouping the books by author name results in a collection of author name groups where each group has

  • である作成者の名前、キーとa key, which is an author name, and
  • コレクション、 BookSkus がAuthorNameプロパティ グループのキーに一致します。a collection of the BookSkus whose AuthorName property matches the group's key.

一般的に、コレクションを表示するには、項目コントロール ItemsSource (ListViewGridView など) を、コレクションを返すプロパティに直接バインドします。In general, to display a collection, you bind the ItemsSource of an items control (such as ListView or GridView) directly to a property that returns a collection. 項目のフラットなコレクションの場合は、何も特別なことをする必要はありません。If that's a flat collection of items then you don't need to do anything special. 一方、グループ オブジェクトのコレクションの場合 (グループ化されたデータにバインドしている場合など) は、項目コントロールとバインディング ソースの間に存在する、CollectionViewSource と呼ばれる中間オブジェクトのサービスが必要です。But if it's a collection of group objects (as it is when binding to grouped data) then you need the services of an intermediary object called a CollectionViewSource which sits between the items control and the binding source. グループ化されたデータを返すプロパティに CollectionViewSource をバインドし、項目コントロールを CollectionViewSource にバンドします。You bind the CollectionViewSource to the property that returns grouped data, and you bind the items control to the CollectionViewSource. CollectionViewSource の追加の付加価値として現在の項目を追跡できるため、複数の項目コントロールをすべて同じ CollectionViewSource にバインドすることによって同期させることができます。An extra value-add of a CollectionViewSource is that it keeps track of the current item, so you can keep more than one items control in sync by binding them all to the same CollectionViewSource. CollectionViewSource.View プロパティによって返されるオブジェクトの ICollectionView.CurrentItem プロパティによって、現在の項目にプログラムでアクセスすることもできます。You can also access the current item programmatically through the ICollectionView.CurrentItem property of the object returned by the CollectionViewSource.View property.

CollectionViewSource のグループ化機能をアクティブにするには、IsSourceGroupedtrue に設定します。To activate the grouping facility of a CollectionViewSource, set IsSourceGrouped to true. ItemsPath プロパティも設定する必要があるかどうかは、グループ オブジェクトを作成する方法に依存します。Whether you also need to set the ItemsPath property depends on exactly how you author your group objects. グループ オブジェクトを作成するには、"グループである" パターンと "グループを保持する" パターンの 2 つの方法があります。There are two ways to author a group object: the "is-a-group" pattern, and the "has-a-group" pattern. "グループである" パターンでは、グループ オブジェクトはコレクション型から派生 (たとえば、List<T> ) から派生するため、グループ オブジェクトは実際にそれ自体が項目のグループです。In the "is-a-group" pattern, the group object derives from a collection type (for example, List<T>), so the group object actually is itself the group of items. このパターンでは、ItemsPath を設定する必要はありません。With this pattern you do not need to set ItemsPath. "グループを保持する" パターンでは、グループ オブジェクトはコレクション型 (List<T> など) の 1 つまたは複数のプロパティを持つため、グループは、プロパティの形式で項目のグループ (または複数のプロパティの形式で項目の複数のグループ) を "保持" します。In the "has-a-group" pattern, the group object has one or more properties of a collection type (such as List<T>), so the group "has a" group of items in the form of a property (or several groups of items in the form of several properties). このパターンでは、ItemsPath を、項目のグループを含むプロパティの名前に設定する必要があります。With this pattern you need to set ItemsPath to the name of the property that contains the group of items.

次の例は、"グループを保持する" パターンを示しています。The example below illustrates the "has-a-group" pattern. ページ クラスには ViewModel という名前のプロパティがあります。このプロパティはビュー モデルのインスタンスを返します。The page class has a property named ViewModel, which returns an instance of our view model. CollectionViewSource はビュー モデルの Authors プロパティにバインドされ (Authors はグループ オブジェクトのコレクション)、それがグループ化された項目を格納する Author.BookSkus プロパティであることも指定します。The CollectionViewSource binds to the Authors property of the view model (Authors is the collection of group objects) and also specifies that it's the Author.BookSkus property that contains the grouped items. 最後に、GridViewCollectionViewSource にバインドされ、グループ内の項目をレンダリングできるようにグループのスタイルが定義されています。Finally, the GridView is bound to the CollectionViewSource, and has its group style defined so that it can render the items in groups.

<Page.Resources>
    <CollectionViewSource
    x:Name="AuthorHasACollectionOfBookSku"
    Source="{x:Bind ViewModel.Authors}"
    IsSourceGrouped="true"
    ItemsPath="BookSkus"/>
</Page.Resources>
...
<GridView
ItemsSource="{x:Bind AuthorHasACollectionOfBookSku}" ...>
    <GridView.GroupStyle>
        <GroupStyle
            HeaderTemplate="{StaticResource AuthorGroupHeaderTemplateWide}" ... />
    </GridView.GroupStyle>
</GridView>

"グループである" パターンは、2 つの方法のいずれかで実装できます。You can implement the "is-a-group" pattern in one of two ways. 1 つは、独自のグループ クラスを作成する方法です。One way is to author your own group class. List<T> からクラスを派生させます (ここで T は項目の型です)。Derive the class from List<T> (where T is the type of the items). たとえば、public class Author : List<BookSku> と記述します。For example, public class Author : List<BookSku>. もう 1 つは、BookSku 項目の同様のプロパティ値から、動的にグループ オブジェクト (とグループ クラス) を動的に作成する LINQ 式を使う方法です。The second way is to use a LINQ expression to dynamically create group objects (and a group class) from like property values of the BookSku items. このアプローチ (項目のフラットな一覧のみを保持し、必要に応じてグループ化する) は、クラウド サービスのデータにアクセスするアプリで一般的です。This approach—maintaining only a flat list of items and grouping them together on the fly—is typical of an app that accesses data from a cloud service. 著者やジャンルなどに基づいて書籍を柔軟にグループ化することができます。AuthorGenre などの特別なグループ クラスは必要ありません。You get the flexibility to group books by author or by genre (for example) without needing special group classes such as Author and Genre.

次の例は、LINQ を使用した "グループである" パターンを示しています。The example below illustrates the "is-a-group" pattern using LINQ. 今回は、書籍をジャンルでグループ化し、グループ ヘッダーにジャンル名と共に表示します。This time we group books by genre, displayed with the genre name in the group headers. これは、グループの Key の値に関連する "Key" プロパティ パスによって示されます。This is indicated by the "Key" property path in reference to the group Key value.

using System.Linq;
...
private IOrderedEnumerable<IGrouping<string, BookSku>> genres;

public IOrderedEnumerable<IGrouping<string, BookSku>> Genres
{
    get
    {
        if (this.genres == null)
        {
            this.genres = from book in this.bookSkus
                          group book by book.genre into grp
                          orderby grp.Key
                          select grp;
        }
        return this.genres;
    }
}

{x:Bind} をデータ テンプレートと共に使う場合、x:DataType 値を設定することによって、バインド先の型を指定する必要があることに注意してください。Remember that when using {x:Bind} with data templates we need to indicate the type being bound to by setting an x:DataType value. 型がジェネリックである場合、マークアップでは表現できないため、グループ スタイル ヘッダー テンプレート内で代わりに {Binding} を使う必要があります。If the type is generic then we can't express that in markup so we need to use {Binding} instead in the group style header template.

    <Grid.Resources>
        <CollectionViewSource x:Name="GenreIsACollectionOfBookSku"
        Source="{x:Bind Genres}"
        IsSourceGrouped="true"/>
    </Grid.Resources>
    <GridView ItemsSource="{x:Bind GenreIsACollectionOfBookSku}">
        <GridView.ItemTemplate x:DataType="local:BookTemplate">
            <DataTemplate>
                <TextBlock Text="{x:Bind Title}"/>
            </DataTemplate>
        </GridView.ItemTemplate>
        <GridView.GroupStyle>
            <GroupStyle>
                <GroupStyle.HeaderTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Key}"/>
                    </DataTemplate>
                </GroupStyle.HeaderTemplate>
            </GroupStyle>
        </GridView.GroupStyle>
    </GridView>

SemanticZoom コントロールは、ユーザーがグループ化されたデータを表示したり、データ間を移動したりするための優れた方法です。A SemanticZoom control is a great way for your users to view and navigate grouped data. Bookstore2 サンプル アプリは、SemanticZoom の使い方を示しています。The Bookstore2 sample app illustrates how to use the SemanticZoom. このアプリでは、著者別にグループ化された書籍の一覧を表示する (拡大表示ビュー) ことも、縮小して著者のジャンプ リストを表示する (縮小表示ビュー) こともできます。In that app, you can view a list of books grouped by author (the zoomed-in view) or you can zoom out to see a jump list of authors (the zoomed-out view). ジャンプ リストを使うと、書籍の一覧をスクロールするよりもすばやく移動することができます。The jump list affords much quicker navigation than scrolling through the list of books. 拡大表示ビューと縮小表示ビューは、実際には、同じ CollectionViewSource にバインドされた ListView または GridView コントロールです。The zoomed-in and zoomed-out views are actually ListView or GridView controls bound to the same CollectionViewSource.

SemanticZoom の図

階層データ (カテゴリ内のサブカテゴリなど) にバインドする場合、一連の項目コントロールを使って、UI に階層レベルを表示できます。When you bind to hierarchical data—such as subcategories within categories—you can choose to display the hierarchical levels in your UI with a series of items controls. 1 つの項目コントロールで項目を選ぶと、後続する項目コントロールの内容に反映されます。A selection in one items control determines the contents of subsequent items controls. 各リストをそれぞれの CollectionViewSource インスタンスにバインドし、CollectionViewSource インスタンスをチェーン形式でバインドすることで、これらのリストの同期を保つことができます。You can keep the lists synchronized by binding each list to its own CollectionViewSource and binding the CollectionViewSource instances together in a chain. これは、マスター/詳細 (またはリスト/詳細) ビューと呼ばれます。This is called a master/details (or list/details) view. 詳しくは、「階層データにバインドし、マスター/詳細ビューを作る方法」をご覧ください。For more info, see How to bind to hierarchical data and create a master/details view.

データ バインディングに関する問題の診断とデバッグDiagnosing and debugging data binding problems

バインド マークアップには、プロパティ (と、C# では場合によってフィールドとメソッド) の名前が含まれています。Your binding markup contains the names of properties (and, for C#, sometimes fields and methods). したがって、プロパティの名前を変更するときに、それを参照するすべてのバインディングを変更する必要があります。So when you rename a property, you'll also need to change any binding that references it. この処理を忘れることは、データ バインディングのバグの一般的な例であり、アプリは正しくコンパイルまたは実行されません。Forgetting to do that leads to a typical example of a data binding bug, and your app either won't compile or won't run correctly.

{x:Bind}{Binding} によって作成されたバインディング オブジェクトは、ほとんど機能的に同等です。The binding objects created by {x:Bind} and {Binding} are largely functionally equivalent. ただし、{x:Bind} にはバインディング ソースの型情報が含まれ、コンパイル時にソース コードが生成されます。But {x:Bind} has type information for the binding source, and it generates source code at compile-time. {x:Bind} を使うと、コードの残りの部分で取得できるものと同じ種類の問題の検出を行うことができます。With {x:Bind} you get the same kind of problem detection that you get with the rest of your code. これには、コンパイル時のバインド式の検証や、ページの部分クラスとして生成されたソース コード内でのブレークポイント設定によるデバッグが含まれます。That includes compile-time validation of your binding expressions, and debugging by setting breakpoints in the source code generated as the partial class for your page. これらのクラスは obj フォルダー内のファイルにあり、<view name>.g.cs (C# の場合) などの名前が付けられています。These classes can be found in the files in your obj folder, with names like (for C#) <view name>.g.cs). バインディングに問題がある場合は、Microsoft Visual Studio デバッガーで、 [処理されない例外で中断] をオンにします。If you have a problem with a binding then turn on Break On Unhandled Exceptions in the Microsoft Visual Studio debugger. デバッガーはその時点での実行を中断し、問題のある点をデバッグすることができます。The debugger will break execution at that point, and you can then debug what has gone wrong. {x:Bind} によって生成されたコードは、バインディング ソース ノードのグラフの各部分で同じパターンに従うため、この情報を [コール スタック] ウィンドウで使って、問題の原因となった呼び出しのシーケンスを特定できます。The code generated by {x:Bind} follows the same pattern for each part of the graph of binding source nodes, and you can use the info in the Call Stack window to help determine the sequence of calls that led up to the problem.

{Binding} には、バインディング ソースの型情報はありません。{Binding} does not have type information for the binding source. ただし、デバッガーがアタッチされたアプリを実行すると、バインド エラーがある場合は Visual Studio の [出力] ウィンドウにそのエラーが表示されます。But when you run your app with the debugger attached, any binding errors appear in the Output window in Visual Studio.

コードでのバインドの作成Creating bindings in code

  このセクションにのみ該当{binding}作成できないため、 {X:bind}コードでバインドします。Note  This section only applies to {Binding}, because you can't create {x:Bind} bindings in code. ただし、{x:Bind} と同じメリットを、DependencyObject.RegisterPropertyChangedCallback によって実現できます。これにより、すべての依存関係プロパティについての変更通知を登録できます。However, some of the same benefits of {x:Bind} can be achieved with DependencyObject.RegisterPropertyChangedCallback, which enables you to register for change notifications on any dependency property.

XAML の代わりに手続き型コードを使っても UI 要素をデータに接続できます。You can also connect UI elements to data using procedural code instead of XAML. そのためには、新しい Binding オブジェクトを作成し、適切なプロパティを設定してから、FrameworkElement.SetBinding または BindingOperations.SetBinding を呼び出します。To do this, create a new Binding object, set the appropriate properties, then call FrameworkElement.SetBinding or BindingOperations.SetBinding. バインドをプログラムで作成すると、Binding プロパティの値を実行時に選択する場合や、複数のコントロール間で 1 つのバインドを共有する場合に便利です。Creating bindings programmatically is useful when you want to choose the binding property values at run-time or share a single binding among multiple controls. ただし、SetBinding の呼び出し後は Binding プロパティの値を変更できないことに注意してください。Note, however, that you cannot change the binding property values after you call SetBinding.

次の例では、バインドをコードで実装する方法を示しています。The following example shows how to implement a binding in code.

<TextBox x:Name="MyTextBox" Text="Text"/>
// Create an instance of the MyColors class 
// that implements INotifyPropertyChanged.
MyColors textcolor = new MyColors();

// Brush1 is set to be a SolidColorBrush with the value Red.
textcolor.Brush1 = new SolidColorBrush(Colors.Red);

// Set the DataContext of the TextBox MyTextBox.
MyTextBox.DataContext = textcolor;

// Create the binding and associate it with the text box.
Binding binding = new Binding() { Path = new PropertyPath("Brush1") };
MyTextBox.SetBinding(TextBox.ForegroundProperty, binding);
' Create an instance of the MyColors class 
' that implements INotifyPropertyChanged. 
Dim textcolor As New MyColors()

' Brush1 is set to be a SolidColorBrush with the value Red. 
textcolor.Brush1 = New SolidColorBrush(Colors.Red)

' Set the DataContext of the TextBox MyTextBox. 
MyTextBox.DataContext = textcolor

' Create the binding and associate it with the text box.
Dim binding As New Binding() With {.Path = New PropertyPath("Brush1")}
MyTextBox.SetBinding(TextBox.ForegroundProperty, binding)

{x:Bind} と {Binding} の機能の比較{x:Bind} and {Binding} feature comparison

機能Feature {x:Bind}{x:Bind} {Binding}{Binding} メモNotes
Path が既定のプロパティであるPath is the default property {x:Bind a.b.c} {Binding a.b.c}
Path プロパティPath property {x:Bind Path=a.b.c} {Binding Path=a.b.c} x:Bind では、Path は既定で DataContext ではなく、Page をルートにします。In x:Bind, Path is rooted at the Page by default, not the DataContext.
IndexerIndexer {x:Bind Groups[2].Title} {Binding Groups[2].Title} コレクション内で指定した項目にバインドします。Binds to the specified item in the collection. 整数ベースのインデックスのみがサポートされます。Only integer-based indexes are supported.
添付プロパティAttached properties {x:Bind Button22.(Grid.Row)} {Binding Button22.(Grid.Row)} 添付プロパティは、かっこを使って指定します。Attached properties are specified using parentheses. プロパティが XAML 名前空間で宣言されていない場合は、そのプロパティの前に xml 名前空間を付けます。これはドキュメントの先頭でコード名前空間にマップする必要があります。If the property is not declared in a XAML namespace, then prefix it with an xml namespace, which should be mapped to a code namespace at the head of the document.
キャストCasting {x:Bind groups[0].(data:SampleDataGroup.Title)} 必要ありません。Not needed. キャストはかっこを使って指定します。Casts are specified using parentheses. プロパティが XAML 名前空間で宣言されていない場合は、そのプロパティの前に xml 名前空間を付けます。これはドキュメントの先頭でコード名前空間にマップする必要があります。If the property is not declared in a XAML namespace, then prefix it with an xml namespace, which should be mapped to a code namespace at the head of the document.
ConverterConverter {x:Bind IsShown, Converter={StaticResource BoolToVisibility}} {Binding IsShown, Converter={StaticResource BoolToVisibility}} コンバーターは、Page/ResourceDictionary のルートまたは App.xaml で宣言する必要があります。Converters must be declared at the root of the Page/ResourceDictionary, or in App.xaml.
ConverterParameter、ConverterLanguageConverterParameter, ConverterLanguage {x:Bind IsShown, Converter={StaticResource BoolToVisibility}, ConverterParameter=One, ConverterLanguage=fr-fr} {Binding IsShown, Converter={StaticResource BoolToVisibility}, ConverterParameter=One, ConverterLanguage=fr-fr} コンバーターは、Page/ResourceDictionary のルートまたは App.xaml で宣言する必要があります。Converters must be declared at the root of the Page/ResourceDictionary, or in App.xaml.
TargetNullValueTargetNullValue {x:Bind Name, TargetNullValue=0} {Binding Name, TargetNullValue=0} バインド式のリーフが null の場合に使用されます。Used when the leaf of the binding expression is null. 文字列値の場合は単一引用符を使用します。Use single quotes for a string value.
FallbackValueFallbackValue {x:Bind Name, FallbackValue='empty'} {Binding Name, FallbackValue='empty'} バインディングのパスの一部 (リーフを除く) が null の場合に使用されます。Used when any part of the path for the binding (except for the leaf) is null.
ElementNameElementName {x:Bind slider1.Value} {Binding Value, ElementName=slider1} {x:Bind} によって、フィールドにバインドしています。Path は既定で Page をルートとするため、名前付きの要素はそのフィールドを使ってアクセスできます。With {x:Bind} you're binding to a field; Path is rooted at the Page by default, so any named element can be accessed via its field.
RelativeSource:Self (自己)RelativeSource: Self <Rectangle x:Name="rect1" Width="200" Height="{x:Bind rect1.Width}" ... /> <Rectangle Width="200" Height="{Binding Width, RelativeSource={RelativeSource Self}}" ... /> {x:Bind} では、要素に名前を付けて、Path でその名前を使います。With {x:Bind}, name the element and use its name in Path.
RelativeSource:TemplatedParentRelativeSource: TemplatedParent 不要Not needed {Binding <path>, RelativeSource={RelativeSource TemplatedParent}} {X:bind} TargetType ControlTemplate にした場合は、親テンプレートにバインドすることを示します。With {x:Bind} TargetType on ControlTemplate indicates binding to template parent. {バインド} たいていの通常のテンプレート バインディング コントロール テンプレートで使用できます。For {Binding} Regular template binding can be used in control templates for most uses. ただし、コンバーターまたは双方向バインディングを使用する必要がある場合は TemplatedParent を使います。<But use TemplatedParent where you need to use a converter, or a two-way binding.<
SourceSource 不要Not needed <ListView ItemsSource="{Binding Orders, Source={StaticResource MyData}}"/> {X:bind} の名前付きの要素を直接に使用できる、プロパティまたは静的のパスを使用します。For {x:Bind} you can directly use the named element, use a property or a static path.
ModeMode {x:Bind Name, Mode=OneWay} {Binding Name, Mode=TwoWay} Mode には、OneTime、OneWay、TwoWay を指定できます。Mode can be OneTime, OneWay, or TwoWay. {x:Bind} の既定値は OneTime で、{Binding} の既定値は OneWay です。{x:Bind} defaults to OneTime; {Binding} defaults to OneWay.
UpdateSourceTriggerUpdateSourceTrigger {x:Bind Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged} {Binding UpdateSourceTrigger=PropertyChanged} UpdateSourceTrigger には、Default、LostFocus、PropertyChanged を指定できます。UpdateSourceTrigger can be Default, LostFocus, or PropertyChanged. {x:Bind} では、UpdateSourceTrigger=Explicit はサポートされません。{x:Bind} does not support UpdateSourceTrigger=Explicit. {x:Bind} では、TextBox.Text を除くすべての場合に PropertyChanged 動作を使います。TextBox.Text の場合は LostFocus 動作を使います。{x:Bind} uses PropertyChanged behavior for all cases except TextBox.Text, where it uses LostFocus behavior.