眺めて覚える C# Xamarin Forms(11) ListView Programmatically Ⅱ

##今回は、ListViewにイメージを表示する方法です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/f402733b-42f6-6776-06e4-9d3cfebfa041.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/ccd1bffb-a14e-0331-e9c8-1c80bcd40f46.png)このイメージをListViewに表示します。**train.png**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/902c253c-b332-42b4-e400-056a106d321a.png)
###Resources/drawableの配下にドラッグします。
#ListViewの行データを保存するクラスを作成します。

```train.cs
public class Train
        {
            public string Name { get; set; }
            public string Icon { get; set; } = "train.png";
        }
```
##データをリスト形式でセットします。

``` d.cs
            var tlist = new List<Train>();
            var list = new List<string> { "東京", "神田", "お茶の水", "四谷", "新宿", "中野", "荻窪" };
            foreach (var x in list) tlist.Add(new Train() { Name = x });
```

##データテンプレートを作成します。

```temp.cs
            var tmp = new DataTemplate(() =>
            {
                var grid = new Grid() { Margin=2};
                grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(72) });
                grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Auto) });
                var name = new Label { FontSize = 24, FontAttributes = FontAttributes.Bold, };
                name.SetBinding(Label.TextProperty, "Name");
                var image = new Image();
                image.SetBinding(Image.SourceProperty, "Icon");
                grid.Children.Add(image, 0, 0);
                grid.Children.Add(name, 1, 0);
                return new ViewCell { View = grid };
            });
```

###グリットにカラムを設定し、ラベルとイメージを作成して、それぞれのプロパティに設定しています。

##全体のMainPage.xaml.csは、以下の通りです。

```MainPage.xaml.cs
using Android.Widget;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using Xamarin.Forms.PlatformConfiguration;

namespace Xamarin_10
{
    // Learn more about making custom code visible in the Xamarin.Forms previewer
    // by visiting https://aka.ms/xamarinforms-previewer
    [DesignTimeVisible(false)]
    public partial class MainPage : ContentPage
    {
        public class Train
        {
            public string Name { get; set; }
            public string Icon { get; set; } = "train.png";
        }
        public MainPage()
        {
            InitializeComponent();
            var tlist = new List<Train>();
            var list = new List<string> { "東京", "神田", "お茶の水", "四谷", "新宿", "中野", "荻窪" };
            foreach (var x in list) tlist.Add(new Train() { Name = x });
            var tmp = new DataTemplate(() =>
            {
                var grid = new Grid() { Margin=2};
                grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(72) });
                grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Auto) });
                var name = new Label { FontSize = 24, FontAttributes = FontAttributes.Bold, };
                name.SetBinding(Label.TextProperty, "Name");
                var image = new Image();
                image.SetBinding(Image.SourceProperty, "Icon");
                grid.Children.Add(image, 0, 0);
                grid.Children.Add(name, 1, 0);
                return new ViewCell { View = grid };
            });
            var lv = new Xamarin.Forms.ListView() { ItemsSource = tlist, ItemTemplate = tmp, };
            lv.ItemTapped += Lv_ItemTapped;
            Content = new Xamarin.Forms.ScrollView() {Margin=2, Orientation = ScrollOrientation.Vertical, Content = lv };
        }
        void Lv_ItemTapped(object sender, ItemTappedEventArgs e)
        {
            var lv = sender as Xamarin.Forms.ListView;
            var tx = lv.SelectedItem as Train;
            Toast.MakeText(Android.App.Application.Context,
                $"{tx.Name}がタッチされた", ToastLength.Short).Show();
 //           DisplayAlert("Tapped", tx.Name, "OK");
        }
    }
}

```

実行すると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/306e07c9-c92f-606f-50a3-9aecdc042e04.png)