如何在 Xamarin 表单的网格视图中添加条目控件？答案

【问题标题】：How to add Entry Control inside Grid View in Xamarin Forms?如何在 Xamarin 表单的网格视图中添加条目控件？
【发布时间】：2017-09-12 04:59:31
【问题描述】：

我在网格视图控件中添加条目时遇到问题。我有一个列表视图，其中包含带有复选框和条目的数据。如果用户选择了某个项目，他还可以在条目中添加该项目的数量。我在网格视图中添加条目时遇到问题。条目只显示一半。文本显示不正确。我在 xaml 中添加条目。

<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>

我得到以下输出。

紫色背景的控件是我的条目。文本显示不正确。任何帮助将不胜感激。提前致谢。我已经在 Xamarin 论坛 here 中发布了问题。

【问题讨论】：

标签： xaml listview xamarin gridview xamarin.forms

【解决方案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>

注意：我选择了 Switch 与您的第 3 方复选框

【讨论】：

顺便说一句，我没有使用任何第三方复选框。为此，我在 Xamarin 论坛的帮助下创建了自定义复选框。 ;)

【解决方案2】：

像这样使用 StackLayout

 <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>

您可以使用 WidthRequest 属性和 HorizontalOption="FillAndExpand" 更改大小

【讨论】：

感谢您的回答。我需要网格视图来实现我的目的。