Xamarin Forms ListView Set the highlight color of a tapped item

Question

Using Xamarin Forms  how can I define the highlight background color of a selected tapped ListView item    My list has a black background and white text color  so the default highlight color on iOS is too bright  In contrast  on Android there is no highlighting at all - up to a subtle horizontal gray line    Example   left  iOS  right  Android  while pressing  Barn2

User · Answer

I have  amp  use a solution similar to  adam-pedley  No custom renderers  in xaml i bind background ViewCell Property                   lt ListView x Name  placesListView  Grid Row  2  Grid ColumnSpan  3  ItemsSource   Binding PlacesCollection   SelectedItem   Binding PlaceItemSelected   gt                   lt ListView ItemTemplate gt                       lt DataTemplate gt                           lt ViewCell gt                               lt Grid BackgroundColor   Binding IsSelected Converter  StaticResource boolToColor    gt                                   lt Grid RowDefinitions gt                                       lt RowDefinition Height  auto   gt                                       lt RowDefinition Height  auto   gt                                   lt  Grid RowDefinitions gt                                   lt Grid ColumnDefinitions gt                                       lt ColumnDefinition Width       gt                                       lt ColumnDefinition Width       gt                                   lt  Grid ColumnDefinitions gt                                    lt Label Grid Row  1  Grid ColumnSpan  2  Text   Binding DisplayName   Style   StaticResource blubeLabelBlackItalic   FontSize  Default  HorizontalOptions  Start    gt                                   lt Label Grid Row  2  Grid ColumnSpan  2  Text   Binding DisplayDetail    Style   StaticResource blubeLabelGrayItalic   FontSize  Small  HorizontalOptions  Start   gt                                   lt  --                                  lt Label Grid RowSpan  2  Grid ColumnSpan  2  Text   Binding KmDistance    Style   StaticResource blubeLabelGrayItalic   FontSize  Default  HorizontalOptions  End  VerticalOptions  Center   gt                                  -- gt                               lt  Grid gt                           lt  ViewCell gt                       lt  DataTemplate gt                   lt  ListView ItemTemplate gt                                   lt  ListView gt    In code  MVVM  i save the lastitemselected by a boolToColor Converter i update background color      public class BoolToColorConverter   IValueConverter               public object Convert object value  Type targetType  object parameter  CultureInfo culture                        return  bool value   Color Yellow   Color White                     public object ConvertBack object value  Type targetType  object parameter  CultureInfo culture                        return  Color value    Color Yellow   true   false                       PlaceItem LastItemSelected       PlaceItem placeItemSelected      public PlaceItem PlaceItemSelected               get                       return placeItemSelected                     set                       if  LastItemSelected    null                  LastItemSelected IsSelected   false               placeItemSelected   value              if  placeItemSelected    null                                placeItemSelected IsSelected   true                  LastItemSelected   placeItemSelected                            PropertyChanged  Invoke this  new PropertyChangedEventArgs nameof PlaceItemSelected                       My example is extracted by a listview of places which are in a Xamarin Forms Maps  same contentpage   I hope this solution will be usefull for somebody

User · Answer

