Custom ListView cell layout

KarenCateKarenCate USMember ✭✭
edited November 2016 in Xamarin.Forms

Hello awesome Xamarin Forms people!

I am trying to convert my little Xamarin.iOS app to a Forms app, but am having a lot of trouble getting my ViewCell layout to work. Here is a screenshot of the .xib layout, with red annotations:

My first inclination was to make two horizontal RelativeLayouts then bundle them up in a vertical StackLayout (edited for brevity):

        var ProductLabel = new Label();
        var PltnmeLabel = new Label();
        var ProddescLabel = new Label();
        var PrevqtyLabel = new Label();
        var QtyEntry = new Entry();

        var line1 = new RelativeLayout();
        line1.HeightRequest = _fontsize + 4;
        line1.VerticalOptions = LayoutOptions.Start;
        line1.Children.Add(ProductLabel,
                           Constraint.RelativeToParent((parent) => { return parent.X; }),
                           Constraint.RelativeToParent((parent) => { return parent.Y; }),
                           Constraint.RelativeToParent((parent) => { return parent.Width * 0.25; }),
                           Constraint.RelativeToParent((parent) => { return parent.Height; }));

        line1.Children.Add(PltnmeLabel,
                           Constraint.RelativeToView(ProductLabel, (parent,sibling) => { return sibling.X + sibling.Width + _fieldpad; }),
                           Constraint.RelativeToParent((parent) => { return parent.Y; }),
                           Constraint.RelativeToParent((parent) => { return parent.Width - ProductLabel.Width - (_fieldpad * 2); }),
                           Constraint.RelativeToParent((parent) => { return parent.Height; }));         

        var line2 = new RelativeLayout();
        line2.HeightRequest = _fontsize + 4;
        line2.VerticalOptions = LayoutOptions.Start;
        line2.Children.Add(ProddescLabel,
                           Constraint.RelativeToParent((parent) => { return parent.X + _fieldpad; }),
                           Constraint.RelativeToParent((parent) => { return parent.Y; }),
                           Constraint.RelativeToParent((parent) => { return parent.Width - PrevqtyLabel.Width - (_fieldpad * 2); }),
                           Constraint.RelativeToParent((parent) => { return parent.Height; }));

        line2.Children.Add(PrevqtyLabel,
                           Constraint.RelativeToView(ProddescLabel, (parent, sibling) => { return sibling.X + sibling.Width + _fieldpad; }),
                           Constraint.RelativeToParent((parent) => { return parent.Y; }),
                           Constraint.RelativeToParent((parent) => { return parent.Width * 0.25; }),
                           Constraint.RelativeToParent((parent) => { return parent.Height; }));

        line2.Children.Add(QtyEntry,
                           Constraint.RelativeToParent((parent) => { return parent.X + (parent.Width * 0.65) - _fieldpad; }),
                           Constraint.RelativeToParent((parent) => { return parent.Y; }),
                           Constraint.RelativeToParent((parent) => { return parent.Width * 0.25; }),
                           Constraint.RelativeToParent((parent) => { return _fontsize * 2; }));

        var stack2 = new StackLayout();
        stack2.Orientation = StackOrientation.Vertical;
        stack2.Children.Add(line1);
        stack2.Children.Add(line2);

        View = stack2;

This did not work. I couldn't get line2 to be anywhere close to line1, even if I took the entry field out. I tried using StackLayouts, but I can't get the fields to be constant widths so they line up.

So... How SHOULD I be doing this?

A couple more notes: I need this to be in a separate class from the listview so that I can do some conditional formatting based upon some information that is not displayed. I would prefer to define it in xaml, but was not able to make that work at all (the xaml worked just fine when inline with the listview, but when I moved it to its own class, it crashed). The C# equivalent, at least displays something.

Any help is greatly appreciated.
Thanks!
-Karen

Best Answers

Answers

  • 15mgm1515mgm15 USMember ✭✭✭✭

    For the main container I will use a vertical StackLayout, the first row, will be an Horizontal StackLayout with 2 Labels the first one with HorizontalOptions = LayoutOptions.Start the second Label with HorizontalOptions = LayoutOptions.FillAndExpand the next row also an Horizontal Stack Layout with 3 children the first one with StartAndExpand. that is my main idea. Hope this helps.

  • KarenCateKarenCate USMember ✭✭

    Thanks, guys! I come from the VCL world, and "grid" has a somewhat different connotation, so I skipped over it when thinking about UI layouts.

Sign In or Register to comment.