Color Picker

AvaloniaUIKit.ColorPicker

Avalonia 的 ColorPicker，呈现为色块或带浮层的输入框，来自 AvaloniaUIKit.ColorPicker 包。

示例可交互

Color Picker — Avalonia UIKit

Live demo unavailable

<Panel MinHeight="340">
  <StackPanel Orientation="Horizontal" Spacing="16" HorizontalAlignment="Left" VerticalAlignment="Top">
    <ColorPicker Color="#2563EB" />
    <ColorPicker Color="#F59E0B" Content="Accent" />
  </StackPanel>
</Panel>

用法

Avalonia 的 ColorPicker 是独立的包，因此它的主题也是：加入 AvaloniaUIKit.ColorPicker，并把 UIKitColorPickerTheme 放在应用样式中 UIKitTheme 之后。

App.axaml

<Application xmlns="https://github.com/avaloniaui"
             xmlns:uikit="clr-namespace:AvaloniaUIKit;assembly=AvaloniaUIKit"
             xmlns:uikitcolor="clr-namespace:AvaloniaUIKit;assembly=AvaloniaUIKit.ColorPicker">
  <Application.Styles>
    <uikit:UIKitTheme />
    <uikitcolor:UIKitColorPickerTheme />
  </Application.Styles>
</Application>

ColorPicker 配合 Color 就是该颜色的方形色块，边框是该颜色加深 30% 的版本，工具提示显示其十六进制值；Content 会在其后 8px 处放一个标签。Classes="field" 让它变为输入框外观：一个小色块、十六进制值和一个小箭头，获得焦点时带焦点环。两者都会在下方打开一个 288px 的浮层，其中包含调色板（控件的 Palette，默认为 Avalonia 的 FluentColorPalette）与位于两个分段标签页上的颜色分量，其下是该颜色及其可编辑的十六进制值。

样式类	效果
`xsmall`、`small`、`large`	色块分别为 16、20 和 44px；默认的 medium 为 32px
`field`	使用输入框而不是色块

uikit:ColorSelect 无需该包即可获得相同外观，并且可以不含任何颜色。

示例

四种色块尺寸。

尺寸可交互

Live demo unavailable

<Panel MinHeight="350">
  <StackPanel Orientation="Horizontal" Spacing="16" HorizontalAlignment="Left" VerticalAlignment="Top">
    <ColorPicker Classes="xsmall" Color="#2563EB" VerticalAlignment="Center" />
    <ColorPicker Classes="small" Color="#2563EB" VerticalAlignment="Center" />
    <ColorPicker Color="#2563EB" VerticalAlignment="Center" />
    <ColorPicker Classes="large" Color="#2563EB" VerticalAlignment="Center" />
  </StackPanel>
</Panel>

field 样式类用在 200px 宽的输入框列中。

输入框可交互

Live demo unavailable

<Panel MinHeight="470">
  <StackPanel Spacing="12" Width="200" HorizontalAlignment="Left" VerticalAlignment="Top">
    <ColorPicker Classes="field" Color="#2563EB" />
    <ColorPicker Classes="field" Color="#F59E0B" />
    <ColorPicker Classes="field" Color="#FFFFFF" />
    <ColorPicker Classes="field" Color="#000000" />
  </StackPanel>
</Panel>

Color Picker

#用法

#示例

用法

示例