使用 XAML 将 Xamarin 表单标签和条目放在一行上答案

【问题标题】：Xamarin Forms Label & Entry on one line using XAML使用 XAML 将 Xamarin 表单标签和条目放在一行上
【发布时间】：2021-05-07 19:50:49
【问题描述】：

我正在尝试展平我的 ListView 中的区域，以便标签和条目彼此相邻。我尝试了很多方法都没有成功。

谁能给我看一下这个的 XAML 吗？

XAML：
使用以下 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>

当前布局：
请注意 OFF & ON 标签如何“堆叠”...

所需的布局：
我希望“关闭”和“打开”标签“位于”条目旁边......

【问题讨论】：

标签： xaml xamarin.forms

【解决方案1】：

您可以使用具有 3 列定义和 2 行定义的网格布局来实现您想要的布局。

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

您可能需要使用 Horizontal- 和 VerticalOptions 以使其准确显示您想要的方式。这应该可以让您了解如何将其构建为单个 Grid 布局。

【讨论】：

【解决方案2】：

您需要水平方向的嵌套堆栈布局：

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

您可能还需要弄乱“水平”选项以获得正确的间距/布局。

【讨论】：

Xamarin 的一般建议是避免嵌套布局。这些嵌套布局本质上是复制网格布局提供的功能。
您应该始终避免将布局放在布局内（除非父布局是ScrollView）。首选的解决方案是使用 @MaxHampton 推荐的 Grid。