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

이전 포스팅에 이어서 CollectionView 데이터 가로로 나타내는 방법입니다.

2023.03.18 - [C#/Xamarin Maui] - [.NET MAUI] CollectionView 데이터 2열로 나타내기

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

결과

(아래쪽 버튼들은 가로로 나열된걸 확인할 수 있습니다.)

 

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

GitHub - kei-soft/Maui.CollectionViewTest