如何均勻分佈Xamarin中的4個控件水平StackLayout

Question

如何在Xamarin Forms水平StackLayout中均勻分配4個控件。我在iPhone 4S上看起來不錯，但在iPhone 6或iPad上很糟糕。水平堆棧佈局是ListView中的列表項。我已經嘗試了一個相對佈局和1行網格。但是我看起來最好（在4S上）。謝謝。

按順序，我有一個按鈕，標籤，標籤和一個按鈕。

 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

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