CODEWITHSUNDEEP
xamlxamarin.forms
Ed. M.
Ed. M.

Reputation: 71

Xamarin Forms: Centering multiple, different controls in a layout?

My XAML looks like this:

<StackLayout Orientation="Vertical" HorizontalOptions="Center">
  <controls:BindablePicker HorizontalOptions="Center" />
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="2*" />
      <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <ListView Grid.Row="0" Grid.Column="1" HorizontalOptions="Center" SeparatorVisibility="None">
      <ListView.ItemTemplate>
        <DataTemplate>
          <ViewCell>
            <ViewCell.View>
              <Grid BackgroundColor="Aqua">
                <Grid.RowDefinitions>
                  <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="Auto" />
                  <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <controls:BindablePicker Title="Length" Grid.Row="0" Grid.Column="0" BackgroundColor="White" />
                <controls:BindablePicker Title="Units" Grid.Row="0" Grid.Column="1" BackgroundColor="White" />
              </Grid>
            </ViewCell.View>
          </ViewCell>
        </DataTemplate>
      </ListView.ItemTemplate>
    </ListView>
  </Grid>
</StackLayout>

Here's what I'm getting: Attempt

This is pretty much what I want, except I want the content centered within the aqua area so everything is centered horizontally. I don't mind if the left cell is right justified and the right cell is left justified.

Note that I'm wanting to add other content beneath this, like labels and other grids, all centered on the page.

Any help would be greatly appreciated. Thanks.

Upvotes: 0

Views: 633

Answers (1)

Ahmad ElMadi
Ahmad ElMadi

Reputation: 2617

First of all I do not think that you need a row definition in your inner grid since you have only one row.

Secondly for performance sake,do not user "Auto" , just remove the width property from the column definitions. By doing this both columns will have the same width... I hope ;)

I think if you made your list view like below then it would fix it, but also try it without HorizontalOptions for the controls. 

<ListView Grid.Row="0" Grid.Column="1" HorizontalOptions="Center" SeparatorVisibility="None">
      <ListView.ItemTemplate>
        <DataTemplate>
          <ViewCell>
            <ViewCell.View>
              <Grid BackgroundColor="Aqua">

                <Grid.ColumnDefinitions>
                  <ColumnDefinition  />
                  <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <controls:BindablePicker Title="Length" Grid.Column="0" BackgroundColor="White" HorizontalOptions = "End" />
                <controls:BindablePicker Title="Units"  Grid.Column="1" BackgroundColor="White" HorizontalOptions = "Start" />
              </Grid>
            </ViewCell.View>
          </ViewCell>
        </DataTemplate>
      </ListView.ItemTemplate>
    </ListView>

Hint: The next release of Xamarin.Forms, which is in the alpha channel now, contains a bindable picker so you do not have to user a 3rd party now.

Upvotes: 1

Related Questions