Xamarin.Forms How to make the Buttons appear in one line

Question

How to make the Buttons appear in one line

---

This is my Code behind

namespace RowCounter.Forms
{
    public partial class MainPage : ContentPage
    {
        public int Number = 1;

        public MainPage()
        {
            InitializeComponent();
        }
        public object Children { get; private set; }
        void OnButtonClicked(object sender, EventArgs e)
        {
            Button button = new Button
            {
                Text = "NAME PRODJECT"+"  "+ Number,
                TextColor= Color.Red,
                WidthRequest =450,
                HorizontalOptions = LayoutOptions.Start
            };
            Button button2 = new Button
            {
                Text = "X",
                WidthRequest = 40,
                HorizontalOptions = LayoutOptions.End
            };
            MainStackLayout.Children.Add(button2);
            MainStackLayout.Children.Add(button);            
            Number++;
        }               
    }
}

and my xaml code

<StackLayout x:Name ="MainStackLayout" BackgroundColor="#9370db">
    <Button Text="СОЗДАТЬ ПРОЕКТ"    
            FontAttributes="Bold"
            FontSize="25"
            WidthRequest="250"
            HeightRequest="80"
            Clicked="OnButtonClicked"
            TextColor="#ff000000"
            BackgroundColor="#4b0082"/>
</StackLayout> 

please help me

Answer 1

Stacklayout can be horizontal (direction param), but I would use either a grid or table layout for efficiency's sake.

Answer 2

Grid is Fine if you has several buttons. If the amount of button is more than 5, the buttons may overplayed in mobile APP because the size of handset is limited.

The optional is use FlexLayout (see: https://learn.microsoft.com/en-us/dotnet/api/xamarin.forms.flexlayout?view=xamarin-forms) . You can layout buttons horizontally and breaks into more than one row automatically if the space is not enough.

Examples:

FlexLayout flex = new FlexLayout();
flex.HorizontalOptions = LayoutOptions.Fill;
flex.VerticalOptions = LayoutOptions.StartAndExpand;
flex.Direction = FlexDirection.Row;
flex.Wrap = FlexWrap.Wrap;
//Add buttons
flex.Children.Add(button1);
flex.Children.Add(button2);
        ...

Answer 3

Use Grid instead of Stacklayout.

From the docu:

Grid

The Grid is a layout that organizes its children into rows and columns, which can have proportional or absolute sizes. By default, a Grid contains one row and one column. In addition, a Grid can be used as a parent layout that contains other child layouts.

Stacklayout

A StackLayout organizes child views in a one-dimensional stack

As an example, your code would look like

<Grid x:Name="MainGrid" VerticalOptions="StartAndExpand">
      <Grid.RowDefinitions>

      </Grid.RowDefinitions>
      <Button Grid.Column="0"
              Grid.ColumnSpan="2"
              Grid.Row="0"
              Text="СОЗДАТЬ ПРОЕКТ"
              FontAttributes="Bold"
              FontSize="25"
              WidthRequest="250"
              HeightRequest="80"
              Clicked="OnButtonClicked"
              TextColor="#ff000000"
              BackgroundColor="#4b0082"/>
</Grid>

and the code behind

public int Number = 1;

public ButtonsPage()
{
    InitializeComponent();
}

public object Children { get; private set; }
void OnButtonClicked(object sender, EventArgs e)
{
    Button button = new Button
    {
        Text = "NAME PRODJECT" + "  " + Number,
        TextColor = Color.Red,
        WidthRequest = 450,
        HeightRequest = 40,
        HorizontalOptions = LayoutOptions.Start
    };
    Button button2 = new Button
    {
        Text = "X",
        WidthRequest = 40,
        HeightRequest = 40,
        HorizontalOptions = LayoutOptions.End
    };
    MainGrid.Children.Add(button, left: 0, top: Number);
    MainGrid.Children.Add(button2, left: 1, top: Number);
    Number++;
}

which produces something like

---

A second option, although not recommended would be to nest Stacklayouts: a Stacklayout of Stacklayouts composed by two buttons with Orientation set to Horizontal. This is bad Practice and not good for performance, as Jason Smith said in his famous talk at Evolve 2016.

Answer 4

Use a Grid.

A small example.

 <Grid
    Padding="20"
    ColumnDefinitions="Auto, Auto,Auto"
    RowDefinitions="Auto,Auto">

    <Button
        Grid.Row="1"
        Grid.Column="0"
        BackgroundColor="#4b0082"
        Clicked="Button_Clicked_1"
        FontAttributes="Bold"
        FontSize="16"
        HeightRequest="40"
        Text="NAME PRODJECT 1"
        TextColor="White"
        WidthRequest="200" />

    <Button
        Grid.Row="1"
        Grid.Column="3"
        BackgroundColor="#4b0082"
        Clicked="Button_Clicked"
        FontAttributes="Bold"
        FontSize="16"
        HeightRequest="40"
        HorizontalOptions="End"
        Text="X"
        TextColor="White"
        WidthRequest="40" />

</Grid>