Xamarin で ListViewを使う方法

Xamarinは iOSやAndroidなどのスマホアプリが作れるフレームワークです。

画面viewをXAMLで記述して、処理をc#で記述します。

この記事では、XamarinでListViewを使う方法を紹介します。

1. XAML部分

以下のようにListViewを定義します。

<ListView x:Name="TopTaskView" ItemTapped="TopTaskView_ItemTapped" HasUnevenRows="False" RowHeight="40">
</ListView>

• x:Name="TopTaskView"で、このListViewの名前をTopTaskViewとするように定義します。

• ItemTapped="TopTaskView_ItemTapped"で ListView のアイテムをタップしたときのイベントトリガーを定義します。TopTaskView_ItemTappedという関数が実行されます。

• HasUnevenRows="False" は、RowHeightプロパティと併用すると、リストビューには値のある行しか表示されません。HasUnevenRowsやRowHeightプロパティを定義しない場合、リストビューに空行のアイテムが表示されます。

2. コード部分

以下のコードで、ListView(TopTaskView)に値をセットします。

TopTaskView.ItemsSource = new string[]
{
    "item 1111111111111",
    "item 2222222222222",
    "item 3333333333333",
};

TopTaskView_ItemTappedイベントは、タップしたアイテム名がアラートで表示されるようにしています。

以下のように、e.Item.ToString()で、タップしたアイテム名を取得します。

void TopTaskView_ItemTapped(System.Object sender, Xamarin.Forms.ItemTappedEventArgs e)
{
    await DisplayAlert("title", e.Item.ToString(), "ok");
}

3. 実行結果

以下のように表示されれば成功です。

リストビューができました。 pic.twitter.com/0kGE7bKcH4

— はる🐱 (@Harus0313) November 11, 2020

4. ソースコード全文

今回のソースコードの全文を記載します。

• MainPage.xaml

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="todotimer.MainPage">
    <StackLayout>
        <Label Text="Todo Timer" HorizontalTextAlignment="Start" FontSize="24" />
        <Label Text="Today's Task" HorizontalTextAlignment="Start" FontSize="24" />
        <ScrollView>
            <StackLayout>
                <ListView x:Name="TopTaskView" ItemTapped="TopTaskView_ItemTapped" HasUnevenRows="False" RowHeight="40">
                </ListView>
            </StackLayout>
        </ScrollView>

    </StackLayout>
</ContentPage>

• MainPage.xaml.cs

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace todotimer
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();

            TopTaskView.ItemsSource = new string[]
            {
                "item 1111111111111",
                "item 2222222222222",
                "item 3333333333333",
            };

        }

        void TopTaskView_ItemTapped(System.Object sender, Xamarin.Forms.ItemTappedEventArgs e)
        {
            await DisplayAlert("title", e.Item.ToString(), "ok");

        }
    }
}