如何在Xamarin中设计表单？

Question

我有设计一页,但它看起来不像要求.我是Xamarin的新手,我不知道如何设计像附加图像.

我的代码是

 <Grid Margin="5">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="80"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="40"/>
                <RowDefinition Height="40"/>
                <RowDefinition Height="40"/>
                <RowDefinition Height="40"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="40"/>
            </Grid.RowDefinitions>
            <Label Text="From" Font="20" Grid.Row="0" Grid.Column="0"></Label>
            <Entry x:Name="txtFrom" HorizontalOptions="FillAndExpand" Grid.Row="0" Grid.Column="1" ></Entry>
            <Label Text="To" Font="20" Grid.Row="1" Grid.Column="0"></Label>
            <Entry x:Name="txtTo"  Grid.Row="1" Grid.Column="1" HorizontalOptions="FillAndExpand"></Entry>
            <Label Text="Subject" Font="20" Grid.Column="0" Grid.Row="2"></Label>
            <Entry x:Name="txtSubject" HorizontalOptions="FillAndExpand" Grid.Column="1" Grid.Row="2"></Entry>
            <Label Text="Body" Font="20" Grid.Column="0" Grid.Row="3"></Label>
            <Editor  x:Name="txtBody" HeightRequest="100"  Grid.Row="4" Grid.ColumnSpan="2"></Editor>
            <Button x:Name="btnSend"  Text="Send" BackgroundColor="Orange" Grid.Row="5" Grid.ColumnSpan="2"></Button>

        </Grid>

我的Ui看起来像另一张附图.

Answer 1

我看到你的设计和你希望复制的设计有三个很大的不同:

1. 他们Placeholder在s中使用s,Entry这样当没有输入任何内容时,"name"将显示为Entry文本.
2. Body Editor占用了可用页面的其余部分.
3. 所述Editor对身体通过在例如黑色边界包围.

以下是解决每个问题的一些帮助:

问题1:使用占位符

而不是使用的Label旁边的Entry每个输入,可以改为使用Placeholder的Entry.只要空,Entry就会显示值.PlaceholderEntry

例如,您可以将名称更改Entry为:

<Entry x:Name="txtFrom" HorizontalOptions="FillAndExpand" Placeholder="Name" ></Entry>

使用此实现,您甚至不需要列,Grid因为您不需要Labels

这里是Entry和.的文档Placeholder

问题2:用你的网页填充页面 Editor

为了Editor占用页面上的剩余空间,您需要使用" FillAndExpand布局选项"属性.我个人建议把你的编辑带出来Grid,然后用这样的方式将它们包围起来StackLayout:

<StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand">
    <Grid>
        <!--Your Grid without the Editor-->
    </Grid>
    <StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand">
        <Editor VerticalOptions="FillAndExpand"/>
    </StackLayout>
    <!--Put your button here-->
</StackLayout>

这是Xamarin的文档 LayoutOptions

这是一篇很好的SO帖子 LayoutOptions

问题3:在您的周围添加边框 Editor

在Xamarin.Forms中添加边框并没有什么好方法.根据这个线索把一个StackLayout具有不同的BackgroundColor内部另一StackLayout并加入Padding可以做到这一点.我在这里实现了它:

<StackLayout Orientation="Vertical" BackgroundColor="Black" Padding="4" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
    <StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" BackgroundColor="White" Padding="4">
        <!--Put your editor here-->
    </StackLayout>
</StackLayout>