The previous answers either suggest custom renderers or require you to keep track of the selected item either in your data objects or otherwise  This isn t really required  there is a way to link to the functioning of the ListView in a platform agnostic way  This can then be used to change the selected item in any way required  Colors can be modified  different parts of the cell shown or hidden depending on the selected state   Let s add an IsSelected property to our ViewCell  There is no need to add it to the data object  the listview selects the cell  not the bound data   public partial class SelectableCell   ViewCell      public static readonly BindableProperty IsSelectedProperty   BindableProperty Create nameof IsSelected   typeof bool   typeof SelectableCell   false  propertyChanged  OnIsSelectedPropertyChanged     public bool IsSelected       get   gt   bool GetValue IsSelectedProperty       set   gt  SetValue IsSelectedProperty  value             You can omit this if you only want to use IsSelected via binding in XAML   private static void OnIsSelectedPropertyChanged BindableObject bindable  object oldValue  object newValue        var cell     SelectableCell bindable          change color  visibility  whatever depending on  bool newValue                   To create the missing link between the cells and the selection in the list view  we need a converter  the original idea came from the Xamarin Forum    public class IsSelectedConverter   IValueConverter     public object Convert object value  Type targetType  object parameter  CultureInfo culture    gt      value    null  amp  amp  value      ViewCell parameter  View BindingContext     public object ConvertBack object value  Type targetType  object parameter  CultureInfo culture    gt      throw new NotImplementedException        We connect the two using this converter    lt ListView x Name  ListViewName  gt     lt ListView ItemTemplate gt       lt DataTemplate gt         lt local SelectableCell x Name  ListViewCell          IsSelected   Binding SelectedItem  Source  x Reference ListViewName   Converter  StaticResource IsSelectedConverter   ConverterParameter  x Reference ListViewCell      gt       lt  DataTemplate gt     lt  ListView ItemTemplate gt   lt  ListView gt    This relatively complex binding serves to check which actual item is currently selected  It compares the SelectedItem property of the list view to the BindingContext of the view in the cell  That binding context is the data object we actually bind to  In other words  it checks whether the data object pointed to by SelectedItem is actually the data object in the cell  If they are the same  we have the selected cell  We bind this into to the IsSelected property which can then be used in XAML or code behind to see if the view cell is in the selected state   There is just one caveat  if you want to set a default selected item when your page displays  you need to be a bit clever  Unfortunately  Xamarin Forms has no page Displayed event  we only have Appearing and this is too early for setting the default  the binding won t be executed then  So  use a little delay   protected override async void OnAppearing       base OnAppearing       Device BeginInvokeOnMainThread async      gt        await Task Delay 100       ListViewName SelectedItem

User · Answer

This solution works fine  but if you change the caching strategy of the ListView away from the default value it stops working  It works if you new up your ListView like this  listView   new ListView            But if you do this it does not work  the background stays grey for the selected item   listView   new ListView cachingStrategy ListViewCachingStrategy RecycleElement            Below is a solution that works even with a non-standard cachingStrategy  I prefer this to other solutions like having code in the OnItemSelected method coupled with a binding from the ViewModel for the background color   Credit to  Lang tu bi dien who posted the idea here  Listview Selected Item Background Color  The final code then looks like this   Xamarin Forms code   namespace MyProject       public class ListView2   ListView               public ListView2 ListViewCachingStrategy cachingStrategy    base cachingStrategy                                XAML on your page    x000D   x000D       lt ListView2 x Name  myListView  ListViewCachingStrategy  RecycleElement  ItemsSource   Binding ListSource   RowHeight  50  gt  x000D           lt ListView ItemTemplate gt  x000D             lt DataTemplate gt  x000D               lt ViewCell gt  x000D                 lt ViewCell View gt  x000D                     lt Label Text   Binding Name   HorizontalOptions  Center  TextColor  White    gt  x000D                   lt  ContentView gt  x000D                 lt  ViewCell View gt  x000D               lt  ViewCell gt  x000D             lt  DataTemplate gt  x000D           lt  ListView ItemTemplate gt  x000D       lt  ListView2 gt  x000D   x000D   x000D    iOS-specific renderer    assembly  ExportRenderer typeof ListView2   typeof ListView2Renderer    namespace MyProject iOS       public partial class ListView2Renderer   ListViewRenderer               protected override void OnElementChanged ElementChangedEventArgs lt ListView gt  e                        base OnElementChanged e               if  Control    null  amp  amp  e    null                                  oldDelegate    UITableViewSource Control Delegate                  Control Delegate   new ListView2Delegate e NewElement                                       class ListView2Delegate   UITableViewDelegate               private ListView  listView           internal ListView2Delegate ListView listView                         listView   listView                     public override void WillDisplay UITableView tableView  UITableViewCell cell  Foundation NSIndexPath indexPath                        cell SelectedBackgroundView   new UIView                                 BackgroundColor   Color Red ToUIColor                                     protected override void Dispose bool disposing                        if  disposing                                 listView   null                            base Dispose disposing                       Note  you may run into some issues due to the fact that you are replacing the default delegate  for more info on this see Setting delegate of control in custom renderer results in lost functionality  In my project it all works as it should if I do this    Use the normal ListView together with the ListItemViewCellRenderer code given in in the earlier posts on this thread for ListViews that use the default caching strategy ListViewCachingStrategy RetainElement  Use this ListView2 together for ListViews that use a non-default caching strategy i e  ListViewCachingStrategy RecycleElement or ListViewCachingStrategy RecycleElementAndDataTemplate    I am also filing a feature request with Xamarin  please upvote it if you feel this should be added to the standard ListView  ListView desperately needs a SelectedItemBackgroundColor property

