こんにちは、コタツです。
Xamarin Forms アプリ第一弾リリースに向けて奮闘しております。まったく初めてなので、「やりたいこと イコール 調査」なのでなかなか前に進みません。画面を作成するのも一苦労・・・そんな中、アプリの中でListViewを使用するので調査しました。WndowsやAndroidでのList表示とは少し違いますが、凄く使いやすくわかりやすかったです。
ListViewの表示
ListViewを作成するクラスです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 |
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using Xamarin.Forms; namespace App1 { /// <summary> /// ListViewを表示するためのサンプルです。 /// </summary> public class ListViewSample { /// <summary> /// コンストラクタ /// </summary> public ListViewSample() { } /// <summary> /// ListView画面を取得します。 /// </summary> /// <returns><ListView画面/returns> public Page GetListViewSamle() { // ListViewのヘッダーを作成します。 Label header = new Label(); header.Text = "ListViewサンプル"; header.FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)); // ListViewに表示する項目を設定します。 List<Shop> shops = new List<Shop>(); // サンプルデータを設定します。 Shop shop = null; for(int i = 0; i < 10; i++) { shop = new Shop("店舗" + (i + 1), "住所" + (i + 1), "電話番号" + (i + 1)); shops.Add(shop); } // ListViewを作成します。 ListView listView1 = new ListView(); // ListViewにデータを設定します。 listView1.ItemsSource = shops; listView1.RowHeight = 100; listView1.ItemTemplate = new DataTemplate(() => { Label nameLabel = new Label(); nameLabel.SetBinding(Label.TextProperty, "Name"); nameLabel.FontSize = 30; Label addressLabel = new Label(); addressLabel.SetBinding(Label.TextProperty, "Address"); addressLabel.FontSize = 30; Label telLabel = new Label(); telLabel.SetBinding(Label.TextProperty, "Tel"); return new ViewCell { View = new StackLayout { Padding = new Thickness(0, 10, 0,10), Orientation = StackOrientation.Horizontal, Children = { nameLabel, new StackLayout { VerticalOptions = LayoutOptions.Center, Spacing = 0, Children = { addressLabel, telLabel } } } } }; }); // ListVew画面を作成します。 var listViewSamle = new ContentPage(); listViewSamle.Content = new StackLayout { Children = { header, listView1 } }; return listViewSamle; } } /// <summary> /// お店情報を管理するクラスです。 /// </summary> class Shop { /// <summary> /// コンストラクタ /// </summary> /// <param name="name">店名</param> /// <param name="address">住所</param> /// <param name="tel">電話番号</param> public Shop(string name, string address, string tel) { Name = name; Address = address; Tel = tel; } /// <summary> /// メンバ変数 /// </summary> public string Name { private set; get; } public string Address { private set; get; } public string Tel { private set; get; } } } |
Listview画面を起動します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
using System; using System.Collections.Generic; using System.Linq; using System.Text; using Xamarin.Forms; namespace App1 { public class App : Application { // アプリケーションを開始します。 public App() { // ListView画面をセットします。 MainPage = new ListViewSample().GetListViewSamle(); } } } |
実行結果です。
まとめ
最初は少し手こずりましたが、慣れればわかりやすいです。本当はTab画面の中にListVewを入れたかったのですが・・・、今から挑戦します。
