[C#/MAUI/.NET6] CollectionView 클래스 : RemainingItemsThresholdReached 이벤트를 사용해 데이터를 점진적으로 로드하기

TestProject.zip

0.15MB

▶ Monkey.cs

namespace TestProject;

/// <summary>
/// 원숭이
/// </summary>
public class Monkey
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Property
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 명칭 - Name

    /// <summary>
    /// 명칭
    /// </summary>
    public string Name { get; set; }

    #endregion
    #region 위치 - Location

    /// <summary>
    /// 위치
    /// </summary>
    public string Location { get; set; }

    #endregion
    #region 이미지 URL - ImageURL

    /// <summary>
    /// 이미지 URL
    /// </summary>
    public string ImageURL { get; set; }

    #endregion
}

 

728x90

 

▶ ImageSourceConverter.cs

using System.Globalization;

namespace TestProject;

/// <summary>
/// 이미지 URL→이미지 소스 변환자
/// </summary>
public class ImageSourceConverter : IValueConverter
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 변환하기 - Convert(sourceValue, targetType, parameter, cultureInfo)

    /// <summary>
    /// 변환하기
    /// </summary>
    /// <param name="sourceValue">소스 값</param>
    /// <param name="targetType">타겟 타입</param>
    /// <param name="parameter">매개 변수</param>
    /// <param name="cultureInfo">문화 정보</param>
    /// <returns>변환 값</returns>
    public object Convert(object sourceValue, Type targetType, object parameter, CultureInfo cultureInfo)
    {
        string imageURL = sourceValue as string;

        if(string.IsNullOrWhiteSpace(imageURL))
        {
            return null;
        }

        return ImageSource.FromUri(new Uri(imageURL));
    }

    #endregion
    #region 역변환하기 - ConvertBack(sourceValue, targetType, parameter, cultureInfo)

    /// <summary>
    /// 역변환하기
    /// </summary>
    /// <param name="sourceValue">소스 값</param>
    /// <param name="targetType">타겟 타입</param>
    /// <param name="parameter">매개 변수</param>
    /// <param name="cultureInfo">문화 정보</param>
    /// <returns>역변환 값</returns>
    public object ConvertBack(object sourceValue, Type targetType, object parameter, CultureInfo cultureInfo)
    {
        throw new NotImplementedException();
    }

    #endregion
}

 

300x250

 

▶ MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject">
    <ContentPage.Resources>
        <local:ImageSourceConverter x:Key="ImageSourceConverterKey" />
    </ContentPage.Resources>
    <CollectionView x:Name="collectionView">
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Grid
                    Padding="10"
                    RowDefinitions="Auto"
                    ColumnDefinitions="Auto,10,*">
                    <Image Grid.Column="0"
                        WidthRequest="60"
                        HeightRequest="60"
                        Aspect="AspectFill"
                        Source="{Binding ImageURL, Converter={StaticResource ImageSourceConverterKey}}" />
                    <StackLayout Grid.Column="2">
                        <Label
                            FontAttributes="Bold"
                            FontSize="16"
                            Text="{Binding Name}" />
                        <Label
                            VerticalOptions="End"
                            FontAttributes="Italic"
                            Text="{Binding Location}" />
                    </StackLayout>
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentPage>

 

반응형

 

▶ MainPage.xaml.cs

namespace TestProject;

/// <summary>
/// 메인 페이지
/// </summary>
public partial class MainPage : ContentPage
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 생성자 - MainPage()

    /// <summary>
    /// 생성자
    /// </summary>
    public MainPage()
    {
        InitializeComponent();

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

        for(int i = 0; i < 10; i++)
        {
            list.Add
            (
                new Monkey
                {
                    Name     = "Baboon",
                    Location = "Africa and Asia",
                    ImageURL = "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"
                }
            );

            list.Add
            (
                new Monkey
                {
                    Name     = "Capuchin Monkey",
                    Location = "Central and South America",
                    ImageURL = "https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Capuchin_Costa_Rica.jpg/200px-Capuchin_Costa_Rica.jpg"
                }
            );

            list.Add
            (
                new Monkey
                {
                    Name     = "Blue Monkey",
                    Location = "Central and East Africa",
                    ImageURL = "https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/BlueMonkey.jpg/220px-BlueMonkey.jpg"
                }
            );
        }

        this.collectionView.ItemsSource = list;

        this.collectionView.RemainingItemsThreshold = 1;

        this.collectionView.RemainingItemsThresholdReached += collectionView_RemainingItemsThresholdReached;
    }

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Private

    #region 컬렉션 뷰 잔혀 항목 임계치 도달시 처리하기 - collectionView_RemainingItemsThresholdReached(sender, e)

    /// <summary>
    /// 컬렉션 뷰 잔혀 항목 임계치 도달시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private async void collectionView_RemainingItemsThresholdReached(object sender, EventArgs e)
    {
        await DisplayAlert("INFORMATION", "RemainingItemsThresholdReached 이벤트가 발생했습니다.", "확인");

        this.collectionView.RemainingItemsThreshold = -1; // 테스트를 위한 설정이다.
    }

    #endregion
}