CODEWITHSUNDEEP
xamarin.forms
Don Box
Don Box

Reputation: 3336

StackLayout two columns each taking half of the space

I am trying to make two labels each taking 50% of the width of the parent (the StackLayout) I tried with Fill, FillAndExpand, StartAndExpand on both Label's but it didn't work:

<StackLayout Orientation="Horizontal">
    <Label Text="AAAAAAAAAAAAAAAAAAAAAAAAA" HorizontalOptions="FillAndExpand" />
    <Label Text="BBBB" HorizontalOptions="FillAndExpand" />
</StackLayout>

Upvotes: 8

Views: 11761

Answers (3)

James2707
James2707

Reputation: 122

The previous answer doesn't work for me, but what I did was: Set the HorizontalOptions="FillAndExpand" in the StackLayout. Set the WidthRequest of the children with a big number, like 1000. Like this:

<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand">
   <Label WidthRequest="1000" Text="Label 1"/>
   <Label WidthRequest="1000" Text="Label 2"/>
</StackLayout>

Upvotes: -1

Mr Hery
Mr Hery

Reputation: 870

I know this question was asked last year. But I hope my answer will help other.

Actually with StackLayout you can get the center and cut in half. I love using StackLayout because it has it's own automatic sizing, if you put 3 Views in a StackLayout.Children, the StackLayout will divide these 3 columns at the same exact size.

Here's how I do it in C#:

Content = new StackLayout{
   Orientation = StackOrientation.Horizontal, //Set the StackLayout to start from left to the right
   HorizontalOptions = LayoutOptions.CenterAndExpand, //Expand the layout to full width and center it
   Children = {
      new Label{
         Text = "Test One"//you may add HorizontalOptions in here to if you want the text on the left or right
      },
      new Label{
         Text = "Text Two"
      }
   }
};

Here's how I do it in XAML:

<StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand">
   <Label Text="Test One"></Label>
   <Label Text="Text Two"></Label>
</StackLayout>

I hope this would answer the question on StackLayout :)

Upvotes: 2

cvanbeek
cvanbeek

Reputation: 1961

Use a Grid instead.

XAML

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Label Text="AAAAAAAAAAAAAAAAAAAAAAAAA" Grid.Column="0"/>
    <Label Text="BBBB" Grid.Column="1"/>
</Grid>

The two *s mean the columns will have the same width. If you wanted the first column to be twice has big as the second, you could change the first width to 2*.

You can also use EndAndExpand to have the text right-aligned

Upvotes: 10

Related Questions