User · Answer

It looks like there is actually a cross-platform way to do this that works on both iOS and Android  not sure about Windows   It uses only binding and does not require custom renderers  which seems rare   This is a mash-up of lots of googling  so thanks to anyone who I may have borrowed from      I am assuming ViewCells  but this should work for Text or Image cells as well  I am only including the relevant code here beyond the typical text  image  etc   On your page do something like this   MyModel model1   new MyModel    MyModel model2   new MyModel     ListView list   new ListView       ItemsSource   new List lt MyModel gt    model1  model2        ItemTemplate   new DataTemplate  typeof MyCell         Your custom Model might look something like this   public class MyModel   INotifyPropertyChanged       public event PropertyChangedEventHandler PropertyChanged       private Color  backgroundColor       public Color BackgroundColor                 get   return  backgroundColor             set                          backgroundColor   value                if   PropertyChanged    null                                 PropertyChanged  this  new PropertyChangedEventArgs   BackgroundColor                                          public void SetColors  bool isSelected                 if   isSelected                         BackgroundColor   Color FromRgb  0 20  0 20  1 0                      else                       BackgroundColor   Color FromRgb  0 95  0 95  0 95                         Then for your ItemTemplate you need a custom cell class something like this   public class MyCell   ViewCell       public MyCell     base                 RelativeLayout layout   new RelativeLayout            layout SetBinding  Layout BackgroundColorProperty  new Binding   BackgroundColor                View   layout            Then in your ItemSelected event handler  do the following  Note that  selected  is an instance of MyModel used to track the currently selected item  I am only showing background color here  but I also use this technique to reverse highlight the text and detail text colors   private void ItemSelected  object sender  ItemTappedEventArgs args            Deselect previous     if   selected    null                 selected SetColors  false                  Select new     selected    list SelectedItem as MyModel       selected SetColors  true

User · Answer

To change color of selected ViewCell  there is a simple process without using custom renderer  Make Tapped event of your ViewCell as below   lt ListView ItemTemplate gt       lt DataTemplate gt           lt ViewCell Tapped  ViewCell Tapped  gt                       lt Label Text   Binding StudentName   TextColor  Black    gt           lt  ViewCell gt       lt  DataTemplate gt   lt  ListView ItemTemplate gt    In your ContentPage or  cs file  implement the event  private void ViewCell Tapped object sender  System EventArgs e        if lastCell  null      lastCell View BackgroundColor   Color Transparent      var viewCell    ViewCell sender      if  viewCell View    null                viewCell View BackgroundColor   Color Red          lastCell   viewCell             Declare lastCell at the top of your ContentPage like this ViewCell lastCell

User · Answer

Here is the purely cross platform and neat way   1  Define a trigger action  namespace CustomTriggers      public class DeselectListViewItemAction TriggerAction lt ListView gt           protected override void Invoke ListView sender                    sender SelectedItem   null                    2  Apply the above class instance as an EventTrigger action in XAML as below    lt ListView x Name  YourListView  ItemsSource   Binding ViewModelItems   gt       lt ListView Triggers gt           lt EventTrigger Event  ItemSelected  gt               lt customTriggers DeselectListViewItemAction gt  lt  customTriggers DeselectListViewItemAction gt           lt  EventTrigger gt       lt  ListView Triggers gt   lt  ListView gt    Don t forget to add xmlns customTriggers  clr-namespace CustomTriggers assembly ProjectAssembly   Note  Because none of your items are in selected mode  selection styling will not get applied on either of the platforms

User · Answer

