Xamarin使用XAML在一行上填写标签和条目

时间:2019-04-30 17:40:00

标签: xaml xamarin.forms

我试图在我的ListView中放一个区域,以使Label&Entry彼此相邻。我尝试了许多方法都没有成功。

有人可以为此显示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标签如何“堆叠” ... enter image description here

所需的布局:
我想要“关闭”和“开启”标签“贴在”条目旁边... enter image description here

2 个答案:

答案 0 :(得分:2)

您可以使用具有3个列定义和2个行定义的Grid布局来实现您要尝试的布局。

enter image description here

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

您可能需要使用Horizo​​ntal-和VerticalOptions使其准确显示所需的内容。这应该给出如何将其构造为单个Grid布局的想法。

答案 1 :(得分:1)

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

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

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