How to remove or change the corner color on SfListView ?

[Sébastien]

You can see on the image that all corner have a very darkgray and I don't why.

You will see the code below. I put a darkgay background color on the stacklayout, but I always have a corner darker than the stacklayout background.

I try to put a darkgray background color and le sfListView, and it's always the same result.

Do you have any idea how to remove or change the corner color ?

Thank you,

<ContentPage.Content>

        <xForms:SfPullToRefresh

            x:Name="pullToRefresh"

            IsRefreshing="False"

            PullingThreshold="200"

            RefreshContentHeight="30"

            RefreshContentThreshold="30"

            RefreshContentWidth="30"

            TransitionMode="Push"

            Refreshing="PullToRefresh_OnRefreshing">

            <xForms:SfPullToRefresh.PullableContent>

                <StackLayout Spacing="0" Padding="0,5,0,0" BackgroundColor="DarkGray">

                    <xForms1:SfListView x:Name="TrainingListView"

                                        ItemsSource="{Binding NewsFeedInformationModels}"

                                        ItemSpacing="5,0,5,10" AutoFitMode="DynamicHeight" ItemSize="60"

                                        ItemTapped="TrainingListView_OnItemTapped"

                                        ItemAppearing="TrainingListView_OnItemAppearing"

                                        VerticalOptions="FillAndExpand"

                                        SelectionBackgroundColor="Transparent"

                                        Loaded="TrainingListView_OnLoaded">

                        <xForms1:SfListView.ItemTemplate>

                            <DataTemplate>

                                <Frame Padding="5,5,5,5" CornerRadius="7">

                                    <Grid>

                                        <Grid.RowDefinitions>

                                            <RowDefinition Height="Auto" />

                                            <RowDefinition Height="Auto" />

                                            <RowDefinition Height="Auto" />

                                            <RowDefinition Height="Auto" />

                                        </Grid.RowDefinitions>

                                        <Label Grid.Row="0" FontFamily="{StaticResource Montserrat-Bold}" FontSize="10">

                                            <Label.FormattedText>

                                                <FormattedString>

                                                    <Span Text="{helpers:Translate PublishedOn}" />

                                                    <Span Text="{Binding ReleaseDate, StringFormat='{0:dddd, d MMMM}'}" />

                                                </FormattedString>

                                            </Label.FormattedText>

                                        </Label>

                                        <Image Grid.Row="1"

                                               Source="{Binding ImageUrl}" />

                                        <Label Grid.Row="2" Text="Happy Birthday" FontSize="16" FontFamily="{StaticResource Montserrat-Medium}"></Label>

                                    </Grid>

                                </Frame>

                            </DataTemplate>

                        </xForms1:SfListView.ItemTemplate>

                    </xForms1:SfListView>

                </StackLayout>

            </xForms:SfPullToRefresh.PullableContent>

        </xForms:SfPullToRefresh>

    </ContentPage.Content>

[SaiGanesh Sakthivel]

Hi Sébastien, 

 

Thank you for the contacting syncfusion support. 

 

We have checked the reported query “how to change the corner color on SfListView” from our end. We would like to let you can change the corner color using FocusedBorderColor property in SfListView.   

 

You can achieve your requirement by binding the BackgroundColor of SfListView to the FocusedBorderColor property. Please refer the following Code Snippet. 

 

Code Snippet 

<StackLayout Spacing="0" Padding="0,5,0,0" BackgroundColor="DarkGray"> 

<sf:SfListView x:Name="TrainingListView" 

                ItemsSource="{Binding BookInfoCollections}" 

                ItemSpacing="5,0,5,10" AutoFitMode="DynamicHeight" ItemSize="60" 

                VerticalOptions="FillAndExpand" 

                FocusBorderColor="{Binding Source={x:Reference TrainingListView},Path=BackgroundColor}" 

                SelectionBackgroundColor="{Binding Source={x:Reference TrainingListView},Path=BackgroundColor}" 

                ItemAppearing="TrainingListView_ItemAppearing" 

                ItemTapped="TrainingListView_ItemTapped" 

                Loaded="TrainingListView_Loaded" 

                > 

 

We hope this helps. Please let us know, if need any further assistance. 

  

Regards, 

SaiGanesh Sakthivel

[Sébastien]

Hi,

I have the same issue even if I put your code suggestion.

I attached a zip file of my xaml and my ViewModel. Maybe it can help.

Best Regards,

Attachment: Mobile_e1f26f5a.zip

[Lakshmi Natarajan]

Hi Sebastian, 

 

Thank you for the update. 

 

We have checked the reported issue with the provided code snippet. We would like to let you know that we are able to reproduce the reported issue in Android platform. Currently, we are analyzing the issue with SfListView source. We will check further and update you the details on March 18, 2020. We appreciate your patience until then.  

 

Regards, 

Lakshmi Natarajan 

[SaiGanesh Sakthivel]

Hi Sébastien, 

 

Thank you for the patience. 

 

We have checked the reported query “how to remove the corner color on SfListView” from our end. We would like to let you to inform that you can resolved the issue by setting the property of HasShadow into false for the Frame inside the SfListView ItemTemplate. Please refer the following Code Snippet. 

 

Code Snippet 

<StackLayout Spacing="0" Padding="0,5,0,0" BackgroundColor="Yellow"> 

<xForms1:SfListView x:Name="TrainingListView" 

                    ItemsSource="{Binding Datas}" 

                    ItemSpacing="5,0,5,10" AutoFitMode="DynamicHeight" ItemSize="60" 

                    ItemTapped="TrainingListView_OnItemTapped" 

                    ItemAppearing="TrainingListView_OnItemAppearing" 

                    VerticalOptions="FillAndExpand"  

                    FocusBorderColor="{Binding Source={x:Reference     TrainingListView},Path=BackgroundColor}"  

                    SelectionBackgroundColor="{Binding Source={x:Reference TrainingListView},Path=BackgroundColor}"  

                    Loaded="TrainingListView_OnLoaded"> 

    <xForms1:SfListView.ItemTemplate> 

        <DataTemplate> 

            <Frame Padding="5,5,5,5" CornerRadius="7" HasShadow="False" BackgroundColor="AliceBlue"> 

 

We hope this helps. Please let us know, if need any further assistance. 

 

Regards, 

SaiGanesh Sakthivel