Come distribuire uniformemente 4 controlli all'interno di Xamarin Forms StackLayout orizzontale

Question

Come distribuire uniformemente 4 controlli all'interno di uno StackLayout orizzontale di Xamarin Form. Ho un aspetto decente su un iPhone 4S, ma non adatto a un iPhone 6 o iPad. Il layout di stack orizzontale è l'elemento di elenco in un controllo ListView. Ho provato un layout relativo e una griglia a 1 riga. Ma quello che ho sembra migliore (sul 4S). Grazie.

Ho un pulsante, un'etichetta, un'etichetta e un pulsante, in questo ordine.

 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

Utilizzando 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 
}); 

Usando griglia:

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 
});