如何在 Xamarin 中设计表单？

Question

我有设计一页，但它看起来不像要求。我是 Xamarin 的新手，我不知道如何设计像 Attached image.

我的代码是

 <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

我也试过了，效果很好！

<StackLayout VerticalOptions="CenterAndExpand" Orientation="Vertical"BackgroundColor="Accent" Padding="4">
 <StackLayout VerticalOptions="CenterAndExpand" Orientation="Vertical" BackgroundColor="AliceBlue" Padding="4">
                <ScrollView>
                    <Editor
                        Text="Write Corrections Here..."
                        MaxLength="250"
                        HeightRequest="100"
                        WidthRequest="320"
                        BackgroundColor="AliceBlue" 
                        HorizontalOptions="CenterAndExpand"
                        VerticalOptions="CenterAndExpand"                        
                        IsSpellCheckEnabled="True">
                    </Editor>
                </ScrollView>
            </StackLayout>
    </StackLayout>

Answer 2

在 xamarin.form 中使用 .Xaml 文件设计表单。

查看 Xamarin 官方教程 https://developer.xamarin.com/

Answer 3

我发现您的设计与您希望复制的设计之间存在三大差异：

1. 他们在Entrys 中使用Placeholders，这样当没有输入任何内容时，“名称”将显示为Entry 的文本。
2. Body Editor 占据了整个可用页面的其余部分。
3. 在示例中，主体的Editor 被黑色边框包围。

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

问题 1：使用占位符

您可以使用Entry 的Placeholder 代替Entry 旁边的Label，而不是每个输入。只要Entry 为空，Entry 就会显示Placeholder 中的值。

例如，您可以将名称 Entry 更改为：

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

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

Here's documentation for Entry and the 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>

Here's documentation for Xamarin's LayoutOptions

Here's a good SO Post about LayoutOptions

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

在 Xamarin.Forms 中添加边框并没有真正的好方法。根据this thread 将带有不同BackgroundColor 的StackLayout 放入另一个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>