[.NET MAUI] CollectionView 데이터 2열로 나타내기

데이터 바인딩 시 데이터를 2열로 나타내려면 CollectionView 를 이용하여 처리 할 수 있습니다.

MainPage.xaml

<?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">

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

</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;
    }
}

위 코드에서 볼수 있듯이 CollectionView 의 ItemsLayout 을 이용하여 열의 수를 지정할 수 있습니다.

결과 
(ItemsLayout="VerticalGrid, 2")

(ItemsLayout="VerticalGrid, 3")

[Source]
https://github.com/kei-soft/Maui.CollectionViewTest

GitHub - kei-soft/Maui.CollectionViewTest