.NET MAUI ListViiew を使う

公式ドキュメントはこちら

ListView - .NET MAUI | Microsoft Docs

画面遷移の記事のアプリに ListView を配置してみる。

MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp14.MainPage">
             
    <ScrollView>
        <VerticalStackLayout 
            Spacing="25" 
            Padding="30,0" 
            VerticalOptions="Start">

            <ListView x:Name="TodoListView" SeparatorVisibility="Default">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <TextCell Text="{Binding Title}" Detail="{Binding Detail}" />
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
            
            <Button 
                x:Name="MoveBtn"
                Text="追加"
                Clicked="OnMoveClicked"
                HorizontalOptions="End" />
            
        </VerticalStackLayout>
    </ScrollView>
 </ContentPage>

MainPage.xaml.cs

namespace MauiApp14;

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

        var items = new List<TodoItem>();
        items.Add(new TodoItem("牛乳買う", "おいしい牛乳を希望"));
        items.Add(new TodoItem("お茶買う", "おいしいお茶を希望"));

        TodoListView.ItemsSource = items;
    }

    private async void OnMoveClicked(object sender, EventArgs e)
    {
        await Shell.Current.GoToAsync(nameof(NewPage1));
    }
}

public sealed class TodoItem
{
    public TodoItem(string title, string detail)
    {
        Title = title;
        Detail = detail;
    }
    
    public string Title { get; set; }
    public string Detail { get; set; }
}

実行

デフォルトのままだとリストは質素な感じ…。 マウスオーバーでリストの背景がグレーになったり クリックすると選択されたりする。

次回

リストのデザインを何とかしたけど、入力画面の作り込みをやります。