Syncfusion教程：在Xamarin.Forms中创建数据输入表单（1）-控件新闻-慧都网

Syncfusion教程：在Xamarin.Forms中创建数据输入表单（1）

翻译|使用教程|编辑：李爽夏|2019-02-18 09:52:45.000|阅读 904 次

概述：本篇文章介绍了使用Syncfusion Input Controls在Xamarin.Forms中创建数据输入表单。

#慧都22周年庆大促·界面/图表报表/文档/IDE/IOT/测试等千款热门软控件火热促销中>>

介绍

欢迎学习使用Syncfusion的一些输入控件（如用于Xamarin.Forms平台的内置DataForm控件）创建数据输入表单。

Xamarin.Forms数据表单控件用于显示和编辑任何数据对象的属性，使用各种内置编辑器来处理不同的数据类型。它简化了各种表单的开发，如登录、保留和数据输入。

除DataForm控件外，Syncfusion Essential Studio for Xamarin还提供其他单独的输入控件，使您可以根据自己的喜好创建自己的数据输入窗体： Autocomplete、Button、Badge View、Chips、ComboBox、Picker、Calendar、Numeric Entry、NumericUpDown、Masked Entry、CheckBox、Radio Button、Range Slider、Rating和Segmented Control，使您能够根据规范创建自己的数据输入表单。

如果有预定义的模型，请使用DataForm控件

如果您的应用程序有很多表单，并且您有预定义的模型，那么我们提供一个DataForm控件，它可以基于您的数据对象创建表单，从而简化表单创建过程。DataForm可以帮助您以多种方式呈现数据，例如在预定义的布局中呈现模型项的集合。

以下步骤说明如何使用DataForm创建具有预定义模型的表单：

步骤1:导入控件命名空间 “xmlns:dataForm=”clr-namespace:Syncfusion.XForms.DataForm;assembly=Syncfusion.SfDataForm.XForms” 在XAML页中，创建DataForm控件的实例并将其作为视图添加到线性布局中。

<ContentPage xmlns:dataForm="clr-namespace:Syncfusion.XForms.DataForm;assembly=Syncfusion.SfDataForm.XForms"
x:Class="GettingStarted.MainPage">
<dataForm:SfDataForm/>
</ContentPage>

步骤2:数据表单是一个数据编辑控件，因此创建一个数据对象来编辑数据对象。这里，名为ItemInfo的数据对象是用一些属性创建的。

public class ItemInfo
{
     public ItemInfo() { }
     public int TotalAmount { get; set; }
     public DateTime? Date { get; set; }
     public string Name { get; set; }
     public bool IsBillable { get; set; }
}

步骤3：在一个新的类文件中创建一个具有用必需数据初始化的ItemInfo属性的模型存储库类，如下面的代码示例所示。

public class ViewModel
{
     public ItemInfo ItemInfo { get; set; }
     public ViewModel()
     {
          ItemInfo= new ItemInfo();
     }
}

步骤4：要在数据表单中填充标签和编辑器，请设置DataObject属性。

<ContentPage xmlns:local="clr-namespace:GettingStarted"
xmlns:dataForm="clr-namespace:Syncfusion.XForms.DataForm;assembly=Syncfusion.SfDataForm.XForms"
x:Class="GettingStarted.MainPage">
     <ContentPage.BindingContext>
          <local:ViewModel/>
     </ContentPage.BindingContext>
     <dataForm:SfDataForm  DataObject="{Binding ItemInfo}"/>
</ContentPage>