Xamarinでリスト表示する方法

Xamarin.Formsでリスト表示させる方法についてまとめました。

スポンサーリンク

概要

Xamarin.Formsでも、リスト表示させるためのViewが存在するので、それの簡単な説明をします。

listdisplay-screen

ListView

リスト表示させるためのViewとして、ListViewがあります。そして、このListViewに表示させるデータが指定されているViewCellというものがあります。

今回は、このViewCellの中でもテキストを表示させることができる、TextCellを使います。

デザイン

リストにデータを追加するボタンと、その下にListViewを配置しています。

これらのデザインは、MainPage.xamlファイルに記述します。

見てわかるように、StackLayoutのコントロールの配置を縦にして、その中に、ボタンとListViewを配置しています。

ボタンには、タップされたらOnNewItemメソッドが実行されるように設定しています。

ListViewには、UserListViewという名前をつけています。これは、プログラムを書いていく過程で使用するので、名前を書いています。

TextCellには、Text=”{Binding DisplayName}”としています。これは、DisplayNameの値を表示するということを表しています。

Bindingの後に、表示させたい値の変数を書きます。

リストのデータ

リスト表示させたいデータをクラスのインスタンスで表現します。

今回は、UserクラスのDisplayNameプロパティの値を表示します。

先ほど、TextCellのBindingで指定したDisplayNameとはここを指し、ここに代入されている値が表示されます。

リストの設定

では、実際にリストにデータを追加していきます。

リスト表示させるデータは、ObservableCollectionクラスのインスタンスである必要があります。

なので最初に、Userクラスを指定して、ObservableCollectionクラスのインスタンス、usersを作っています。

このusersは、UserListViewという名前をつけたListViewのItemSourceに代入します。

これで、usersとListViewが関連付けられます。

その後は、ListViewに表示させるデータを設定するために、usersに値を追加していきます。

値の追加は、Addメソッドを使って行います。その引数に、新しく作ったインスタンスを指定します。

これで、”Sato Taro”、”Suzuki Ichiro”、”Takahashi Goro”がリスト表示されます。

データの追加

このままでは、何も変化がなくつまらないので、配置したボタンを押したら、リストにデータが追加されるようにします。

最終的に、MainPage.xaml.csはこのようになりました(usingやnamespaceの指定は除いています)。

ボタンが押されたたら、OnNewItemメソッドが実行されます。

このメソッドは、新しいインスタンスを作って、それをAddメソッドの引数に指定して、”New Item”と表示するようにしています。

listdisplay-newitem-screen

これで、”New Item”という表示が追加されるだけですが、動的に表示が変わるようになりました。

さいごに

次は、表示のカスタイズについて理解していきます。

スポンサーリンク

シェアする

フォローする