Forum Xamarin.Forms

Customize Cells/ListView on Xamarin.Forms via Custom Render

VasyanVasyan USMember
edited August 2015 in Xamarin.Forms

Hello everyone!
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) enter image description here

  • Cells disabling(similiar to property isEnabled) with another opacity/background of cell(and her controls label/image etc) :enter image description here

How i can achieve that?
Also tried(that snippet) to draw a line on custom render(for my custom divider,but no succes)

    var borderLayer = new CALayer();
         borderLayer.Frame = new CoreGraphics.CGRect(0f, this.Frame.Height - 1, this.Frame.Width, 1f);
         borderLayer.BorderColor = Color.White.ToCGColor();
         this.Control.Layer.AddSublayer(borderLayer);

Any help will be appreciated,thanks!
PS Sorry for my eng. skills!

Posts

  • TorbenKruseTorbenKruse DEMember ✭✭✭
    edited August 2015

    Hi,

    First of all, if your data is gonna change after the ListView appeared, I would recommend you to implement INotifyPropertyChanged on your MyDataContext to update the ListView.

    To your questions.

    1. There is a property on the ListView for changing the SeparatorColor. If that not fits your needs, turn of SeparatorVisibility and add a seperator with the help of BoxView.

    2. Disable a cell by setting IsEnabled on the cell and change either the BackgroundColor of your layout or write a custom renderer for changing the actual background on the cell when the IsEnabled property changed. I would recommend first.

    3. There are different solutions for achieving your layout. Personally, I like taking Grid. So it should be something similar to this. No guarantee that this works, just wrote that on the fly.

      _gridLayout = new Grid
      {
          HorizontalOptions = LayoutOptions.Fill,
          RowDefinitions = 
          {
              new RowDefinition
              {
                  Height = new GridLength(1, GridUnitType.Star)
              }
          },
          ColumnDefinitions = 
          {
              new ColumnDefinition
              {
                  Width = new GridLength(1, GridUnitType.Auto)
              },
              new ColumnDefinition
              {
                  Width = new GridLength(1, GridUnitType.Star)
              },
              new ColumnDefinition
              {
                  Width = new GridLength(1, GridUnitType.Auto)
              }
          }
      };
      
      this._gridLayout.Children.Add(_Img, 0, 0);
      this._gridLayout.Children.Add(_Label, 1, 0);
      this._gridLayout.Children.Add(_Locked, 2, 0);
      
Sign In or Register to comment.