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

今回は、ListViewにイメージを表示する方法です。

このイメージをListViewに表示します。train.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");
        }
    }
}

実行すると