.NET MAUI SfListView Grouping 처리하기 - Syncfusion

.NET MAUI SfListView Grouping 처리하기 - Syncfusion

 

이전 포스팅에 설치 및 셋팅 과정은 참고합니다.

2024.05.02 - [코딩/.NET MAUI] - .NET MAUI SfListView 컨트롤 사용하기 - Syncfusion

SfListViewTestView.xaml 에서 Grouping 할 데이터 기준으로 아래 코드에서 보듯이

SfListView.GroupHeaderTemplate 를 정의하여 어떻게 표시할지 정의합니다.

아래 내용은 헤더에 키에 해당하는 내용을 보여주고 키에 해당하는 item 갯수를 보여주도록 합니다.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="MauiApp1.SfListViewTestView"
             xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:syncfusion="clr-namespace:Syncfusion.Maui.ListView;assembly=Syncfusion.Maui.ListView"
             xmlns:sys="clr-namespace:System;assembly=netstandard"
             xmlns:local="clr-namespace:MauiApp1.Defines"
             xmlns:data="clr-namespace:Syncfusion.Maui.DataSource;assembly=Syncfusion.Maui.DataSource"
             Title="SfListView"
             BackgroundColor="White">
    <ContentPage.Resources>
        <x:Double x:Key="fontSize">24</x:Double>
        <OnPlatform x:Key="textColor" x:TypeArguments="Color">
            <On Platform="iOS" Value="Red" />
            <On Platform="Android" Value="LightGray" />
            <On Platform="UWP" Value="#80FF80" />
        </OnPlatform>
    </ContentPage.Resources>
    <Grid Padding="10">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <!--<RowDefinition Height="Auto"/>-->
        </Grid.RowDefinitions>
        <!--<Label 
            Text="{x:Static local:Constants.SfListViewTitle}"
            FontSize="{StaticResource fontSize}" 
            TextColor="{StaticResource textColor}" 
            HorizontalOptions="Center" 
            Margin="5">
            <Label.Text>
                <x:Static Member="local:Constants.SfListViewTitle"/>
            </Label.Text>
        </Label>-->
        <SearchBar 
            x:Name="filterText"
            HeightRequest="40"
            Grid.Row="0" 
            Placeholder="Search.."
            TextChanged="OnFilterTextChanged"
            TextColor="Black"/>
        <syncfusion:SfListView
            Margin="5"
            Grid.Row="1" 
            x:Name="listView"
            ItemSize="100" 
            ItemsSource="{Binding BookInfo}"
            SelectionBackground="Skyblue">
            <syncfusion:SfListView.ItemsLayout>
                <syncfusion:LinearLayout />
            </syncfusion:SfListView.ItemsLayout>
            <syncfusion:SfListView.SelectedItemTemplate>
                <DataTemplate>
                    <Grid x:Name="grid" BackgroundColor="RoyalBlue">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="0.4*" />
                            <RowDefinition Height="0.6*" />
                        </Grid.RowDefinitions>
                        <Label Text="{Binding BookName}"  FontAttributes="Bold" TextColor="Black" FontSize="25"  />
                        <Label Grid.Row="1" Text="{Binding BookDescription}"  TextColor="White" FontSize="16"/>
                    </Grid>
                </DataTemplate>
            </syncfusion:SfListView.SelectedItemTemplate>
            <syncfusion:SfListView.ItemTemplate>
                <DataTemplate>
                    <Grid Padding="10">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="0.4*" />
                            <RowDefinition Height="0.6*" />
                        </Grid.RowDefinitions>
                        <Label Text="{Binding BookName}" FontAttributes="Bold" TextColor="Blue" FontSize="21" />
                        <Label Grid.Row="1" Text="{Binding BookDescription}" TextColor="Teal" FontSize="15"/>
                    </Grid>
                </DataTemplate>
            </syncfusion:SfListView.ItemTemplate>
            <syncfusion:SfListView.GroupHeaderTemplate>
                <DataTemplate>
                    <Grid BackgroundColor="#E4E4E4">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <StackLayout Orientation="Horizontal" HorizontalOptions="Start"
                   VerticalOptions="Center" >
                            <Label Text="  " TextColor="Black" />
                            <Label Text="{Binding Key}" TextColor="Black"/>
                        </StackLayout>
                        <StackLayout Orientation="Horizontal" Grid.Column="1"
                   HorizontalOptions="EndAndExpand" VerticalOptions="Center">
                            <Label Text="{Binding Count}" TextColor="Blue" FontAttributes="Bold"/>
                            <Label Text=" Count " TextColor="Black" />
                        </StackLayout>
                    </Grid>
                </DataTemplate>
            </syncfusion:SfListView.GroupHeaderTemplate>
        </syncfusion:SfListView>
    </Grid>
</ContentPage>

 

아래 코드를 보면 알수 있듯이 DataSource 의 GroupDescriptors 에 GroupDescriptor 를 추가합니다.

여기에서는 Grouping 할 key 를 BookName 의 첫번째 문자열 기준으로 정의하고 있습니다.

SfListViewTestView.xaml.cs 에서 

// 그룹핑
listView.DataSource.GroupDescriptors.Add(new GroupDescriptor()
{
	PropertyName = "BookName",
	KeySelector = (object bookInfo) =>
	{
		var item = (bookInfo as BookInfo);
		return item.BookName[0].ToString();
	}
});

 

결과

위 결과를 보면 책 이름의 첫번째 영문자 기준으로 Grouping 하여 A,B,C,D..... Grouping Key 와 갯수를 보여줍니다.

소스
https://github.com/kei-soft/MauiApp

GitHub - kei-soft/MauiApp