#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 может быть горизонтальным (параметр направления), но я бы использовал либо сетку, либо макет таблицы для повышения эффективности.