Как заполнить и центрировать HorizontalStackLayout
У меня проблема: у меня есть несколько кнопок, и я хочу центрировать их в HorizontalStackLayout. Мне нравится, что HorizontalStackLayout расширяется слева направо от окна, чтобы получить желаемый внешний вид. В этом случае, выбрав HorizontalOptions, я могу сделать это из стороны в сторону или по центру. Я не могу сделать это и то, и другое. Есть ли у кого-нибудь идеи, как это исправить?
Случай с HorizontalOptions="CenterAndExpand"
Случай с HorizontalOptions="Fill"
код:
<HorizontalStackLayout Spacing = "20" HorizontalOptions = "Fill" x:DataType = "local:MainPageViewModel" Grid.Row = "2" BackgroundColor = "Blue">
<HorizontalStackLayout.Resources>
<Style TargetType = "{x:Type Button}">
<Setter Property = "BackgroundColor" Value = "Transparent"/>
<Setter Property = "BorderColor" Value = "Transparent"/>
<Setter Property = "FontSize" Value = "16"/>
<Setter Property = "WidthRequest" Value = "60"/>
<Setter Property = "FontAttributes" Value = "Bold"/>
<Setter Property = "Command" Value = "{Binding ChangeDateOfWeekCommand}"/>
</Style>
</HorizontalStackLayout.Resources>
<VerticalStackLayout>
<Label>date</Label>
<Button Pressed = "ChangeButtonBackgroundOnPress" CommandParameter = "{Binding Text, Source = {x:Reference MondayButton}}" x:Name = "MondayButton" TextColor = "White" Text = "Pon" ></Button>
</VerticalStackLayout>
<Button Pressed = "ChangeButtonBackgroundOnPress" CommandParameter = "{Binding Text, Source = {x:Reference TuesdayButton}}" x:Name = "TuesdayButton" TextColor = "White" Text = "Wt"></Button>
<Button Pressed = "ChangeButtonBackgroundOnPress" CommandParameter = "{Binding Text, Source = {x:Reference WednesdayButton}}" x:Name = "WednesdayButton" TextColor = "White" Text = "Śr"></Button>
<Button Pressed = "ChangeButtonBackgroundOnPress" CommandParameter = "{Binding Text, Source = {x:Reference ThursdayButton}}" x:Name = "ThursdayButton" TextColor = "White" Text = "Czw"></Button>
<Button Pressed = "ChangeButtonBackgroundOnPress" CommandParameter = "{Binding Text, Source = {x:Reference FridayButton}}" x:Name = "FridayButton" TextColor = "White" Text = "Pt"></Button>
<Button Pressed = "ChangeButtonBackgroundOnPress" CommandParameter = "{Binding Text, Source = {x:Reference SobButton}}" x:Name = "SobButton" TextColor = "Red" Text = "Sob"></Button>
<Button Pressed = "ChangeButtonBackgroundOnPress" CommandParameter = "{Binding Text, Source = {x:Reference SaturdayButton}}" x:Name = "SaturdayButton" TextColor = "Red" Text = "Nd"></Button>
</HorizontalStackLayout>
Я хочу, чтобы кнопки были центрированы, а HorizontalStackLayout заполнял Grid.Row.
«Центрирование» подразумевает «родителя». Если вы хотите «центрировать» панель и залить «стороны» (цветом), то вам следует обратить внимание на цвет фона «родителя». т. е. части, не перекрывающиеся в родительском элементе. («панели стека», как правило, не «выходят» за пределы своего содержимого. Повторяю, «в целом».)
Ответы 2
Если вы планируете разместить HorizontalStacklayout внутри сетки, всегда лучше размещать кнопки непосредственно в столбцах и строках сетки. Я знаю, что это требует больше работы, но с точки зрения производительности вы уменьшите глубину визуального дерева. Если вы по-прежнему хотите использовать HorizontalStacklayout, вы можете установить ВертикальныйOptions="Center" для каждой кнопки. Это должно сосредоточить их.
Вы можете попробовать использовать FlexLayout, чтобы равномерно распределить пространство вокруг каждой кнопки.
Вы можете попробовать следующий способ использования FlexLayout:
<FlexLayout Direction = "Row" JustifyContent = "SpaceEvenly" HorizontalOptions = "Fill" x:DataType = "local:MainPageViewModel" Grid.Row = "2" BackgroundColor = "Blue">
<FlexLayout.Resources>
<Style TargetType = "{x:Type Button}">
<Setter Property = "BackgroundColor" Value = "Transparent"/>
......
</Style>
</FlexLayout.Resources>
<VerticalStackLayout>
<Label>date</Label>
<Button Pressed = "ChangeButtonBackgroundOnPress" CommandParameter = "{Binding Text, Source = {x:Reference MondayButton}}" x:Name = "MondayButton" TextColor = "White" Text = "Pon" ></Button>
</VerticalStackLayout>
<Button Pressed = "ChangeButtonBackgroundOnPress" CommandParameter = "{Binding Text, Source = {x:Reference TuesdayButton}}" x:Name = "TuesdayButton" TextColor = "White" Text = "Wt"></Button>
......
</FlexLayout>
Вот скриншот,
Параметры макета
*AndExpandустарели в MAUI и не имеют функции. Они все еще существуют только по соображениям совместимости и в конечном итоге будут полностью удалены.