Form

表单网格，带标签字段、必填标记与说明文字。

示例可交互

Form — Avalonia UIKit

Live demo unavailable

<uikit:Form Width="360" HorizontalAlignment="Left">
  <uikit:FormField Label="Name">
    <TextBox PlaceholderText="Enter your name" />
  </uikit:FormField>
  <uikit:FormField Label="Email" IsRequired="True" Description="We will never share your email.">
    <TextBox PlaceholderText="Enter your email" />
  </uikit:FormField>
  <uikit:FormField Label="Plan">
    <ComboBox SelectedIndex="0" HorizontalAlignment="Stretch">
      <ComboBoxItem Content="Free" />
      <ComboBoxItem Content="Pro" />
    </ComboBox>
  </uikit:FormField>
  <uikit:Form.Footer>
    <Button Classes="primary" Content="Save" />
  </uikit:Form.Footer>
</uikit:Form>

用法

uikit:Form 是 uikit:FormField 的 ItemsControl，字段按顺序排入由 Columns 指定的网格；一行放不下的字段会另起一行。字段的内容就是输入控件，被拉伸到字段宽度；Label 是中等字重的文本，当 IsRequired 为真时后面带一个表示必填的 *；Description 是输入控件下方的弱化帮助文字，即使为空也保留其所在行。Footer 是字段下方的内容，对齐到该行的末端。校验仍由输入控件负责（DataValidationErrors）；表单本身不保存任何值。

属性	所在控件	作用
`Columns`	`Form`	列数（默认为 1）
`LabelOrientation`	`Form`（可继承）	`Vertical` 把标签放在输入控件上方，`Horizontal` 放在旁边
`LabelWidth`	`Form`（可继承）	标签位于输入控件旁时的宽度（默认为 140）
`Gap`	`Form`	行与行之间的间距；列间距是它的三倍
`Footer`	`Form`	位于字段下方、该行末端的内容
`Label`、`IsRequired`、`Description`	`FormField`	标签、必填标记与帮助文字
`ColumnSpan`	`FormField`	字段跨越的列数

表单上的尺寸样式类决定其间距：行距 8px（small 为 6，large 为 12），标签与输入控件相距 2px（large 为 4）。输入控件仍保留各自的尺寸样式类。

示例

LabelOrientation="Horizontal" 把标签放在输入控件旁，默认宽 140px；LabelWidth 可收窄或加宽。

水平标签可交互

Live demo unavailable

<StackPanel Spacing="24" Width="360" HorizontalAlignment="Left">
  <uikit:Form LabelOrientation="Horizontal">
    <uikit:FormField Label="First name">
      <TextBox PlaceholderText="Enter first name" />
    </uikit:FormField>
    <uikit:FormField Label="Last name" IsRequired="True">
      <TextBox PlaceholderText="Enter last name" />
    </uikit:FormField>
    <uikit:FormField Label="Email" Description="Used for sign in.">
      <TextBox PlaceholderText="Enter email" />
    </uikit:FormField>
  </uikit:Form>
  <uikit:Form LabelOrientation="Horizontal" LabelWidth="100">
    <uikit:FormField Label="Name">
      <TextBox PlaceholderText="Enter name" />
    </uikit:FormField>
    <uikit:FormField Label="Email">
      <TextBox PlaceholderText="Enter email" />
    </uikit:FormField>
  </uikit:Form>
</StackPanel>

Columns="2"，并通过 ColumnSpan="2" 让地址字段跨越两列。

列可交互

Live demo unavailable

<uikit:Form Columns="2" Width="520" HorizontalAlignment="Left">
  <uikit:FormField Label="First name">
    <TextBox PlaceholderText="Enter first name" />
  </uikit:FormField>
  <uikit:FormField Label="Last name">
    <TextBox PlaceholderText="Enter last name" />
  </uikit:FormField>
  <uikit:FormField Label="Address" ColumnSpan="2">
    <TextBox PlaceholderText="Enter address" />
  </uikit:FormField>
  <uikit:Form.Footer>
    <Button Classes="primary" Content="Save" />
  </uikit:Form.Footer>
</uikit:Form>

small 与 large 表单，其输入控件与底部按钮使用对应的尺寸样式类。

尺寸可交互

Live demo unavailable

<StackPanel Spacing="24" Width="360" HorizontalAlignment="Left">
  <uikit:Form Classes="small">
    <uikit:FormField Label="Name">
      <TextBox Classes="small" PlaceholderText="Enter name" />
    </uikit:FormField>
    <uikit:FormField Label="Email" IsRequired="True" Description="We will never share your email.">
      <TextBox Classes="small" PlaceholderText="Enter email" />
    </uikit:FormField>
    <uikit:Form.Footer>
      <Button Classes="primary small" Content="Save" />
    </uikit:Form.Footer>
  </uikit:Form>
  <uikit:Form Classes="large">
    <uikit:FormField Label="Name">
      <TextBox Classes="large" PlaceholderText="Enter name" />
    </uikit:FormField>
    <uikit:FormField Label="Email" IsRequired="True" Description="We will never share your email.">
      <TextBox Classes="large" PlaceholderText="Enter email" />
    </uikit:FormField>
    <uikit:Form.Footer>
      <Button Classes="primary large" Content="Save" />
    </uikit:Form.Footer>
  </uikit:Form>
</StackPanel>

Form

#用法

#示例

用法

示例