CODEWITHSUNDEEP
xamllistviewxamaringridviewxamarin.forms
luckyShubhra
luckyShubhra

Reputation: 2751

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

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.

enter image description here

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.

Upvotes: 0

Views: 2476

Answers (2)

SushiHangover
SushiHangover

Reputation: 74164

enter image description here

<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

Upvotes: 2

safi
safi

Reputation: 879

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"

Upvotes: 1

Related Questions