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プロパティと併用すると、リストビューには値のある行しか表示されません。HasUnevenRowsRowHeightプロパティを定義しない場合、リストビューに空行のアイテムが表示されます。

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. 実行結果

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

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");

        }
    }
}

速攻でメモできる QuickNote リリースしました!

QuickNoteは動作が超軽量でサクサクかけるノートアプリです。一瞬の閃きを逃さずにノートを開き書き始めることができます。 アカウント登録も不要です。お試しあれ!

Excel操作をコマンドで! proBoarderExcel

Excelはマウスで操作するのが基本ですが、マウス操作に疲れてはいませんか? キーボードでExcel操作ができるようになるアプリです。オープンソースで無料です。

積み上げ! Daily Stack リリースしました!

Daily Stack は日々の積み上げを管理するToDoアプリです。過去の積み上げの振り返りだけでなく、ツイート機能もあります。 アカウント登録不要ですぐに使い始めることができます。

ExecNote.app リリースしました!

ExecNoteは、コードが実行できるMarkdownアプリケーションです。Markdownドキュメント内に記載したコードをクリックすると実行ができます。わざわざターミナルを 起動させる必要がありません!無料ですのでもしよければダウンロードをお願いします。

About Me

11年目のシステムエンジニアです。アプリで生活や仕事を改善したい🐱仕事効率化、自動化のアプリ開発が得意です、ご相談ください。 🚀エンタメ系アプリの開発も模索中🐬社内SEや個人アプリ開発者、システムエンジニアになりたい人と繋がりたい🐱