跳到主要内容

VFormItem

表单项组件。

基础用法​

通过设置TitleText属性来设置表单项的标题。

alt text

<control:VFormItem TitleText="Company Name:">
</control:VFormItem>

通常表单项需要设置内容

可以通过设置ContentSlot属性来设置表单项的自定义内容。

配合VEntry组件来实现输入框表单项

alt text

<control:VFormItem TitleText="Company Name:">
    <control:VFormItem.ContentSlot>
        <control:VEntry  />
    </control:VFormItem.ContentSlot>
</control:VFormItem>

必填项​

通过设置IsRequired属性来设置表单项是否必填。默认为True

alt text

<control:VFormItem TitleText="Company Name:"
                IsRequired="False">

</control:VFormItem>

帮助信息​

通过设置 HelpText属性来设置表单项的帮助信息。

alt text

<control:VFormItem TitleText="Company Name:"
                InfoText="Please fill in the buyer or client's information here">
</control:VFormItem>

当设置了HelpText属性之后，会在标题行最右侧自动显示帮助按钮“?”， 点击按钮后会弹出帮助信息。

可以通过设置 IsShowInfo 属性来隐藏标题和帮助信息。此属性为双向绑定属性

隐藏标题和帮助信息​

可以通过设置 HideTitle和HideHelpText属性来完全隐藏标题和帮助信息。

alt text

  <control:VFormItem TitleText="Company Name:"
                     HasInfo="{Binding HasInfo}"
                     HasTitle="{Binding HasTitle}"
                     InfoText="Please fill in the buyer or client's information here">
      <control:VFormItem.ContentSlot>
          <control:VEntry />
      </control:VFormItem.ContentSlot>
  </control:VFormItem>

表单验证信息​

通过设置 IsInvalid属性为true，可以显示验证信息，设置 InvalidText属性设置验证信息内容

alt text

 <control:VFormItem TitleText="Company Name:"
                    IsInvalid="False"
                    ValidateText="'Company Name' must not be null">
 </control:VFormItem>

标题颜色​

通过设置 TitleColor属性设置标题颜色

alt text

<control:VFormItem TitleText="Company Name:"
                    TitleTextColor="Green">

</control:VFormItem>

自定义内容​

可以通过设置InfoSlot属性来设置帮助信息自定义内容。设置此属性将覆盖原帮助信息中的文本。

alt text

<control:VFormItem TitleText="Upload files:">
    <control:VFormItem.ContentSlot>
        <control:VUploader  />
    </control:VFormItem.ContentSlot>
    <control:VFormItem.InfoSlot>
        <VerticalStackLayout>
            <Label Text="Only files in the following formats can be uploaded"
                    />
            <HorizontalStackLayout HeightRequest="35" Spacing="10">
                <Image Source="xls.png"></Image>
                <Image Source="ppt.png"></Image>
                <Image Source="doc.png"></Image>
            </HorizontalStackLayout>
        </VerticalStackLayout>
    </control:VFormItem.InfoSlot>
</control:VFormItem>