Xamarin Forms Label & Entry on one line using XAML

1
votes

I am trying to flatten the area in my ListView so that the Label & Entry appear next to each other. I've tried many approaches unsuccessfully.

Can someone show me the XAML for this?

THE XAML:
Using the following XAML...

<telerikDataControls:RadListView x:Name="listSeals" ItemsSource="{ Binding Seals }" IsVisible="True">
    <telerikDataControls:RadListView.ItemTemplate>
        <DataTemplate>
            <telerikListView:ListViewTemplateCell>
                <telerikListView:ListViewTemplateCell.View>

                    <Grid BackgroundColor="{Binding rowID, Converter={ StaticResource ListViewRowBackgroundColorConverter }}">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="150"></RowDefinition>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="150"></ColumnDefinition>
                            <ColumnDefinition Width="*"></ColumnDefinition>
                        </Grid.ColumnDefinitions>

                        <Grid Grid.Column="0">
                            <Label Text="{Binding CategoryName}" />
                        </Grid>

                        <Grid Grid.Column="1">
                            <StackLayout>
                                <Label Text="Off" />
                                <Entry x:Name="txtOff" Text="{Binding OffItem.SamplePotSealCode}" TextChanged="TxtOff_TextChanged" Style="{StaticResource FormEntryStyle}" HorizontalOptions="FillAndExpand"></Entry>

                                <Label Text="On" />
                                <Entry x:Name="txtOn" Text="{Binding OnItem.SamplePotSealCode}" TextChanged="TxtOn_TextChanged" Style="{StaticResource FormEntryStyle}" HorizontalOptions="FillAndExpand"></Entry>
                            </StackLayout>
                        </Grid>
                    </Grid>

                </telerikListView:ListViewTemplateCell.View>
            </telerikListView:ListViewTemplateCell>
        </DataTemplate>
    </telerikDataControls:RadListView.ItemTemplate>
</telerikDataControls:RadListView>

THE CURRENT LAYOUT:
Notice how the OFF & ON labels "stack"... enter image description here

THE DESIRED LAYOUT:
I want the the OFF & ON labels "lay next to" the Entry... enter image description here

2
xamlxamarin.forms

2 Answers

1
votes

You need a nested stack layout with horizontal orientation:

<telerikDataControls:RadListView x:Name="listSeals" 
                                 ItemsSource="{ Binding Seals }" 
                                 IsVisible="True">
<telerikDataControls:RadListView.ItemTemplate>
    <DataTemplate>
        <telerikListView:ListViewTemplateCell>
            <telerikListView:ListViewTemplateCell.View>

            <!--  Previous Code  -->

                    <Grid Grid.Column="1">
                        <StackLayout>
                            <StackLayout Orientation="Horizontal">
                                <Label Text="Off" />
                                <Entry x:Name="txtOff" 
                                       Text="{Binding OffItem.SamplePotSealCode}" 
                                       TextChanged="TxtOff_TextChanged" 
                                       Style="{StaticResource FormEntryStyle}" 
                                       HorizontalOptions="StartAndExpand">
                                </Entry>
                            </StackLayout>
                            <StackLayout Orientation="Horizontal">
                                <Label Text="On" />
                                <Entry x:Name="txtOn" 
                                       Text="{Binding OnItem.SamplePotSealCode}" 
                                       TextChanged="TxtOn_TextChanged"
                                       Style="{StaticResource FormEntryStyle}"
                                       HorizontalOptions="StartAndExpand">
                                </Entry>
                            </StackLayout>
                        </StackLayout>
                    </Grid>
                </Grid>

            </telerikListView:ListViewTemplateCell.View>
        </telerikListView:ListViewTemplateCell>
    </DataTemplate>
</telerikDataControls:RadListView.ItemTemplate>

You may also need to mess with the Horizontal options to get the correct spacing/layout.

3
votes

You can achieve the layout you're trying to with a Grid layout with 3 column definitions and 2 row definitions.

enter image description here

<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="Auto"/>
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="Auto" />
  </Grid.ColumnDefinitions>
  <Label Grid.Row="0" Grid.Column="0" Text="{Binding CategoryName}" />
  <Label Grid.Row="0" Grid.Column="1" Text = "Off" />
  <Label Grid.Row="1" Grid.Column="1" Text="On" />
  <Entry Grid.Row="0" Grid.Column="2" Text="{Binding OffItem.SamplePotSealCode}" />
  <Entry Grid.Row="1" Grid.Column="2" Text="{Binding OnItem.SamplePotSealCode}" />
</Grid>

You may need to play with Horizontal- and VerticalOptions to make it display exactly how you want. This should give an idea of how to structure it into a single Grid layout.