TableView labels alignment

RossDargan.0957RossDargan.0957 GBInsider, University ✭✭

I have a tableview with a couple of entry cells in them, but it looks awful because everything is out of alignment as shown in the attached file.

Is there any build in way to correct this without using a custom renderer?

Posts

  • CraigDunnCraigDunn USXamarin Team Xamurai

    You definitely don't need a custom renderer to solve formatting issues; you could create a custom cell with a Label and Entry and use a layout that lets you specify exact widths or Y coordinates for the Entry. A RelativeLayout might help?

  • RossDargan.0957RossDargan.0957 GBInsider, University ✭✭

    Thanks Craig - I had done this, but it has it's own issues as I've just posted in this forum.

    Ta

    Ross

  • JeremyHerbisonJeremyHerbison CAMember ✭✭
    edited March 2015

    Hey, same question here. I really just want a list of labels and entry boxes, all lined up along the center of the screen, but with sections delimited by TableSections. Shouldn't be hard, right? Grids provide all the orientation stuff I want, but not the TableView look and feel (particularly on iOS).

    I tried to use StackLayout inside each viewcell, with a fixed width on the entry boxes. That works sorta, but then the UI doesn't scale with different screens.

    A good example in XAML would be super appreciated.

  • JeremyHerbisonJeremyHerbison CAMember ✭✭
    edited March 2015

    Alright, this seems to work. If you place a grid inside each ViewCell, you can be sure they'll all line in the same spot according to the column definitions.

            <TableSection Title="Person">
              <ViewCell>
                <Grid>
                  <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                  </Grid.ColumnDefinitions>
                  <Label Text="Surname" XAlign="End" Grid.Row="0" Grid.Column="0" />
                  <Entry Text="{Binding Surname}" Grid.Row="0" Grid.Column="1" />
                </Grid>
              </ViewCell>
              <ViewCell>
                <Grid>
                  <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                  </Grid.ColumnDefinitions>
                  <Label Text="First Name" XAlign="End" Grid.Row="0" Grid.Column="0" />
                  <Entry Text="{Binding FirstName}" Grid.Row="0" Grid.Column="1" />
                </Grid>
              </ViewCell>
            </TableSection>
    
  • hvaughanhvaughan USMember ✭✭✭

    Thanks @JeremyHerbison. that works great! Also, if your Label Text is too long and is being cut off, you can make another column and use ColumnSpan:

    <Grid Padding="5, 6, 5, 6">
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
      </Grid.ColumnDefinitions>
      <Label Text="First Name of a Person"
                  Grid.Row="0" Grid.Column="0"
                  Grid.ColumnSpan="2"/>
      <Entry Text="{Binding FirstName}"
                  Grid.Row="0" Grid.Column="2"/>
    </Grid>
    
Sign In or Register to comment.