[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] IncrementalLoadingCollection 클래스 : 증분 로딩 컬렉션 만들기

■ IncrementalLoadingCollection<TSource, TItem> 클래스를 사용해 증분 로딩 컬렉션을 만드는 방법을 보여준다.

※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다.
※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType 태그를 None으로 추가했다.

▶ Person.cs


namespace TestProject;

/// <summary>
/// 사람
/// </summary>
public class Person
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Property
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 성명 - Name

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

    #endregion
}

namespace TestProject;

/// <summary>

/// 사람

/// </summary>

public class Person

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Property

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 성명 - Name

/// <summary>

/// 성명

/// </summary>

public string Name { get; set; }

#endregion

}

▶ PersonSource.cs


using System.Collections.Generic;
using System.Linq;
using System.Threading;
using System.Threading.Tasks;

using CommunityToolkit.WinUI.Collections;

namespace TestProject;

/// <summary>
/// 사람 소스
/// </summary>
public class PersonSource : IIncrementalSource<Person>
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Field
    ////////////////////////////////////////////////////////////////////////////////////////// Private

    #region Field

    /// <summary>
    /// 사람 리스트
    /// </summary>
    private readonly List<Person> personList;

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 생성자 - PeopleSource()

    /// <summary>
    /// 생성자
    /// </summary>
    public PersonSource()
    {
        this.personList = new List<Person>();

        for(int i = 1; i <= 200; i++)
        {
            Person person = new Person { Name = "Person " + i };

            this.personList.Add(person);
        }
    }

    #endregion

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

    #region 페이지 항목 열거 가능형 구하기 (비동기) - GetPagedItemsAsync(pageIndex, pageSize, cancellationToken))

    /// <summary>
    /// 페이지 항목 열거 가능형 구하기 (비동기)
    /// </summary>
    /// <param name="pageIndex">페이지 인덱스</param>
    /// <param name="pageSize">페이지 크기</param>
    /// <param name="cancellationToken">취소 토큰</param>
    /// <returns>페이지 항목 열거 가능형</returns>
    public async Task<IEnumerable<Person>> GetPagedItemsAsync(int pageIndex, int pageSize, CancellationToken cancellationToken = default(CancellationToken))
    {
        IEnumerable<Person> personEnumerable = (from person in personList select person).Skip(pageIndex * pageSize).Take(pageSize);

        if(pageIndex == 0)
        {
            await Task.Delay(2000);
        }
        else
        {
            await Task.Delay(1000);
        }

        return personEnumerable;
    }

    #endregion
}

using System.Collections.Generic;

using System.Linq;

using System.Threading;

using System.Threading.Tasks;

using CommunityToolkit.WinUI.Collections;

namespace TestProject;

/// <summary>

/// 사람 소스

/// </summary>

public class PersonSource : IIncrementalSource<Person>

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Field

////////////////////////////////////////////////////////////////////////////////////////// Private

#region Field

/// <summary>

/// 사람 리스트

/// </summary>

private readonly List<Person> personList;

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - PeopleSource()

/// <summary>

/// 생성자

/// </summary>

public PersonSource()

