(.NET MAUI) CollectionView 데이터의 가로 표시

이전 게시물에 이어 CollectionView 데이터를 가로로 표시할 수 있습니다.

CollectionView의 ItemsLayout을 HorizontalList로 변경하여 항목을 가로로 나열할 수 있습니다.

MainPage.xaml( listview2 )

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="Maui.CollectionViewTest.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

    <Grid RowDefinitions="*,*">
        <CollectionView x:Name="listview" ItemsLayout="VerticalGrid, 2">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Button
                        Margin="10"
                        ClassId="{Binding .}"
                        Text="{Binding ., StringFormat="{0} 번"}" />
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>

        <CollectionView
            x:Name="listview2"
            Grid.Row="1"
            ItemsLayout="HorizontalList">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Button
                        Margin="10"
                        ClassId="{Binding .}"
                        HeightRequest="160"
                        Text="{Binding ., StringFormat="{0} DAY"}" />
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </Grid>
</ContentPage>

MainPage.xaml.cs

namespace Maui.CollectionViewTest;

public partial class MainPage : ContentPage
{

    public MainPage()
    {
        InitializeComponent();

        List<string> list = new List<string>();

        for (int i = 1; i <= 25; i++)
        {
            list.Add(i.ToString());
        }

        this.listview.ItemsSource = list;

        this.listview2.ItemsSource = list;
    }
}

결과

(버튼이 아래에 가로로 나열된 것을 볼 수 있습니다.)

(원천)
https://github.com/kei-soft/Maui.CollectionViewTest