CODEWITHSUNDEEP
c#xamarinxamarin.formsvisual-studio-2017xamarin.forms.listview
fdkgfosfskjdlsjdlkfsf
fdkgfosfskjdlsjdlkfsf

Reputation: 3303

Xamarin.Forms: issues positioning labels and setting row height?

My xaml has 6 labels that display data. I'm trying to set them, but I'm having trouble doing so. This is how the form should be rendered:

enter image description here

Here's what I've tried so far. Here's the xaml:

<?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>
                            <Grid Padding="10,10,10,10">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="300"></RowDefinition>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition  Width="200"></ColumnDefinition>
                                </Grid.ColumnDefinitions>
                                <StackLayout BackgroundColor="#2FA4D9" Grid.Row="0" Grid.Column="0" HeightRequest="300" WidthRequest="200">
                                    <Label Text="{Binding Name}" FontSize="15" TextColor="White" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
                                    <Label Text="{Binding Description}" FontSize="15" TextColor="White" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
                                    <Label Text="{Binding Lon}" FontSize="15" TextColor="White" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
                                    <Label Text="{Binding Lat}" FontSize="16" TextColor="White" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
                                </StackLayout>
                            </Grid>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
    </Grid>

</ContentPage>

This is the result. It clearly doesn't look anything like the image above:

enter image description here

Besides all the issues with the labels, what doesn't seem to change is the row height: <RowDefinition Height="300"> doesn't change anything, and neither does HeightRequest="200".

Any help is appreciated.

Upvotes: 0

Views: 711

Answers (1)

DavidS
DavidS

Reputation: 2934

The ViewCell definition you have defines a Grid with a single cell inside it (one row and one column. From the UI example you have, it looks more like what you want is 2 columns and 3 rows, something like this:

<ViewCell>
    <Grid Padding="10,10,10,10">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Label Text="{Binding Name}" FontSize="15" TextColor="Black" Grid.Row="0" Grid.Column="0"/>
        <Label Text="{Binding Description}" FontSize="15" TextColor="Black" Grid.Row="1" Grid.Column="0"/>
        <Label Text="{Binding Lon}" FontSize="15" TextColor="White" BackgroundColor="#2FA4D9" Grid.Row="0" Grid.Column="1"/>
        <Label Text="{Binding Lat}" FontSize="16" TextColor="White" BackgroundColor="#2FA4D9" Grid.Row="1" Grid.Column="1"/>
    </Grid>
</ViewCell>

This is based on the code sample you have, so won't completely implement the UI design, but should get closer. The key is to have the Labels in their own cell in the Grid rather than having them all in a single StackLayout.

You will also likely need to set the RowHeight (as Jason noted) or set HasUnevenRows="true" on the ListView.

Upvotes: 2

Related Questions