We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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

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

5 Replies

DB Dinesh Babu Yadav Syncfusion Team May 31, 2017 07:39 AM UTC

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.  
  
 
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.  
  
  
Please let us know if you require further assistance.  
 
Regards, 
Dinesh Babu Yadav 
 



NI Nicolai October 12, 2017 12:23 PM UTC

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



MK Muthu Kumaran Gnanavinayagam Syncfusion Team October 16, 2017 03:56 AM UTC

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. 



SF Solomon Fried April 14, 2021 06:23 PM UTC

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.


LN Lakshmi Natarajan Syncfusion Team April 15, 2021 11:19 AM UTC

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, 
 
Please let us know if you need further assistance.  
 
Regards, 
Lakshmi Natarajan 


Loader.
Up arrow icon