xamarinxamarin.forms

How to position 3 buttons in StackLayout equal width


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 ]


Solution

  • 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