{

this.personList = new List<Person>();

for(int i = 1; i <= 200; i++)

{

Person person = new Person { Name = "Person " + i };

this.personList.Add(person);

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

#region 페이지 항목 열거 가능형 구하기 (비동기) - GetPagedItemsAsync(pageIndex, pageSize, cancellationToken))

/// <summary>

/// 페이지 항목 열거 가능형 구하기 (비동기)

/// </summary>

/// <param name="pageIndex">페이지 인덱스</param>

/// <param name="pageSize">페이지 크기</param>

/// <param name="cancellationToken">취소 토큰</param>

/// <returns>페이지 항목 열거 가능형</returns>

public async Task<IEnumerable<Person>> GetPagedItemsAsync(int pageIndex, int pageSize, CancellationToken cancellationToken = default(CancellationToken))

{

IEnumerable<Person> personEnumerable = (from person in personList select person).Skip(pageIndex * pageSize).Take(pageSize);

if(pageIndex == 0)

{

await Task.Delay(2000);

}

else

{

await Task.Delay(1000);

}

return personEnumerable;

}

#endregion

}

▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8"?>
<Page x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid Margin="10"
        HorizontalAlignment="Left">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*"    />
        </Grid.RowDefinitions>
        <StackPanel Grid.Row="0"
            HorizontalAlignment="Left">
            <TextBlock
                TextWrapping="Wrap"
                Text="Items are loaded incrementally when the view needs to show them (i.e., when the user scrolls the ListView)" />
            <Button Name="refreshCollectionButton"
                Style="{StaticResource AccentButtonStyle}"
                Margin="0 10 0 10"
                Content="Refresh collection" />
            <TextBlock>
                <Run Text="Is loading :" />
                <Run
                    FontWeight="SemiBold"
                    Text="{Binding IsLoading, Mode=OneWay}" />
            </TextBlock>
            <TextBlock>
                <Run Text="Has more items :" />
                <Run
                    FontWeight="SemiBold"
                    Text="{Binding HasMoreItems, Mode=OneWay}" />
            </TextBlock>
        </StackPanel>
        <Grid Grid.Row="2"
            VerticalAlignment="Top"
            Margin="0 20 0 0"
            BorderThickness="1"
            BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
            CornerRadius="4"
            Background="{ThemeResource CardBackgroundFillColorDefaultBrush}">
            <ListView Name="listView">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition />
                            </Grid.ColumnDefinitions>
                            <Image Grid.Column="0"
                                VerticalAlignment="Center"
                                Width="24"
                                Height="24"
                                Source="ms-appx:///Assets/AppIcon.png" />
                            <TextBlock Grid.Column="1"
                                VerticalAlignment="Center"
                                Margin="10"
                                Text="{Binding Name}" />
                        </Grid>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </Grid>
    </Grid>
</Page>

<?xml version="1.0" encoding="utf-8"?>

<Page x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid Margin="10"

HorizontalAlignment="Left">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<StackPanel Grid.Row="0"

HorizontalAlignment="Left">

<TextBlock

TextWrapping="Wrap"

Text="Items are loaded incrementally when the view needs to show them (i.e., when the user scrolls the ListView)" />

<Button Name="refreshCollectionButton"

Style="{StaticResource AccentButtonStyle}"

Margin="0 10 0 10"

Content="Refresh collection" />

<Run

FontWeight="SemiBold"

Text="{Binding IsLoading, Mode=OneWay}" />

</TextBlock>

<Run

FontWeight="SemiBold"

Text="{Binding HasMoreItems, Mode=OneWay}" />

</TextBlock>

</StackPanel>

<Grid Grid.Row="2"

VerticalAlignment="Top"

Margin="0 20 0 0"

BorderThickness="1"

BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"

CornerRadius="4"

Background="{ThemeResource CardBackgroundFillColorDefaultBrush}">

<ListView.ItemTemplate>

<Grid>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Image Grid.Column="0"

VerticalAlignment="Center"

Width="24"

Height="24"

Source="ms-appx:///Assets/AppIcon.png" />

<TextBlock Grid.Column="1"

VerticalAlignment="Center"

Margin="10"

Text="{Binding Name}" />

</Grid>

</DataTemplate>

</ListView.ItemTemplate>

</ListView>

</Grid>

</Page>

▶ MainPage.xaml.cs


using System.Collections.ObjectModel;

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;

using CommunityToolkit.WinUI.Collections;

namespace TestProject;

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

    #region 생성자 - MainPage()

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

        IncrementalLoadingCollection<PersonSource, Person> collection = new IncrementalLoadingCollection<PersonSource, Person>();

        this.listView.ItemsSource = collection;

        DataContext = collection;

        this.refreshCollectionButton.Click += refreshCollectionButton_Click;
    }

    #endregion

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

    #region Refresh collection 버튼 클릭시 처리하기 - refreshCollectionButton_Click(sender, e)

    /// <summary>
    /// Refresh collection 버튼 클릭시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private async void refreshCollectionButton_Click(object sender, RoutedEventArgs e)
    {
        IncrementalLoadingCollection<PersonSource, Person> collection = this.listView.ItemsSource as IncrementalLoadingCollection<PersonSource, Person>;

        await collection.RefreshAsync();
    }

    #endregion
}

using System.Collections.ObjectModel;

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Controls;

using CommunityToolkit.WinUI.Collections;

namespace TestProject;

/// <summary>

/// 메인 페이지

/// </summary>

public sealed partial class MainPage : Page

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

IncrementalLoadingCollection<PersonSource, Person> collection = new IncrementalLoadingCollection<PersonSource, Person>();

this.listView.ItemsSource = collection;

DataContext = collection;

this.refreshCollectionButton.Click += refreshCollectionButton_Click;

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

#region Refresh collection 버튼 클릭시 처리하기 - refreshCollectionButton_Click(sender, e)

/// <summary>

/// Refresh collection 버튼 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private async void refreshCollectionButton_Click(object sender, RoutedEventArgs e)

{

IncrementalLoadingCollection<PersonSource, Person> collection = this.listView.ItemsSource as IncrementalLoadingCollection<PersonSource, Person>;

await collection.RefreshAsync();

}

#endregion

}

TestProject.zip