How to add Entry Control inside Grid View in Xamarin Forms? - xaml

Question

I am facing problem to add Entry inside Grid View Control. I have a list view which will have data with checkbox and entry. If user selects certain item, he can also add quantity of the item in entry. I am facing issue adding entry in grid view. Entry is only displayed half. Text is not displayed correctly. I am adding Entry in xaml as.
<StackLayout>
<Label Text="Items"></Label>
<ListView x:Name="ItemsListView" RowHeight="60">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Grid Padding="5,0" RowSpacing="1" ColumnSpacing="1" >
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Text="{Binding Title}" Grid.ColumnSpan="2" Grid.Row="1" Margin="2" BackgroundColor="Green"></Label>
<common:CheckBox Grid.Column="3" Grid.Row="1" HeightRequest="20" WidthRequest="20"
VerticalOptions="Center" Checked="{Binding isChecked ,Mode=TwoWay}"
CheckedImage="checkbox_checked" UnCheckedImage="checkbox_unchecked"
CommandParameter="{Binding .}" BackgroundColor="Brown"/>
<Entry Grid.Column="3" Grid.Row="1" IsEnabled="False" Text="CountStr" FontSize="Small" VerticalOptions="End" BackgroundColor="Purple" />
</Grid>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Button Text="Done" HorizontalOptions="CenterAndExpand"
CommandParameter="{Binding .}" Clicked="Button_Clicked"/>
</StackLayout>
I am getting following output.
Control with purple background is my Entry. Text is not displayed correctly. Any help will be appreciated. Thanks in advance.
I have already posted question in Xamarin Forums here.

Answer 1

<Grid Padding="5,0" RowSpacing="1" ColumnSpacing="1">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<Label Text="Apple" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Margin="2" VerticalTextAlignment="Center" BackgroundColor="Green" />
<Switch Grid.Row="0" Grid.Column="2" VerticalOptions="Center" HorizontalOptions="Center" BackgroundColor="Brown" />
<Entry Text="CountStr" Grid.Row="0" Grid.Column="3" IsEnabled="false" HorizontalOptions="Center" FontSize="Small" BackgroundColor="Purple"/>
</Grid>
Note: I sub'd in a Switch vs. your 3rd-party Checkbox

Answer 2

use StackLayout like this
<StackLayout Padding="5,0" Orientation="Horizontal">
<Label Text="{Binding Title}" WidthRequest="120" Margin="2" BackgroundColor="Green"/>
<common:CheckBox HeightRequest="20" WidthRequest="20" Checked="{Binding isChecked, Mode=TwoWay}" CheckedImage="checkbox_checked" UnCheckedImage="checkbox_unchecked" CommandParameter="{Binding .}" BackgroundColor="Brown"/>
<Entry WidthRequest="120" IsEnabled="False" Text="CountStr" FontSize="Small" VerticalOptions="End" BackgroundColor="Purple" />
</StackLayout>
you can change the Size using the WidthRequest property and HorizontalOption="FillAndExpand"