顧客を一覧に表示する

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

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

まず、データ バインディングの概要としくみについて簡単に説明します。 次に、 Ui に ListView を追加し、データ バインディングを追加し、追加機能を使用してデータ バインディングをカスタマイズします。

何を知る必要がありますか?

データ バインディングは、アプリのデータを UI に表示する方法です。 これにより、アプリ内 の懸念事項を分離 し、UI を他のコードから分離することができます。 これにより、読みやすく保守しやすい、よりクリーンな概念モデルが作成されます。

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

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

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

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

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

データ ソースを作成する

まず、顧客データを表すクラスが必要です。 この最小限の例を使用して、プロセスをお見せすることで、参照ポイントを提供します。

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 の分離コードで、 ObservableCollection<T> 型のプロパティを作成して Customer オブジェクトを保持します。
• ListView の ItemSource をそのプロパティにバインドします。
• ListView の基本的な ItemTemplate を指定します。このテンプレートは、リスト内の各項目の表示方法を構成します。

レイアウトのカスタマイズ、項目の選択の追加、または先ほど作成した DataTemplate の調整を行う場合は、リスト ビューのドキュメントを参照してください。 しかし、顧客を編集する場合はどうでしょうか。

UI を使用して顧客を編集する

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

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

前のコード スニペットに従った場合、作成したバインディングは x:Bind を使用し、モードを指定しないため、One-Time バインドになります。 UI から顧客を直接編集する場合は、それを Two-Way バインディングに変更して、データからの変更が Customer オブジェクトに戻されるようにする必要があります。 データ バインディングの詳細についてはをご覧ください。

双方向バインディングでは、データ ソースが変更された場合も UI が更新されます。 これを機能させるには、ソースで INotifyPropertyChanged を実装し、そのプロパティ セッターが 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 を追加することです。 2 番目のリストの値は、最初のリストを編集すると自動的に変更されます。

さらに進む

双方向バインディングを使用して顧客の一覧を作成したので、リンクしたドキュメントを再度確認して、自由に実験してみてください。 基本的なバインディングと高度なバインドの詳細なチュートリアルが必要な場合は、 データ バインディング のチュートリアル を確認したり、 リスト/詳細パターン などのコントロールを調査して、より堅牢な UI を作成したりすることもできます。

便利な API とドキュメント

データ バインディングの使用を開始するのに役立つ API とその他の便利なドキュメントの概要を次に示します。

便利な API

役に立つドキュメント

便利なコード サンプル