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

user_16944618 0
Viewed 696

How to make the Buttons appear in one line

enter image description here

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

xamarin.forms xamarin xamarin.android xamarin.ios c#
4 Answers

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

enter image description here

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.

user_74322420

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>

enter image description here

user_108674910

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://docs.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);
        ...
user_136247940

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

user_41056580
Related