Xamarin.Forms一个简单的页面

Xamarin.Forms开发前端页面，有一个准则就是：一切按照显示的效果为基准。

如上页面，暂不管下面的功能条和顶部的Title显示，下一篇文件会简单说明一下。

<StackLayout >

<StackLayout Orientation="Horizontal">

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="Auto"></RowDefinition>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto"></ColumnDefinition>

<ColumnDefinition Width="*"></ColumnDefinition>

</Grid.ColumnDefinitions>

</Grid>

<Label Text="人员："

FontSize="20"

Padding="10"

Grid.Row="0"

Grid.Column="0"

HorizontalOptions="Start"></Label>

<Entry Grid.Row="0"

Grid.Column="1"

HorizontalOptions="FillAndExpand"></Entry>

</StackLayout>

<StackLayout Orientation="Horizontal">

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="Auto"></RowDefinition>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto"></ColumnDefinition>

<ColumnDefinition Width="*"></ColumnDefinition>

</Grid.ColumnDefinitions>

</Grid>

<Label Text="项目："

FontSize="20"

Padding="10"

Grid.Row="0"

Grid.Column="0"

HorizontalOptions="Start"></Label>

<Entry Grid.Row="0"

Grid.Column="1"

HorizontalOptions="FillAndExpand"></Entry>

</StackLayout>

<StackLayout Orientation="Horizontal">

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="Auto"></RowDefinition>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto"></ColumnDefinition>

<ColumnDefinition Width="*"></ColumnDefinition>

</Grid.ColumnDefinitions>

</Grid>

<Label Text="名称："

FontSize="20"

Padding="10"

Grid.Row="0"

Grid.Column="0"

HorizontalOptions="Start"></Label>

<Entry Grid.Row="0"

Grid.Column="1"

HorizontalOptions="FillAndExpand"></Entry>

</StackLayout>

以上写的是“人员：____”,"项目：______","名称：______"这部门的内容。

<Label Text="内容："

FontSize="20"

Padding="10"></Label>

<StackLayout BackgroundColor="White"

Padding="4">

<StackLayout Padding="4"

BackgroundColor="Black">

<Editor Placeholder="请输入内容"

HeightRequest="300"

BackgroundColor="AntiqueWhite"

TextColor="Black"></Editor>

</StackLayout>

</StackLayout>

中间这一段写的是"内容："+"输入文本框"，输入文本框嵌套了一个<StackLayout>然后做了一个黑色的边框。

<StackLayout Orientation="Horizontal">

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="40"></RowDefinition>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="*"></ColumnDefinition>

<ColumnDefinition Width="*"></ColumnDefinition>

</Grid.ColumnDefinitions>

</Grid>

<Button Grid.Row="0"

Grid.Column="0"

Text="清空"

TextColor="Black"

x:Name="Button_MaskID"

HorizontalOptions="CenterAndExpand"

Margin="12"

BackgroundColor="#AFEEEE"

CornerRadius="12"

FontSize="20"></Button>

<Button Grid.Row="0"

Grid.Column="1"

Text="提交"

TextColor="Black"

x:Name="Button_MaskPosition"

HorizontalOptions="CenterAndExpand"

Margin="12"

BackgroundColor="#AFEEEE"

CornerRadius="12"

FontSize="20"></Button>

</StackLayout>

</StackLayout>

最后这一段写的是“清空”和“提交”按钮，并列在一行并且分别在自己的区域内居中。