Labels not aligning with controls - xamarin

Question

I have created a control which should line up but I don't understand why not. It should display a label textbox then a button the textbox and button line up ok but the label does not.
Also, I would prefer the two buttons to show side by side also how does one tell the textbox to take up if not all of the width properly
<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"
mc:Ignorable="d"
x:Class="WMS.Controls.EntryWithLabels">
<ContentView.Content>
<StackLayout Orientation="Horizontal" Padding="2">
<Label x:Name="FieldText" ></Label>
<telerikInput:RadEntry x:Name="FieldValue" WidthRequest="200" WatermarkText="FieldCaption"/>
<telerikInput:RadButton x:Name="button" Text="..." />
</StackLayout>
</ContentView.Content>
</ContentView>
View that the control is consumed in
<ContentPage.Content>
<StackLayout>
<EntryWithLabels TitleText="Item" CaptionText="Item"></EntryWithLabels>
<EntryWithLabels TitleText="Description" CaptionText="Description"></EntryWithLabels>
<EntryWithLabels TitleText="UOM" CaptionText="UOM"></EntryWithLabels>
<EntryWithLabels TitleText="From Whse" CaptionText="From Whse"><EntryWithLabels>
<EntryWithLabels TitleText="Avaiable" CaptionText="Avaiable"></EntryWithLabels>
<EntryWithLabels TitleText="To Whse" CaptionText="To Whse"></EntryWithLabels>
<EntryWithLabels TitleText="To Bin" CaptionText="To Bin"></EntryWithLabels>
<EntryWithLabels TitleText="Batch" CaptionText="Batch"></EntryWithLabels>
<EntryWithLabels TitleText="Quantity" CaptionText="Quantity"></EntryWithLabels>
<telerikInput:RadButton x:Name="button" BackgroundColor="#fdd57d" Text="Close" />
<telerikInput:RadButton x:Name="btnClear" BackgroundColor="#fdd57d" Text="Clear" />
<telerikInput:RadButton x:Name="btnSave" BackgroundColor="#fdd57d" Text="Save" />
</StackLayout>
</ContentPage.Content>

Answer 1

The easiest way is to change your EntryWithLabels view to use the following Xaml:
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"
mc:Ignorable="d"
x:Class="WMS.Controls.EntryWithLabels">
<ContentView.Content>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label x:Name="FieldText" Grid.Column="0"></Label>
<telerikInput:RadEntry x:Name="FieldValue" WidthRequest="200" WatermarkText="FieldCaption" Grid.Column="1"/>
<telerikInput:RadButton x:Name="button" Text="..." Grid.Column="2"/>
</Grid>
</ContentView.Content>
</ContentView>
The width definitions of the column are relative, since I didn't compile and view the code, you might need to adapt the values. With the current definition, the first and last columns would use 1/5th of the screen's width and the center column 3/5ths.
Another variant would be to set the first column to a fixed with of 210 (leaving a bit of margin for your label). Then the other columns would take 3/4th and 1/4th of the remaining space.
<Grid.ColumnDefinitions>
<ColumnDefinition Width="210"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
Last but not least you could also set the first and last column to a fixed value.
<Grid.ColumnDefinitions>
<ColumnDefinition Width="210"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="210"/>
</Grid.ColumnDefinitions>
In that case the center column would use all the remaining screen width (screen width - (2* 210) available.