Xamarin.Forms: позиционировать метки в StackLayout? - PullRequest
Новая
       13

Xamarin.Forms: позиционировать метки в StackLayout?

0 голосов
/ 22 февраля 2019

Мне наконец удалось отобразить несколько Labels в моем ListView.Мой xaml выглядит так.Как видите, я только что набрал 4 Labels, и вот что отображается: 

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:maps="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps"
             xmlns:local="clr-namespace:GasStations"
             x:Class="GasStations.MainPage">

    <Grid RowSpacing="0">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="50" />
            <RowDefinition Height="auto" />
        </Grid.RowDefinitions>
        <StackLayout Grid.Row="0" x:Name="MapGrid">
            <maps:Map WidthRequest="960" HeightRequest="200" 
                  x:Name="MyMap" IsShowingUser="true"/>
        </StackLayout>
        <StackLayout Grid.Row="1">
            <Button Text="Show list" x:Name="Button_DisplayList"
                VerticalOptions="CenterAndExpand"
                HorizontalOptions="Center"
                Clicked="OnButtonClicked" />
        </StackLayout>
        <StackLayout Grid.Row="2" x:Name="listSection" IsVisible="false" HeightRequest="200">
            <ListView x:Name="ListView_Pets" >
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <StackLayout Orientation="Horizontal" HeightRequest="200">
                                <Label Text="{Binding StoreName}" FontSize="10"/>
                                <Label Text="{Binding Description}" FontSize="14"/>
                                <Label Text="{Binding Street}" FontSize="8"/>
                                <Label Text="{Binding State}" FontSize="16"/>
                            </StackLayout>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
    </Grid>

</ContentPage>

Пока все хорошо.Для всех, кто хочет, есть скриншот здесь .

Но вместо того, чтобы ставить метки рядом друг с другом, я хочу расположить их в разных местах.Например, Label Name будет в верхнем левом углу, а Label Desc будет ниже, в то время как Label Lon будет в нижнем правом углу, а Label Lat будет отцентрировано по горизонтали.

Итак, мои вопросыявляются:

1) Как я могу разместить эти метки в пределах доступного пространства?Есть ли что-то вроде html таблицы эквивалента , которую я могу использовать для размещения меток в определенных местах?

2) Как изменить высоту каждой строки?Причина, по которой я установил StackLayout Orientation на Горизонтальный , заключается в том, что две метки не уместились, если я установил Вертикальный (поэтому выглядит так ).Я пробовал HeightRequest и MinimumHeightRequest, но это ничего не изменило.

Ответы [ 2 ]

0 голосов
/ 22 февраля 2019

Вы можете реализовать используя Grid макет следующим образом: 

<ListView x:Name="ListView_Pets">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Grid VerticalOptions="Center">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Label Grid.Row="0"
                           Grid.Column="0"
                           FontSize="10"
                           Text="{Binding StoreName}"
                           VerticalTextAlignment="Center" />
                    <Label Grid.Row="0"
                           Grid.Column="1"
                           FontSize="14"
                           Text="{Binding Description}"
                           VerticalTextAlignment="Center" />
                    <Label Grid.Row="0"
                           Grid.Column="2"
                           FontSize="8"
                           Text="{Binding Street}"
                           VerticalTextAlignment="Center" />
                    <Label Grid.Row="0"
                           Grid.Column="3"
                           FontSize="16"
                           Text="{Binding State}"
                           VerticalTextAlignment="Center" />
                </Grid>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>
0 голосов
/ 22 февраля 2019

A Сетка должна дать вам то, что вы хотите.Вы можете установить количество строк и столбцов, а также высоту для каждой строки и ширину для каждого столбца .Настройки высоты и ширины могут быть абсолютными (вы указываете явное значение высоты / ширины), автоматическими (в зависимости от содержимого) или пропорциональными значению «*».Вы также можете установить элемент на , охватывающий несколько строк и / или столбцов ... во многом как таблица HTML.

...