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. (Last updated on : November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

130721 May 29,2017 09:08 AM UTC Oct 16,2017 03:56 AM UTC Xamarin.Forms 3
loading
Tags: SfListView
Gerard De Leon
Asked On May 29, 2017 09:08 AM UTC

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 [Syncfusion]
Replied On 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 
 


Nicolai
Replied On 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


Muthu Kumaran Gnanavinayagam [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;