Adding nested stackviews programmatically using xamarin.ios c#

Question

I am creating a app for both android and ios using xamarin and mvvmcross. In the ios app I want to add outer vertical stackview having nested horizontal stackviews. Basically I just want to create a basic person details screen where will be Label on left and textfield on right which will go in one horizontal stackview and like this there will many horizontal stackviews nested in outer vertical stackview.

I am looking for such example on internet but seems most of the examples are in swift but I was hardly able to find some in c#.

Can someone please help.

Thanks, Santosh

Answer 1

UIStackView leverages the power of Auto Layout and Size Classes to manage a stack of subviews, either horizontally or vertically, which dynamically responds to the orientation and screen size of the iOS device. You can learn about it through this documentation.

In your case, we can construct a vertical stack to place several horizontal stack:

UIStackView verticalStack = new UIStackView();
View.AddSubview(verticalStack);
verticalStack.Axis = UILayoutConstraintAxis.Vertical;
verticalStack.TranslatesAutoresizingMaskIntoConstraints = false;

// Use auto layout to embed this super vertical stack in the View. Also there's no need to set the height constraint, vertical stack will automatically adjust that depending on its content
verticalStack.LeadingAnchor.ConstraintEqualTo(View.LeadingAnchor).Active = true;
verticalStack.TopAnchor.ConstraintEqualTo(TopLayoutGuide.GetBottomAnchor()).Active = true;
verticalStack.TrailingAnchor.ConstraintEqualTo(View.TrailingAnchor).Active = true;           

for (int i=0; i<10; i++)
{
    // Here try to put some horizontal stack with Label on left and textfield on right in the father stack.
    UIStackView horizontalStack = new UIStackView();
    horizontalStack.Distribution = UIStackViewDistribution.EqualSpacing;
    horizontalStack.Axis = UILayoutConstraintAxis.Horizontal;
    // UIStackView should use AddArrangedSubview() to add subviews.
    verticalStack.AddArrangedSubview(horizontalStack);
    UILabel textLabel = new UILabel();
    textLabel.Text = "text";
    UITextField textField = new UITextField();
    textField.Placeholder = "enter text";
    horizontalStack.AddArrangedSubview(textLabel);
    horizontalStack.AddArrangedSubview(textField);
}

But if every horizontal stack's subViews are almost the same style and layouts. Why not try to use UITableView? You just need to set the single cell's contents and layouts, then use it in the tableView. Moreover this control is reused and scrollable.