Xamarin Forms Label & Entry on one line using XAML - xaml

Question

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"...
THE DESIRED LAYOUT:
I want the the OFF & ON labels "lay next to" the Entry...

Answer 1

You can achieve the layout you're trying to with a Grid layout with 3 column definitions and 2 row definitions.
<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.

Answer 2

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.