Ксамарин.Формы, как сделать так, чтобы кнопки отображались в одной строке

#c# #xamarin #xamarin.forms #xamarin.android #xamarin.ios

Вопрос:

Как сделать так, чтобы кнопки отображались в одной строке

введите описание изображения здесь


Это мой код, лежащий в основе

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

и мой код xaml

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

пожалуйста, помогите мне

Ответ №1:

Используйте сетку вместо выкладки.

Из документа:

Сетка

Сетка-это макет, который организует свои дочерние элементы в строки и столбцы, которые могут иметь пропорциональные или абсолютные размеры. По умолчанию сетка содержит одну строку и один столбец. Кроме того, сетка может использоваться в качестве родительского макета, который содержит другие дочерние макеты.

Стопка

Стеклаут организует дочерние представления в одномерный стек

В качестве примера ваш код будет выглядеть следующим образом

 <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>
 

и код, лежащий в основе

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

который производит что-то вроде

введите описание изображения здесь


Вторым вариантом, хотя и не рекомендуется, было бы размещение стопок: стопка стопок, состоящая из двух кнопок с горизонтальной ориентацией. Это плохая практика и не очень хорошо для производительности, как сказал Джейсон Смит в своем знаменитом выступлении на Evolve 2016.

Ответ №2:

Используйте сетку.

Небольшой пример.

  <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>
 

введите описание изображения здесь

Ответ №3:

Сетка подойдет, если у вас есть несколько кнопок. Если количество кнопок превышает 5, кнопки могут быть переиграны в мобильном приложении, поскольку размер телефона ограничен.

Необязательно использовать FlexLayout (см.: https://docs.microsoft.com/en-us/dotnet/api/xamarin.forms.flexlayout?view=xamarin-forms) . Вы можете расположить кнопки горизонтально и автоматически разбивать их на несколько строк, если места недостаточно.

Примеры:

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

Ответ №4:

Stacklayout может быть горизонтальным (параметр направления), но я бы использовал либо сетку, либо макет таблицы для повышения эффективности.