一覧での顧客の表示

UI 内で実際のデータを表示して操作することは多くのアプリの機能に不可欠です。 この記事では、一覧で Customer オブジェクトのコレクションを表示するために知っておく必要があることを示します。

これはチュートリアルではありません。 チュートリアルが必要な場合は、「データ バインディングのチュートリアル」を参照してください。このチュートリアルでは、手順を説明したガイド付きのエクスペリエンスが提供されます。

まず、データ バインディングの概要としくみに関する簡単な説明から始めます。 次に、ListView を UI に追加し、データ バインディングを追加し、データ バインディングを追加の機能でカスタマイズします。

理解しておく必要があること

データ バインディングは、アプリのデータをその UI に表示する方法です。 これにより、アプリで役割の分離を使用できるため、UI をその他のコードから分離することができます。 このため、読みやすく保守が容易なより明確な概念モデルが作成されます。

すべてのデータ バインディングには、次の 2 つの部分があります。

• バインドするデータを提供するソース。
• データが表示される UI でのターゲット。

データ バインディングを実装するには、バインディングにデータを提供するソースにコードを追加する必要があります。 また、データ ソースのプロパティを指定する、XAML に 2 つのマークアップ拡張のいずれかを追加する必要があります。 2 つの種類の主な違いを次に示します。

• x:Bind は厳密に型指定され、パフォーマンス向上のためコンパイル時にコード生成が行われます。 x:Bind は既定では 1 回限りのバインディングが指定され、変更されない読み取り専用のデータの高速表示のために最適化されます。
• バインディングは弱く型指定され、実行時にまとめられます。 その結果、パフォーマンスは x:Bind より低下します。 ほとんどの場合、バインディングではなく x:Bind を使用する必要があります。 ただし、古いコードではこの問題が生じる可能性があります。 バインディングは既定では一方向のデータ転送が指定され、ソースで変更できる読み取り専用のデータのために最適化されます。

可能な限り x:Bind を使用することをお勧めします。この記事のスニペットで x:Bind について説明します。 相違点の詳細については、「{x:Bind} と {Binding} の機能の比較」を参照してください。

データ ソースを作成する

最初に、Customer データを表すクラスを作成する必要があります。 参考のために、この必要最小限の例でのプロセスを示します。

public class Customer
{
    public string Name { get; set; }
}

リストを作成する

顧客を表示するには、まずそれを保持する一覧を作成する必要があります。 一覧表示はこのタスクに最適な基本的な XAML コントロールです。 ListView には現在ページ内での位置が必要であり、ItemSource プロパティの値が後で必要になります。

<ListView ItemsSource=""
    HorizontalAlignment="Center"
    VerticalAlignment="Center"/>

ListView にデータをバインドしたら、ドキュメントに戻り、ニーズに最も合うように外観やレイアウトのカスタマイズをテストすることをお勧めします。

一覧へのデータのバインド

バインディングを保持する基本的な UI を作成したので、ソースがバインディングを指定するように構成する必要があります。 その方法を示す例を以下に示します。

public sealed partial class MainPage : Page
{
    public ObservableCollection<Customer> Customers { get; }
        = new ObservableCollection<Customer>();

    public MainPage()
    {
        this.InitializeComponent();
          // Add some customers
        this.Customers.Add(new Customer() { Name = "NAME1"});
        this.Customers.Add(new Customer() { Name = "NAME2"});
        this.Customers.Add(new Customer() { Name = "NAME3"});
    }
}

<ListView ItemsSource="{x:Bind Customers}"
    HorizontalAlignment="Center"
    VerticalAlignment="Center">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="local:Customer">
            <TextBlock Text="{x:Bind Name}"/>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

「データ バインディングの概要」では、項目のコレクションへのバインティングに関するセクションで、同様の問題について説明します。 この例では、次の重要な手順を示します。

• UI の分離コードでは、Customer オブジェクトを保持するための ObservableCollection<T> 型のプロパティを作成します。
• ListView の ItemSource をそのプロパティにバインドします。
• 一覧の各項目の表示方法を構成する、ListView の基本的な ItemTemplate を指定します。

レイアウトをカスタマイズする場合は、リスト ビューのドキュメントに自由に戻って、先ほど作成した DataTemplate を調整します。 ただし、Customers を編集する場合はどうすればよいでしょうか。

UI を通じた Customers の編集

一覧で顧客を表示しましたが、データ バインディングではさらに多くのことができます。 UI から直接データを編集できるとしたらどうでしょうか。 これを行うには、まずデータ バインディングの 3 つのモデルについて説明しましょう。

• 1 回限り: このデータ バインディングは一度だけアクティブ化され、変更に対応しません。
• 一方向: このデータ バインディングは、データ ソースに対して行われた変更で UI を更新します。
• 双方向: このデータ バインディングは、データ ソースに対して行われた変更で UI を更新します。また、UI 内で行われた変更でデータを更新します。

以前のコード スニペットに従った場合、行ったバインディングでは x:Bind を使用し、モードを使用しないため、1 回限りのバインディングになります。 UI から直接 Customers を編集する場合は、データからの変更が Customer オブジェクトに戻されるように、双方向のバインディングに変更する必要があります。 詳細については、「データ バインディングの詳細」を参照してください。

データ ソースが変更された場合は、双方向バインディングも更新されます。 これが機能するためには、ソースで INotifyPropertyChanged を実装し、そのプロパティの set アクセス操作子により PropertyChanged イベントが発生することを確認する必要があります。 一般的には、次に示すように OnPropertyChanged メソッドのようなヘルパー メソッドを呼び出すようにします。

public class Customer : INotifyPropertyChanged
{
    private string _name;
    public string Name
    {
        get => _name;
        set
        {
            if (_name != value)
                {
                    _name = value;
                    this.OnPropertyChanged();
                }
        }
    }
    public event PropertyChangedEventHandler PropertyChanged;

    public void OnPropertyChanged([CallerMemberName] string propertyName = null) =>
        this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}

次に、TextBlock の代わりに TextBox を使用して ListView 内のテキストを編集可能にして、データ バインディングの Mode を TwoWay に設定していることを確認します。

<ListView ItemsSource="{x:Bind Customers}"
    HorizontalAlignment="Center"
    VerticalAlignment="Center">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="local:Customer">
            <TextBox Text="{x:Bind Name, Mode=TwoWay}"/>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

これが機能することを確認する簡単な方法は、TextBox コントロールと OneWay バインディングを持つ 2 つ目の ListView を追加することです。 1 つ目の一覧を編集すると、2 つ目の一覧の値が自動的に変更されます。

理解を深める

双方向バインディングで顧客の一覧を作成したので、リンクしたドキュメントに自由に戻ってテストしてください。 基本および詳細なバインディングの手順を説明したチュートリアルが必要な場合、またはリストと詳細パターンのようなコントロールを調査してより強力な UI を作成する場合は、データ バインディングのチュートリアルを参照することもできます。

便利な API とドキュメント

データ バインディングを操作するうえで役立つ API の簡単な概要とその他の役立つドキュメントを次に示します。

便利な API

役立つドキュメント

役立つコード サンプル