Item Border Customization in .NET MAUI ListView (SfListView)

26 Jun 20254 minutes to read

This section explains how to customize item borders in the .NET MAUI ListView (SfListView) using the built-in APIs.

Enable Item Border

The SfListView allows applying borders to each item by setting the ShowItemBorder property to true. By default, item borders are not displayed. You can customize the color, thickness, margin, and corner radius of the borders using the respective APIs.

Property Description

ShowItemBorder

 Enables or disables the visibility of item borders. (Default: false)

ItemBorderColor

 Sets the color of the item border.

ItemBorderThickness

 Defines the border thickness for each side of the item.

ItemBorderMargin

 Sets the margin around the border within the item.

ItemBorderRadius

 Sets the corner radius of the item border.

NOTE

ItemBorderRadius is applicable only when ItemBorderThickness has uniform values on all sides.

<syncfusion:SfListView x:Name="listView"
                       ShowItemBorder="True"
                       ItemsSource="{Binding BookInfo}">
    <syncfusion:SfListView.ItemTemplate>
        <DataTemplate>
            <StackLayout Padding="5">
                <Label Text="{Binding BookName}" FontAttributes="Bold" />
                <Label Text="{Binding BookDescription}" />
            </StackLayout>
        </DataTemplate>
    </syncfusion:SfListView.ItemTemplate>
</syncfusion:SfListView>
listView.ShowItemBorder = true;

MAUI ListView Border Example

Border Customization

After enabling the item border, you can customize its appearance using the following properties:

<syncfusion:SfListView x:Name="listView"
                       ItemSize="60"
                       ShowItemBorder="True"
                       ItemBorderColor="Black"
                       ItemBorderThickness="2"
                       ItemBorderMargin="5,2,5,2"
                       ItemBorderRadius="20,0,0,20"
                       ItemsSource="{Binding BookInfo}">
    <syncfusion:SfListView.ItemTemplate>
        <DataTemplate>
            <StackLayout Padding="5">
                <Label Text="{Binding BookName}" FontAttributes="Bold" />
                <Label Text="{Binding BookDescription}" />
            </StackLayout>
        </DataTemplate>
    </syncfusion:SfListView.ItemTemplate>
</syncfusion:SfListView>
listView.ShowItemBorder = true;
listView.ItemBorderColor = Colors.Black;
listView.ItemBorderThickness = new Thickness(2);
listView.ItemBorderMargin = new Thickness(2);
listView.ItemBorderRadius = new CornerRadius(20,0,0,20);

MAUI ListView Border Example

Limitations

See Also