Answers

• gdk INMember ✭✭✭

  January 2017

  Hi, You have to set Grid for that type of design. you can take single column defination and two row definations for that grid. using this type of layout you can devided height equally. try with this following code.

  sample code:

     <Grid>
        <Grid.ColumDefination >
              <ColumnDefination Width = "Auto"/>
        </Grid.ColumnDefination>
  
        <Grid.RowDefination >
                  <RowDefination Height = "Auto"/>
                  <RowDefination Height = "Auto"/>
        </Grid.RowDefination>
  
           <StackLayout VerticalOptions="CenterAndExpand">
              <Label Text = "Text1" Grid.Column = "0" Grid.Row = "0" BackGroundColor = "set your required color"/>
              <Label Text = "Text2" Grid.Column = "0" Grid.Row = "1" BackGroundColor = "set your required color"/>
           </StackLayout>
     </Grid>
  

  0
• seanyda GBMember ✭✭✭✭✭

  January 2017

  Grid g = new Grid
              {
                  RowDefinitions = {
                      new RowDefinition { Height = new GridLength(1, GridUnitType.Star)}
                  },
                  ColumnDefinitions = {
                      new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star)},
                      new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star)}
                  }
              };
  

  0
• Irreal RSUniversity ✭✭✭

  January 2017 Accepted Answer

  This whole topic is a bit of a mess, but let's sort it out.

  @Bertwin, in your post you talk about one row and two columns, but your attached picture shows two rows and one column.

  gdk showed you an example of what your picture is showing, BUT, he used an extra stacklayout which is an error, the two labels should just be inside the grid, no stacklayout around them.
  He also used "Auto" sizing which in this case is useless and slower for no reason, what you need in your case is to equaly divide the height and take the full width, which is just "*" for both the column and the two rows.

  Ipdavies showed what you wrote in your text, one row and two columns (which is not what is in your attached picture), and he also did it in code instead of in xaml.
  So, really, you have both ways shown and can decide which one is it that you need and go ahead with that one.

  Lastly, to fully achieve the look from your picture, you should set the first label's VerticalOptions to EndAndExpand
  and the second one's to StartAndExpand, then play arround with adding margins as needed to get the full effect.

  Good luck and let us know if you have further issues

  5
• Bertwin PHMember ✭✭

  January 2017 Accepted Answer

  @Irreal : thank you so much for the detailed response .. my question was wrong its the other way around .. 2 rows and one column .. what i did was i created a linearlayout and have this property for each layout ..

  android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:layout_weight="1"
  

  5