XF How can I modify native control ?

Hello,

I would like to modify native control like ListView from Android.
I would like to add this : android:listSelector="@android:color/transparent" to my listview.

How can I do that ?

Thank you

Answers

  • MikilllMikilll Member ✭✭

    You have to write a custom renderer for ListView.

  • ThomasPauchardThomasPauchard USMember ✭✭

    But I don't know how to access to listSelector property

  • LandLuLandLu Member, Xamarin Team Xamurai

    @ThomasPauchard Generally we use custom renderer to modify the native control in Forms.
    I guess you want to change the ListView's selected color for Android, you can try the code below:

    [assembly: ExportRenderer(typeof(MyViewCell), typeof(ViewCellRendererForAndroid))]
    namespace Demo.Droid
    {
        public class ViewCellRendererForAndroid : ViewCellRenderer
        {
            private Android.Views.View _cellCore;
            private bool _selected = false;
    
            protected override Android.Views.View GetCellCore(Cell item, Android.Views.View convertView, ViewGroup parent, Context context)
            {
                _cellCore = base.GetCellCore(item, convertView, parent, context);
                return _cellCore;
            }
    
            protected override void OnCellPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs args)
            {
                base.OnCellPropertyChanged(sender, args);
                if (args.PropertyName == "IsSelected")
                {
                    _selected = !_selected;
                    var extendedViewCell = sender as ViewCell;
                    if (_selected)
                        _cellCore.SetBackgroundColor(Android.Graphics.Color.Red);
                    else
                        _cellCore.SetBackgroundColor(Android.Graphics.Color.Transparent);
                }
            }
        }
    }
    

    This is a renderer for custom view cell. You should use this MyViewCell to construct your listView in your forms page. Here I modify the selected background to Red.

  • ThomasPauchardThomasPauchard USMember ✭✭

    @LandLu Thank for you answer ! But when I tried Android.Graphics.Color.Transparent over Red , the default color appears.

    From https://stackoverflow.com/a/2908499 , transparent seems working.

    All I want is when I select an item, no color is displayed.

  • LandLuLandLu Member, Xamarin Team Xamurai

    @ThomasPauchard Then you can add the styles in your MainTheme in the Android project's Resources => drawable => values => styles.xml file. The related code:

    <style name="MainTheme" parent="MainTheme.Base">
      <item name="android:colorPressedHighlight">@color/ListViewSelected</item>
      <item name="android:colorLongPressedHighlight">@color/ListViewSelected</item>
      <item name="android:colorFocusedHighlight">@color/ListViewSelected</item>
      <item name="android:colorActivatedHighlight">@color/ListViewSelected</item>
      <item name="android:activatedBackgroundIndicator">@color/ListViewSelected</item>
      <item name="android:listViewStyle">@style/ListViewStyle.Light</item>
    </style>
    
    <style name="ListViewStyle.Light" parent="@android:style/Widget.ListView">
      <item name="android:listSelector">@color/ListViewSelected</item>
    </style>
    

    Then define a transparent color in the colors.xml:

    <color name="ListViewSelected">#00FFFFFF</color>
    

    At last all the listView in this project will have this configuration.

  • LandLuLandLu Member, Xamarin Team Xamurai

    Hi @ThomasPauchard Have you tried the code above? Could this help you fix the problem?

  • ThomasPauchardThomasPauchard USMember ✭✭

    Hi @LandLu I tried this solution but as you said all the listView in my project have this configuration.

    Can I do a custom render just to target specific listviews in my project ?

    I saw that I can access to the Setselector property but I don't know how to 'connect' to XF listview.

    Android.Widget.ListView lv = new ListView();
    v.SetSelector(/*drawable*/);
    
Sign In or Register to comment.