时间戳

首页 > 解决方案 > Xamarin Forms Label & Entry on one line using XAML

xaml - Xamarin Forms Label & Entry on one line using XAML

问题描述

I am trying to flatten the area in my ListView so that the Label & Entry appear next to each other. I've tried many approaches unsuccessfully.

Can someone show me the XAML for this?

THE XAML:
Using the following 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>

THE CURRENT LAYOUT:
Notice how the OFF & ON labels "stack"... enter image description here

THE DESIRED LAYOUT:
I want the the OFF & ON labels "lay next to" the Entry... enter image description here

标签： xamlxamarin.forms

解决方案

You can achieve the layout you're trying to with a Grid layout with 3 column definitions and 2 row definitions.

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>

You may need to play with Horizontal- and VerticalOptions to make it display exactly how you want. This should give an idea of how to structure it into a single Grid layout.

推荐阅读