Applying border in ListView rows and gap between rows

Question

Hi Team,

I am working on a .Net MAUI app (in Visual Studio 2022), Android emulator used is Pixel 5 API 33.

I need to show data in ListView control, I need to show border around each row of list view and there should be gap between rows, Please let me know how to achieve this.

Thanks,

Salil

Answer 1

Hello,

need to show border around each row of list view

You can do this by adding Border control in the MAUI.

and there should be gap between rows.

Please set the HasUnevenRows="True" for your Listview, then you will get the gap between rows.

Here is my tested listview xaml.

  <ListView ItemsSource="{Binding Monkeys}"
                      SeparatorVisibility="None"
                      HasUnevenRows="True">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell >
                            <StackLayout  Orientation="Vertical">
                                <Border Stroke="Gray"
                                        StrokeThickness="2"
                                        StrokeShape="RoundRectangle 5"      
                                        VerticalOptions="FillAndExpand"
                                        HorizontalOptions="FillAndExpand"                                      
                                        >
                                    <VerticalStackLayout Padding="2">
                                        <Label
                                                Text="{Binding Name}"
                                                FontAttributes="Bold" />
                                    </VerticalStackLayout>
                                </Border>
                            </StackLayout>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.