Selected color not going over item when putting background color on data template

[Gerard De Leon]

Hello

When I put a background color on a data template for a listview, the highlight color when I select the item on the list does not appear on the cell anymore. I need each item on the list to have a white background, but also need it to be highlighted when selected as normal.

I tried setting the background color of the list view to white, but that caused the whole list to turn white, I only need the items to have a white background.

Is this possible?

Thanks

[Dinesh Babu Yadav]

Hi Gerard, 

 

Sorry for the inconvenience caused. 

 

By default, when background color is defined for DataTemplate and performing selection, the background color is not updated for the selected item and this is the actual behavior.. However, the reported requirement “Item background color should be highlighted when selection is performed and background color is defined for DataTemplate” can be achieved by a workaround with customizing the data model and by using custom convertor. In the data model, define a IsSelected property which indicates whether the item is selected or not and when selection is performed, need to update IsSelected property in the data model to trigger the custom convertor class, which you have bind it to Grid in the ItemTemplate property. You can achieve this by using the SelectionChanged event as like below code snippet,  

  

Code Example[C#]: 

Updating IsSelected value when Selection is performed 

private void ListView_OnSelectionChanged(object sender, ItemSelectionChangedEventArgs e) 

{ 

  for (int i = 0; i < e.AddedItems.Count; i++) 

  { 

    var item = e.AddedItems[i]; 

    (item as MusicInfo).IsSelected = true; 

  } 

  for (int i = 0; i < e.RemovedItems.Count; i++) 

  { 

    var item = e.RemovedItems[i]; 

    (item as MusicInfo).IsSelected = false; 

  } 

} 

 

Custom Convertor 

public class SelectionBoolToBackGroundColorConverter : IValueConverter 

{ 

  public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 

  { 

    return (bool)value == true ? Color.Blue : Color.White; 

  } 

 

  public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 

  { 

    throw new NotImplementedException(); 

  } 

} 

 

Code Example[XAML]:  

<sync:SfListView x:Name="listView" SelectionGesture="Tap"  

                 SelectionMode="Single" AutoFitMode="Height"  

                 SelectionChanged="ListView_OnSelectionChanged" ItemSize="70">  

        

 <sync:SfListView.ItemTemplate>  

  <DataTemplate x:Name="ItemTemplate"  x:Key="ItemTemplate">  

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

           BackgroundColor="{Binding Path=IsSelected,  Converter={StaticResource BoolToColorConverter}}">  

…   

     </Grid>  

 </DataTemplate>  

</sync:SfListView.ItemTemplate>  

</sync:SfListView>  

 

For your reference, we have attached the working sample which change the background color of the Grid based on the IsSelected property from the Custom Convertor class(returns the desired color based on the IsSelected value) and by default the background color of item will be White and after selection is performed the background color is changed to Blue. You can download the sample from the below link.  

  

Sample: https://www.syncfusion.com/downloads/support/forum/130721/ze/CustomSelection689840273  

 

You can also change the background color for the selected items by using SelectionBackgroundColor property and please refer the following UG documentation link for more reference.  

  

Link: https://help.syncfusion.com/xamarin/sflistview/selection#selection-background-color  

  

Please let us know if you require further assistance.  

 

Regards, 

Dinesh Babu Yadav 

 

[Nicolai]

Hi,

this helped me to understand my problem. Thanks for the example. Any chance we can some day change the default behavior so that selecting a item does replace a defined background color? No more custom code needed that way

[Muthu Kumaran Gnanavinayagam]

Hi Schönberg, 

 

Currently we do not have support for “Customizing the SelectedItem UI”. We have already considered this as feature request and added it to our feature request list. The reported feature is a tentative feature and it will be available in any of our upcoming releases. We will let you know once the feature has been implemented.  

 

Regards, 

G. Muthu Kumaran. 

[Solomon Fried]

There are 2 other solutions to this.

If you create a Margin on your DataTemplate (let's say 5). then the selected Item background blue color will appear as a border around the item.

Another option I have chosen is to set the background color of the item with some transparency 

such as BackgroundColor="#CCFFFFFF"

Then when it is selected, the blue background will bleed through.

I do agree though that a simple solution would be to add a SelectedBackgroundColor property to the SfListView. and it would switch between that and BackgroundColor as needed.

[Lakshmi Natarajan]

Hi Solomon, 

 

Thank you for using Syncfusion products. 

 

We have checked the reported query “Selected color not going over item when putting background color on data template” from our side. We would like to inform you that the SfListView support you to customize the SelectedItem using the SelectedItemTemplate, in which you can provide the BackgroundColor for the SelectedItem. In this case, even if the view loaded in the ItemTemplate has BackgroundColor, the SelectedItemTemplate will override the ItemTemplate. 

 

Please refer to our user guidance document regarding the same, 

UG link: https://help.syncfusion.com/xamarin/listview/selection#selected-item-customization 

 

Please let us know if you need further assistance.  

 

Regards, 

Lakshmi Natarajan