Time Field

输入框中的小时与分钟片段，即 TimePicker。

示例可交互

Time Field — Avalonia UIKit

Live demo unavailable

<Panel MinHeight="350">
  <TimePicker SelectedTime="09:30" ClockIdentifier="24HourClock" HorizontalAlignment="Left" VerticalAlignment="Top" />
</Panel>

用法

主题为关闭状态的 TimePicker 提供时间输入框的外观：一个按内容调整大小的输入框外观框架，小时、分钟以及（在 UseSeconds="True" 时）秒都是两位数字片段，冒号之间使用等宽数字。ClockIdentifier="24HourClock" 或 "12HourClock" 选择时钟制式；12 小时制在 4px 间隔之后加上午/下午标识。SelectedTime 是它的值。尺寸有 xsmall、small、large（默认为 medium）。

获得焦点时，边框变成带焦点带的焦点环，小时片段显示选中状态；这只是外观，因为 TimePicker 并没有可编辑的片段。无效的输入框（通过 DataValidationErrors 触发 :error）边框变为危险色；禁用的输入框填充禁用背景、弱化其文字并淡化到一半。点击会在浮出层表面打开 Avalonia 的 TimePickerPresenter，在其中选取时间。

若要逐段编辑时间，请使用 uikit:TimeField。

示例

四种尺寸。

尺寸可交互

Live demo unavailable

<Panel MinHeight="360">
  <WrapPanel ItemSpacing="12" LineSpacing="12" VerticalAlignment="Top">
    <TimePicker Classes="xsmall" SelectedTime="09:30" ClockIdentifier="24HourClock" />
    <TimePicker Classes="small" SelectedTime="09:30" ClockIdentifier="24HourClock" />
    <TimePicker SelectedTime="09:30" ClockIdentifier="24HourClock" />
    <TimePicker Classes="large" SelectedTime="09:30" ClockIdentifier="24HourClock" />
  </WrapPanel>
</Panel>

24 小时制与 12 小时制，含秒与不含秒。

格式可交互

Live demo unavailable

<Panel MinHeight="360">
  <WrapPanel ItemSpacing="12" LineSpacing="12" VerticalAlignment="Top">
    <TimePicker SelectedTime="09:30" ClockIdentifier="24HourClock" />
    <TimePicker SelectedTime="09:30:15" ClockIdentifier="24HourClock" UseSeconds="True" />
    <TimePicker SelectedTime="21:05" ClockIdentifier="12HourClock" />
    <TimePicker SelectedTime="21:05:09" ClockIdentifier="12HourClock" UseSeconds="True" />
  </WrapPanel>
</Panel>

一个禁用输入框和一个无效输入框。演示通过一个静态辅助方法设置 DataValidationErrors.Errors，其中只包含一条验证消息；实际应用则从绑定的验证中获取错误。

状态可交互

Live demo unavailable

<Panel MinHeight="350">
  <WrapPanel ItemSpacing="12" LineSpacing="12" VerticalAlignment="Top">
    <TimePicker SelectedTime="09:30" ClockIdentifier="24HourClock" IsEnabled="False" />
    <TimePicker SelectedTime="21:05" ClockIdentifier="24HourClock"
                DataValidationErrors.Errors="{x:Static demos:ValidationErrors.OutsideBusinessHours}" />
  </WrapPanel>
</Panel>

Time Field

#用法

#示例

用法

示例