Skip to content

StackLayout

Jump to bottom
L edited this page Jan 2, 2018 · 8 revisions

堆栈式地放置内容
可以在xaml中完成视图，也可以在cs代码中完成视图

Xamarin的所有视图和布局都是可以1.在xaml中完成，2.在cs代码中完成视图（类比WPF）

示例

在cs代码中完成视图

varred=newLabel{Text="Stop",BackgroundColor=Color.Red,FontSize=20};varyellow=newLabel{Text="Slow down",BackgroundColor=Color.Yellow,FontSize=20};vargreen=newLabel{Text="Go",BackgroundColor=Color.Green,FontSize=20};//内容Content=newStackLayout{//间距Spacing=10,Children={red,yellow,green}};

在xaml中完成视图

这里注意默认生成的是Page,不是ContentPage，要手动修改，不然无效

<ContentPagex:Class="XamarinDemo.DemoPages.StackLayoutExample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="using:XamarinDemo.DemoPages"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"mc:Ignorable="d"Padding="20"><StackLayout Spacing="10"><Label Text="Stop"BackgroundColor="Red"Font="20"/><Label Text="Slow down" BackgroundColor="Yellow" Font="20"/><Label Text="Go" BackgroundColor="Green" Font="20"/></StackLayout></ContentPage>

效果

1

指定方向

Orientation:摆放方向

//垂直（从上到下）
Vertical = 0,
//水平（从左往右）
Horizontal = 1

VerticalOptions:垂直（上下）方向的选项
HorizontalOptions:水平（左右）方向的选项

Start
Center
End
Fill
StartAndExpand
CenterAndExpand
EndAndExpand
FillAndExpand

设置方向示例

//内容Content=newStackLayout{//间距Spacing=10,//垂直方向上，从底部出发VerticalOptions=LayoutOptions.End,//堆放三个Label的方向是水平Orientation=StackOrientation.Horizontal,//水平方向上，从开始（左边）出发HorizontalOptions=LayoutOptions.Start,Children={red,yellow,green}};

效果

2

示例代码

https://github.com/zLulus/NotePractice/tree/dev3/Xamarin.Forms/XamarinDemo/XamarinDemo/XamarinDemo/DemoPages 的StackLayoutExample

Children

StackLayout的Children定义是

// 摘要:
// Gets an IList<View> of child element of the Layout.
public IList<T> Children { get; }

所以Children可以装下View的集合，不止是Label，也可以是ListView等等

示例

varlistView=newXamarin.Forms.ListView{RowHeight=40};listView.ItemsSource=newstring[]{"Buy pears","Buy oranges","Buy mangos","Buy apples","Buy bananas"};Content=newStackLayout{VerticalOptions=LayoutOptions.FillAndExpand,Children={listView}};

示例代码

https://github.com/zLulus/NotePractice/tree/dev3/Xamarin.Forms/XamarinDemo/XamarinDemo/XamarinDemo/DemoPages 的StackLayoutExample 的ListViewInStackLayout

Tips

同时设置xaml和cs代码,哪个在后面，以哪个为准，相当于被覆盖了

Clone this wiki locally