Corner radius of overall listview

[Spencer Bosley]

Hello,

I was wondering how I could round the corners of the overall listview. I don't want a radius on my items, but the whole listview itself.

Thanks!

[SaiGanesh Sakthivel]

Hi Spencer, 

 

Thank you for contacting syncfusion support. 

 

#Regarding Corner radius of overall listview 

We would like to inform you that you can achieve your requirement by using SfListView inside the frame and set the corner radius for the frame. Please refer to the following code snippet for your reference. 

 

Code Snippet 

<StackLayout Padding="5"> 

    <Frame BorderColor="Red" CornerRadius="25"> 

        <syncfusion:SfListView x:Name="listView"  

                        ItemSpacing="1"  

                        AutoFitMode="Height"  

                        BackgroundColor="AliceBlue" 

                        ItemsSource="{Binding contactsinfo}"> 

            <syncfusion:SfListView.ItemTemplate > 

                <DataTemplate> 

                    <ViewCell> 

                        <ViewCell.View> 

                            <Grid x:Name="grid" RowSpacing="0"> 

                                <Grid.RowDefinitions> 

                                    <RowDefinition Height="*" /> 

                                    <RowDefinition Height="1" /> 

                                </Grid.RowDefinitions> 

                                <Grid RowSpacing="0"> 

                                    <Grid.ColumnDefinitions> 

                                        <ColumnDefinition Width="70" /> 

                                        <ColumnDefinition Width="*" /> 

                                        <ColumnDefinition Width="Auto" /> 

                                    </Grid.ColumnDefinitions> 

 

                                    <Image Source="{Binding ContactImage}" 

                VerticalOptions="Center" 

                HorizontalOptions="Center" 

                HeightRequest="50" WidthRequest="50"/> 

 

                                    <Grid Grid.Column="1" 

                RowSpacing="1" 

                Padding="10,0,0,0" 

                VerticalOptions="Center"> 

                                        <Grid.RowDefinitions> 

                                            <RowDefinition Height="*" /> 

                                            <RowDefinition Height="*" /> 

                                        </Grid.RowDefinitions> 

 

                                        <Label LineBreakMode="NoWrap" 

                    TextColor="#474747" 

                    Text="{Binding ContactName}"> 

 

                                        </Label> 

                                        <Label Grid.Row="1" 

                    Grid.Column="0" 

                    TextColor="#474747" 

                    LineBreakMode="NoWrap" 

                    Text="{Binding ContactNumber}"> 

 

                                        </Label> 

                                    </Grid> 

                                    <Grid Grid.Row="0" 

                Grid.Column="2" 

                RowSpacing="0" 

                HorizontalOptions="End" VerticalOptions="Start"> 

 

                                        <Label LineBreakMode="NoWrap" 

                    TextColor="#474747" 

                    Text="{Binding ContactType}"> 

                                        </Label> 

                                    </Grid> 

                                </Grid> 

                            </Grid> 

                        </ViewCell.View> 

                    </ViewCell> 

                </DataTemplate> 

            </syncfusion:SfListView.ItemTemplate> 

        </syncfusion:SfListView> 

    </Frame> 

</StackLayout> 

 

Please refer to the following tested sample for your reference. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ListViewXamarin1463353953 

 

Please let us know if you have any concern. 

 

Regards, 

SaiGanesh Sakthivel