Customize Cells/ListView on Xamarin.Forms via Custom Render

Question

I have a native(Xamarin.Forms) listview. My data context have 3 property,like :

public class MyDataContext :
{
  public string Name {get;set;}
  public string ImageName {get;set;}
  public bool isAvailable {get;set;}
}

Where Name is a property for textLabel , ImageName imagesource for ImageControl and isAvailable some kind a condition for the cell(true - cell is active,other wise Cell have another opacity/background and is not clickable,also will appear an image(in right corner)that will show image "locked" !).

My listview at current moment :

 public class MyListView: ListView
        {
            public MyListView()
            {
                ItemTemplate = new DataTemplate(()=>
                {
                    BackgroundColor = Color.FromHex("#f2f0e9");
                        var _Label = new Label() { FontSize = 13, TextColor = Color.FromHex("#979797")};
                    _Label.SetBinding(Label.TextProperty,"Name");

                    RowHeight = 69;

                     var _Img = new Image(){ WidthRequest = 35, HeightRequest = 42};
                    _Img.SetBinding(Image.SourceProperty,"ImageName");

                        return new ViewCell 
                        {
                            View = new StackLayout
                                {
                                    Orientation = StackOrientation.Horizontal,
                                    Padding = 10,
                                    Children = 
                                        {
                                            _Img,
                                            new StackLayout
                                            {
                                                Padding = 10,
                                                VerticalOptions = LayoutOptions.Center,
                                                Spacing = 0,
                                                Children = 
                                                    {
                                                       _Label,
                                                    }
                                                }
                                        }
                                    }
                        };

                });
            }
        }
    }

For some reason i need to customize (both platforms iOs/Android) :

Divider of cell(need to implement some custom color and size,like on picture)
Cells disabling(similiar to property isEnabled) with another opacity/background of cell(and her controls label/image etc) :

How i can achieve that?
Any help will be appreciated,thanks!
PS Sorry for my eng. skills!

Mike Mike · Accepted Answer · 2015-08-28T23:12:50

I think you will have to write a custom renderer for this unfortunately. In order to set the seperator line the full width of the screen, you will need to set the seperator inset to be zero as shown below.

[assembly: ExportRenderer(typeof(ListView), typeof(MyListViewRenderer))]
namespace myApp.iOS.Custom_Renderers
{
    public class MyListViewRenderer : ListViewRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<ListView> e)
        {
            base.OnElementChanged(e);
            var table = (UITableView)this.Control;
            table.SeperatorInset = UIEdgeInsets.Zero;
        }
    }
}

Apologies if any of the syntax above is incorrect, I'm writing from memory but it should set you off on the correct path.

Customize Cells/ListView on Xamarin.Forms via Custom Render

1 Answers