Input
带焦点环与占位符的输入框,即 Avalonia 的 TextBox。
<StackPanel Spacing="12" Width="240" HorizontalAlignment="Left">
<TextBox PlaceholderText="Enter your name..." />
<TextBox Text="Hello world" />
</StackPanel>用法
主题覆盖 TextBox(MaskedTextBox 沿用同一套主题):外框使用输入背景与 1px 的 input 边框;当输入框本身或其中任意元素获得焦点时,边框转为 ring 并显示焦点环带;占位符 PlaceholderText 为弱化色;没有悬停外观。选中内容仅在输入框获得焦点时显示。
InnerLeftContent 与 InnerRightContent 分别是前缀和后缀,与文字相距一个尺寸级的间距;若要在同一个带边框的外框内放置附加内容,请参阅 Input Group。密码可用 PasswordChar="•" 打码,Classes="revealPasswordButton" 会添加一个掩码开关,即一个眼睛按钮,勾选时以明文显示文字。当文字非空且可编辑时,Classes="clearButton" 会添加清除按钮;点击它会清空文字并将焦点移回输入框。文字之后依次是掩码开关、清除按钮和 InnerRightContent。禁用状态用禁用背景填充,其文字、占位符和内部内容以半强度绘制;只读状态没有独立外观。
右键会打开包含剪切、复制、粘贴和全选及其快捷键的菜单。剪切需要可编辑的输入框中有选中内容,复制需要选中内容,粘贴需要可编辑的输入框;已打码的密码不能剪切或复制。这些标签是资源 UIKit.Strings.Cut、UIKit.Strings.Copy、UIKit.Strings.Paste 和 UIKit.Strings.SelectAll;替换它们即可翻译该菜单,或设置自己的 ContextFlyout。
| 样式类 | 效果 |
|---|---|
xsmall、small、large | 高度分别为 20、24 和 44;medium(默认)为 32 |
revealPasswordButton | 用于显示已打码密码的眼睛按钮 |
clearButton | 用于清空文字的 x 按钮 |
校验与掩码
uikit:Inputs 附加属性为单行 TextBox 添加规则;在设置其中任何一项之前,外观与行为都不变。
| 属性 | 效果 |
|---|---|
Pattern | 整段文字必须匹配的正则表达式,例如 ^[a-zA-Z0-9]*$ |
Validate | 整段文字必须通过的 Func<string, bool>(在代码中设置) |
MaskPattern | 在输入时格式化文字的掩码 |
CleanOnEscape | 按 Escape 清空文字 |
当一次编辑(输入、粘贴、输入法上屏、剪切或删除)会留下的文字无法通过 Validate、掩码或 Pattern,而此前的文字能够通过时,该编辑会被拒绝。空文字始终通过;应用设置的、未通过校验的文字仍可继续编辑。按 Escape 清空与其他编辑一样可以撤销。
字符串形式的 MaskPattern 是模式掩码:9 接受数字,A 接受字母,# 接受字母或数字,* 接受任意字符,其他字符则是掩码自身写出的分隔符。(999)999-9999 会把 1234567890 变成 (123)456-7890,空输入框显示 (___)___-____,除非它有自己的占位符。uikit:NumberMask 接受数字:可选的正负号、数字和一个小数点,输入的全角数字与符号按 ASCII 处理。设置 Separator 后,输入时数字按三位分组,Fraction 限制小数点后的位数。应用设置的文字同样会套用掩码。Inputs.UnmaskValue(textBox) 返回去掉分隔符的文字。
示例
四种尺寸。
<StackPanel Spacing="12" Width="240" HorizontalAlignment="Left">
<TextBox Classes="xsmall" PlaceholderText="Extra small" />
<TextBox Classes="small" PlaceholderText="Small" />
<TextBox PlaceholderText="Medium" />
<TextBox Classes="large" PlaceholderText="Large" />
</StackPanel>以小号搜索图标作为 InnerLeftContent,以 xsmall 的 ghost 图标按钮作为 InnerRightContent。
<StackPanel Spacing="12" Width="240" HorizontalAlignment="Left">
<TextBox PlaceholderText="Search">
<TextBox.InnerLeftContent>
<PathIcon Classes="small" Data="{StaticResource UIKit.Icon.Search}" />
</TextBox.InnerLeftContent>
</TextBox>
<TextBox Text="Hello world">
<TextBox.InnerRightContent>
<Button Classes="ghost xsmall icon-only">
<PathIcon Data="{StaticResource UIKit.Icon.Info}" />
</Button>
</TextBox.InnerRightContent>
</TextBox>
</StackPanel>带掩码的密码,分别显示和不显示显示按钮。
<StackPanel Spacing="12" Width="240" HorizontalAlignment="Left">
<TextBox PasswordChar="•" Text="password123" />
<TextBox Classes="revealPasswordButton" PasswordChar="•" Text="password123" />
</StackPanel>单独出现的清除按钮,以及位于显示按钮之后的清除按钮。
<StackPanel Spacing="12" Width="240" HorizontalAlignment="Left">
<TextBox Classes="clearButton" Text="Hello world" PlaceholderText="Type something" />
<TextBox Classes="revealPasswordButton clearButton" PasswordChar="•" Text="password123" />
</StackPanel>只读与禁用的输入框。
<StackPanel Spacing="12" Width="240" HorizontalAlignment="Left">
<TextBox Text="Read only" IsReadOnly="True" />
<TextBox Text="Disabled" IsEnabled="False" />
<TextBox PlaceholderText="Disabled placeholder" IsEnabled="False" />
</StackPanel>电话号码、字母与数字的模式,以及按千位分组并保留两位小数的金额。
<StackPanel Spacing="12" Width="240" HorizontalAlignment="Left">
<TextBox Width="240" uikit:Inputs.MaskPattern="(999)999-9999" />
<TextBox Width="240" uikit:Inputs.MaskPattern="AAA-###-AAA" />
<TextBox Width="240" PlaceholderText="Amount">
<uikit:Inputs.MaskPattern>
<uikit:NumberMask Separator="," Fraction="2" />
</uikit:Inputs.MaskPattern>
</TextBox>
</StackPanel>仅接受字母与数字的输入框,以及按 Escape 清空的输入框。
<StackPanel Spacing="12" Width="240" HorizontalAlignment="Left">
<TextBox Width="240" uikit:Inputs.Pattern="^[a-zA-Z0-9]*$" PlaceholderText="Letters and digits only" />
<TextBox Width="240" uikit:Inputs.CleanOnEscape="True" Text="Press Escape to clear" />
</StackPanel>