How do I evenly distribute 4 controls within a Xamarin Forms horizontal StackLayout

Question

How do I evenly distribute 4 controls within a Xamarin Forms horizontal StackLayout. I have it looking decent on an iPhone 4S but lousy on an iPhone 6 or iPad. The horizontal stack layout is the list item in a ListView. I've tried a relative layout and a 1 row grid. But what I have looks best (on the the 4S). Thanks.

I have a button, label, label, and a button, in that order.

        stackLayout = new StackLayout {
            Orientation = StackOrientation.Horizontal,
            HorizontalOptions = LayoutOptions.Center
        };
        deleteButton.Image = "minus.png";
        deleteButton.HorizontalOptions = LayoutOptions.Start;

        //label text width may vary from 4 to 16 characters
        displayLabel.SetBinding(Label.TextProperty, "Text");
        displayLabel.HorizontalOptions = LayoutOptions.Center;
        displayLabel.WidthRequest = 125;

        //label text is always 8 characters
        displayLabel2.SetBinding(Label.TextProperty, "Text2");
        displayLabel2.HorizontalOptions = LayoutOptions.Center;

        button2.Image = "plus.png";
        button2.HorizontalOptions = LayoutOptions.EndAndExpand;

        stackLayout.Children.Add(deleteButton);
        stackLayout.Children.Add(displayLabel);
        stackLayout.Children.Add(displayLabel2);
        stackLayout.Children.Add(button2);

Answer 1

Using StackLayout:

using Xamarin.Forms;

var label1 = new Label() {
    Text = "label1",
    HorizontalOptions = LayoutOptions.FillAndExpand, //OR CenterAndExpand
};

var label2 = new Label() {
    Text = "label2",
    HorizontalOptions = LayoutOptions.FillAndExpand, //OR CenterAndExpand
};

var label3 = new Label() {
    Text = "label3",
    HorizontalOptions = LayoutOptions.FillAndExpand, //OR CenterAndExpand
};

var label4 = new Label() {
    Text = "label4",
    HorizontalOptions = LayoutOptions.FillAndExpand, //OR CenterAndExpand
};

var stackLayout = new StackLayout 
{
    Orientation = StackOrientation.Horizontal,
    HorizontalOptions = LayoutOptions.FillAndExpand,
    Children = {
        label1,
        label2,
        label3,
        label4,
    }
};

RootPage.Children.Add(new ContentPage {
    Padding = 10,
    Content = stackLayout
});

Using Grid:

using Xamarin.Forms;

    var label1 = new Label() {
    Text = "label1",
};

var label2 = new Label() {
    Text = "label2",
};

var label3 = new Label() {
    Text = "label3",
};

var label4 = new Label() {
    Text = "label4",
};

var gridLayout = new Grid 
{
    HorizontalOptions = LayoutOptions.FillAndExpand,
    ColumnDefinitions = new ColumnDefinitionCollection() {
        new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) },
        new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) },
        new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) },
        new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) },
    },
    RowDefinitions = new RowDefinitionCollection() {
        new RowDefinition() { Height = GridLength.Auto }
    }
};

gridLayout.Children.Add(label1, 0, 0);
gridLayout.Children.Add(label2, 1, 0);
gridLayout.Children.Add(label3, 2, 0);
gridLayout.Children.Add(label4, 3, 0);

RootPage.Children.Add(new ContentPage {
    Padding = 10,
    Content = gridLayout
});