iOS  Solution   Within a custom ViewCellRenderer you can set the SelectedBackgroundView  Simply create a new UIView with a background color of your choice and you re set   public override UITableViewCell GetCell Cell item  UITableViewCell reusableCell  UITableView tv        var cell    base GetCell item  reusableCell  tv        cell SelectedBackgroundView   new UIView           BackgroundColor   UIColor DarkGray              return cell      Result     Note   With Xamarin Forms it seems to be important to create a new UIView rather than just setting the background color of the current one     Android  Solution   The solution I found on Android is a bit more complicated    Create a new drawable ViewCellBackground xml within the Resources drawable folder    lt  xml version  1 0  encoding  UTF-8    gt   lt selector xmlns android  http   schemas android com apk res android  gt       lt item android state pressed  true   gt           lt shape android shape  rectangle  gt               lt solid android color   333333    gt           lt  shape gt       lt  item gt       lt item gt           lt shape android shape  rectangle  gt               lt solid android color   000000    gt           lt  shape gt       lt  item gt   lt  selector gt    It defines solid shapes with different colors for the default state and the  pressed  state of a UI element  Use a inherited class for the View of your ViewCell  e g    public class TouchableStackLayout  StackLayout      Implement a custom renderer for this class setting the background resource   public class ElementRenderer  VisualElementRenderer lt Xamarin Forms View gt        protected override void OnElementChanged ElementChangedEventArgs lt Xamarin Forms View gt  e                SetBackgroundResource Resource Drawable ViewCellBackground            base OnElementChanged e              Result

User · Answer

I have a similar process  completely cross platform  however I track the selection status myself and I have done this in XAML   lt ListView x Name  quot ListView quot  ItemsSource  quot  Binding ListSource  quot  RowHeight  quot 50 quot  gt     lt ListView ItemTemplate gt       lt DataTemplate gt         lt ViewCell gt           lt ViewCell View gt             lt ContentView Padding  quot 10 quot  BackgroundColor  quot  Binding BackgroundColor  quot  gt               lt Label Text  quot  Binding Name  quot  HorizontalOptions  quot Center quot  TextColor  quot White quot    gt             lt  ContentView gt           lt  ViewCell View gt         lt  ViewCell gt       lt  DataTemplate gt     lt  ListView ItemTemplate gt   lt  ListView gt   Then in the ItemTapped Event ListView ItemTapped    async  s  e    gt        var list   ListSource      var listItem   list First c   gt  c Id      ListItem e Item  Id       listItem Selected    listItem Selected      SelectListSource   list      ListView SelectedItem   null      As you can see I just set the ListView SelectedItem to null to remove any of the platform specific selection styles that come into play  In my model I have private Boolean  selected   public Boolean Selected       get   gt   selected      set                selected   value          if  PropertyChanged    null              PropertyChanged this  new PropertyChangedEventArgs  quot BackgroundColor quot              public Color BackgroundColor       get   gt  Selected   Color Black   Color Blue

User · Answer

Only for Android  Add in your custom theme   lt item name  android colorActivatedHighlight  gt  android color transparent lt  item gt

User · Answer

Found this lovely option using effects here   iOS    assembly  ResolutionGroupName  MyEffects     assembly  ExportEffect typeof ListViewHighlightEffect   nameof ListViewHighlightEffect    namespace Effects iOS Effects       public class ListViewHighlightEffect   PlatformEffect               protected override void OnAttached                         var listView    UIKit UITableView Control               listView AllowsSelection   false                     protected override void OnDetached                                 Android    assembly  ResolutionGroupName  MyEffects     assembly  ExportEffect typeof ListViewHighlightEffect   nameof ListViewHighlightEffect    namespace Effects Droid Effects       public class ListViewHighlightEffect   PlatformEffect               protected override void OnAttached                         var listView    Android Widget ListView Control               listView ChoiceMode   ChoiceMode None                     protected override void OnDetached                                 Forms   ListView Demo Effects Add Effect Resolve   MyEffects ListViewHighlightEffect

User · Answer

