Xamarin.Forms-在另一个元素上放置元素. [英] Xamarin.Forms - position element on top of another.
本文介绍了Xamarin.Forms-在另一个元素上放置元素.的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我的Xamarin.Forms项目中有一个页面,我需要看起来像这样:
I've got a page in my Xamarin.Forms project that I need to look something like this:
我可以放置红色和蓝色框,没问题.但是我不知道如何创建绿色的.
I can position the red and blue boxes, no problem. But I can't figure out how to create the green one.
我使用的XAML如下:
The XAML I use is the following:
<StackLayout HorizontalOptions="FillAndExpand">
<StackLayout VerticalOptions="FillAndExpand" BackgroundColor="Red">
//I'm thinking the green box should be positioned absolutely in here or something?
</StackLayout>
<StackLayout VerticalOptions="End" BackgroundColor="Blue">
<Grid VerticalOptions="EndAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Text="Button" HorizontalOptions="FillAndExpand" BorderRadius="0" VerticalOptions="EndAndExpand" HeightRequest="50" TextColor="White" BackgroundColor="#85C034"></Button>
</Grid>
</StackLayout>
</StackLayout>
推荐答案
Grid
是实现此行为的最佳布局控件.您可以使用*
展开一行以填充,将文本标签嵌套在第一行的内容视图内,然后将第二行设置为所需的高度.
The Grid
is the best layout control to implement this behaviour. You can use *
to expand a row out to fill, nest the text label inside a content view in the first row and then set the second row to the desired height.
EG:
<?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:local="clr-namespace:Grids"
x:Class="Grids.GridsPage">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<ContentView
BackgroundColor="Red" Grid.Row="0">
<Label TextColor="Black"
Text="Text"
Margin="0,0,0,10"
BackgroundColor="#00FF02"
VerticalOptions="End"
HorizontalOptions="Center"/>
</ContentView>
<ContentView BackgroundColor="Blue" Grid.Row="1"/>
</Grid>
</ContentPage>
这篇关于Xamarin.Forms-在另一个元素上放置元素.的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文