How to position 3 buttons in StackLayout equal width

user_8914403 0
Viewed 12735

Anyone know how to position 3 buttons in StackLayout with equal width? I have it working with Grid with

<Grid x:Name="MyGrid" Grid.Row="0" BindingContext="{x:Reference Name=Button1}"  HeightRequest="{Binding Width}">

I would like to find a way to show 3 buttons on same line with same width equally without a Grid For example all 3 buttons of equal length fitting across horizontally in StackLayout

[ Button 1 ] [ Button 222 ] [ Button 333333 ]

xamarin.forms xamarin
4 Answers

Still using Grid, just specify width of columns in percent (col spacing set for fun):

    <Grid 
     ColumnDefinitions="33.33*, 33.33*, 33.33*"
     ColumnSpacing="8" 
     HorizontalOptions="FillAndExpand">
        <Button Text="1" Grid.Column="0" HorizontalOptions="FillAndExpand"/>
        <Button Text="2" Grid.Column="1" HorizontalOptions="FillAndExpand"/>
        <Button Text="3" Grid.Column="2" HorizontalOptions="FillAndExpand"/>          
     </Grid>

enter image description here

Updated: use one-line ColumnDefinitions property in Xamarin.Forms 4.8

user_71494540

RelativeLayout:

<RelativeLayout HorizontalOptions="FillAndExpand">
    <Button Text="Button 1" RelativeLayout.XConstraint="{ConstraintExpression 
            Type=RelativeToParent,Property=Width,Factor=.0000,Constant=0}"
            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,
            Property=Width,Factor=.3333,Constant=0}"/>
    <Button Text="Button 222" RelativeLayout.XConstraint="{ConstraintExpression
            Type=RelativeToParent,Property=Width,Factor=.3333,Constant=0}"
            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,
            Property=Width,Factor=.3333,Constant=0}"/>
    <Button Text="Button 333333" RelativeLayout.XConstraint="{ConstraintExpression
            Type=RelativeToParent,Property=Width,Factor=.6666,Constant=0}"
            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,
            Property=Width,Factor=.3333,Constant=0}"/>
</RelativeLayout>

enter image description here

StackLayout:

<StackLayout Orientation="Horizontal">
    <Button x:Name="button1" Text="Button 1"/>
    <Button Text="Button 222" WidthRequest="{Binding Path=Width, Source={x:Reference button1}}"/>
    <Button Text="Button 333333" WidthRequest="{Binding Path=Width, Source={x:Reference button1}}"/>
</StackLayout>

enter image description here

user_89353800 
<StackLayout VerticalOptions="EndAndExpand" Orientation="Horizontal" Spacing="2" Padding="2">
            <Button Text="Move Up" HorizontalOptions="FillAndExpand" BackgroundColor="AntiqueWhite" TextColor="Black" />
            <Button Text="Move Down" HorizontalOptions="FillAndExpand" BackgroundColor="AntiqueWhite" TextColor="Black" />
            <Button Text="Move Right" HorizontalOptions="FillAndExpand" BackgroundColor="AntiqueWhite" TextColor="Black" />
            <Button Text="Move Left" HorizontalOptions="FillAndExpand" BackgroundColor="AntiqueWhite" TextColor="Black" />
</StackLayout>

Seems like an old thread, but for anyone who might want to implement with StackLayout, this will accurately place the buttons with equal spacing in horizontal orientation.

user_13562870

Flexlayout provides an easy solution for this, by setting its Direction property as "Row" and JustifyContent property as "SpaceEvenly". Please find the code below:

<FlexLayout Direction="Row" AlignItems="Center" 
JustifyContent="SpaceEvenly" HeightRequest="50">
    <Button Text="Button 1" BackgroundColor="Red"/>
    <Button Text="Button 2" BackgroundColor="Green"/>
    <Button Text="Button 3" BackgroundColor="Aquamarine"/>
</FlexLayout>

Solution using Flexlayout

user_186081840
Related