In Android simply edit your styles xml file under Resources values adding this    lt resources gt     lt style name  MyTheme  parent  android style Theme Material Light DarkActionBar  gt      lt item name  android colorPressedHighlight  gt  color ListViewSelected lt  item gt      lt item name  android colorLongPressedHighlight  gt  color ListViewHighlighted lt  item gt      lt item name  android colorFocusedHighlight  gt  color ListViewSelected lt  item gt      lt item name  android colorActivatedHighlight  gt  color ListViewSelected lt  item gt      lt item name  android activatedBackgroundIndicator  gt  color ListViewSelected lt  item gt     lt  style gt   lt color name  ListViewSelected  gt  96BCE3 lt  color gt   lt color name  ListViewHighlighted  gt  E39696 lt  color gt   lt  resources gt

User · Answer

I had this same issue and I solved it as well by creating a custom renderer for iOS as Falko suggests  however  I avoided the styles modification for Android  I figured out a way to use a custom renderer for Android as well   It is kind of funky how the selected flag is always false for the android view cell that s why I had to create a new private property to track it  but other than that I think this follows a more appropriate pattern if you want to use custom renderers for both platforms  In my case I did it for TextCell but I believe it applies the same way for other CellViews   Xamarin Forms  using Xamarin Forms   public class CustomTextCell   TextCell                    lt summary gt              The SelectedBackgroundColor property               lt  summary gt          public static readonly BindableProperty SelectedBackgroundColorProperty               BindableProperty Create  SelectedBackgroundColor   typeof Color   typeof CustomTextCell   Color Default                 lt summary gt              Gets or sets the SelectedBackgroundColor               lt  summary gt          public Color SelectedBackgroundColor                       get   return  Color GetValue SelectedBackgroundColorProperty                 set   SetValue SelectedBackgroundColorProperty  value                       iOS  public class CustomTextCellRenderer   TextCellRenderer               public override UITableViewCell GetCell Cell item  UITableViewCell reusableCell  UITableView tv                        var cell   base GetCell item  reusableCell  tv               var view   item as CustomTextCell              cell SelectedBackgroundView   new UIView                               BackgroundColor   view SelectedBackgroundColor ToUIColor                                return cell                    Android  public class CustomTextCellRenderer   TextCellRenderer       private Android Views View cellCore      private Drawable unselectedBackground      private bool selected       protected override Android Views View GetCellCore Cell item  Android Views View convertView  ViewGroup parent  Context context                cellCore   base GetCellCore item  convertView  parent  context               Save original background to rollback to it when not selected             We assume that no cells will be selected on creation          selected   false          unselectedBackground   cellCore Background           return cellCore             protected override void OnCellPropertyChanged object sender  PropertyChangedEventArgs args                base OnCellPropertyChanged sender  args            if  args PropertyName     IsSelected                            I had to create a property to track the selection because cellCore Selected is always false                 Toggle selection             selected    selected               if  selected                                var customTextCell   sender as CustomTextCell                  cellCore SetBackgroundColor customTextCell SelectedBackgroundColor ToAndroid                               else                               cellCore SetBackground unselectedBackground                                        then  in the  xaml page  you need to add an XMLNS reference back to the new CustomViewCell     xmlns customuicontrols  clr-namespace MyMobileApp CustomUIControls    And don t forget to make actual use of the new Custom comtrol in your XAML

User · Answer

In order to set the color of highlighted item you need to set the color of cell SelectionStyle in iOS    This example is to set the color of tapped item to transparent    If you want you can change it with other colors from UITableViewCellSelectionStyle  This is to be written in the platform project of iOS by creating a new Custom ListView renderer in your Forms project    public class CustomListViewRenderer   ListViewRenderer               protected override void OnElementPropertyChanged object sender  PropertyChangedEventArgs e                        base OnElementPropertyChanged sender  e                if  Control    null                                return                             if  e PropertyName     ItemsSource                                 foreach  var cell in Control VisibleCells                                        cell SelectionStyle   UITableViewCellSelectionStyle None                                                    For android you can add this style in your values styles xml   lt style name  ListViewStyle Light  parent  android style Widget ListView  gt       lt item name  android listSelector  gt  android color transparent lt  item gt       lt item name  android cacheColorHint  gt  android color transparent lt  item gt     lt  style gt

User · Answer

The easiest way to accomplish this on android is by adding the following code to your custom style      android color transparent

[android] Xamarin.Forms ListView: Set the highlight color of a tapped item

Examples related to android

Examples related to ios

Examples related to listview

Examples related to xamarin

Examples related to xamarin.forms