.NET MAUI SfListView 선택 항목에 대한 디자인 처리하기 - Syncfusion

 

.NET MAUI SfListView 선택 항목에 대한 디자인 처리하기 - Syncfusion

 

이전 포스팅에서 SfListView 사용방법에 대해서 알아봤습니다.

 

위 내용에 이어서 item 을 선택한 경우 선택한 아이템에 대한 디자인 처리 방법을 알아봅니다.

SelectionBackground="Skyblue" 를 이용하여 선택한 항목의 배경색 변경할 수 있습니다.

<?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"
             Title="SfListView"
             BackgroundColor="White">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <SearchBar 
            x:Name="filterText"
            HeightRequest="40"
            Placeholder="Search here to filter"
            TextChanged="OnFilterTextChanged"/>
        <syncfusion:SfListView
            Grid.Row="1" 
            x:Name="listView"
            ItemSize="100" 
            ItemsSource="{Binding BookInfo}"
            SelectionBackground="Skyblue">
            <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>
    </Grid>
</ContentPage>

 

또한, SelectedItemTemplate 을 이용해 커스텀하게 배경색과 글자색 글자 크기등을 변경할 수 있습니다.

<?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"
             Title="SfListView"
             BackgroundColor="White">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <SearchBar 
            x:Name="filterText"
            HeightRequest="40"
            Placeholder="Search here to filter"
            TextChanged="OnFilterTextChanged"/>
        <syncfusion:SfListView
            Grid.Row="1" 
            x:Name="listView"
            ItemSize="100" 
            ItemsSource="{Binding BookInfo}"
            SelectionBackground="Skyblue">
            <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>
    </Grid>
</ContentPage>

 

위 선택된 항목을 보면 알 수 있듯이 배경과 글자 색을 변경이 된 걸 확인할 수 있습니다.

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

GitHub - kei-soft/MauiApp