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

Reputation: 3301

Xamarin.Forms: Position labels in StackLayout?

I was finally able to display several Labels in my ListView. My xaml looks like this. As you can see, I just slapped 4 Labels and that's what's being displayed:

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

So far, so good. For anyone interested, there's a screenshot here.

But instead of setting the labels one next to the other, I want to position in different places. For example, Label Name will be in the top left corner and Label Desc will be below, while Label Lon will be in the bottom right corner and Label Lat will be horizontally centered.

So my questions are:

1) How can I position these labels within the available space? Is there something like an html table equivalent that I can use to position the labels at specific places?

2) How can I change the height of each row? The reason I set StackLayout Orientation to Horizontal is because two of the labels did not fit if I set to Vertical (that's why it looks like this). I tried HeightRequest and MinimumHeightRequest but it didn't change anything.

Upvotes: 0

Views: 3376

Answers (3)

Ibrahim Shara&#39;h
Ibrahim Shara&#39;h

Reputation: 1

Just try this:

<Label Text="My text" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="End" />

and make sure the HorizontalOptions in StackLayout is HorizontalOptions="EndAndExpand"

Upvotes: 0

Himanshu Dwivedi
Himanshu Dwivedi

Reputation: 8124

You can implement using Grid layout like this:

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

Upvotes: 1

jgoldberger - MSFT
jgoldberger - MSFT

Reputation: 6098

A Grid should give you what you want. You can set the number of rows and columns and the height for each row and the width for each column. Height and width settings can be absolute (you provide the explicit height/width value), auto (based on content), or proportional with a "*" value. You can also set an item to span multiple rows and/or columns... much like an HTML table.

Upvotes: 1

Related Questions