[英]Xamarin.Forms: Position labels in StackLayout?
I was finally able to display several Labels
in my ListView.我终于能够在我的 ListView 中显示几个
Labels
。 My xaml looks like this.我的 xaml 看起来像这样。 As you can see, I just slapped 4
Labels
and that's what's being displayed:如您所见,我只打了 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>
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.例如,
Label Name
将在左上角, Label Desc
将在下方,而Label Lon
将在右下角,而Label Lat
将水平居中。
So my questions are:所以我的问题是:
1) How can I position these labels within the available space? 1) 如何在可用空间内放置这些标签? Is there something like an
html
table equivalent that I can use to position the labels at specific places?是否有类似
html
表的等价物可用于将标签定位在特定位置?
2) How can I change the height of each row? 2)如何改变每一行的高度? 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 ).我将
StackLayout Orientation
设置为Horizontal的原因是因为如果我设置为Vertical ,其中两个标签不适合(这就是为什么它看起来像这样)。 I tried HeightRequest
and MinimumHeightRequest
but it didn't change anything.我尝试了
HeightRequest
和MinimumHeightRequest
但它没有改变任何东西。
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.
您还可以将一项设置为跨越多行和/或多列 ……就像一个HTML表一样。
You can implement using Grid
layout like this: 您可以像这样使用
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>
Just try this:试试这个:
<Label Text="My text" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="End" />
and make sure the HorizontalOptions in StackLayout is HorizontalOptions="EndAndExpand"
并确保StackLayout 中的
HorizontalOptions="EndAndExpand"
是HorizontalOptions="EndAndExpand"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.