Combobox

随输入过滤选项的下拉选择，即 ComboBox 或 AutoCompleteBox。

示例可交互

Combobox — Avalonia UIKit

Live demo unavailable

<Panel MinHeight="280">
  <ComboBox Classes="combobox" Width="200" SelectedIndex="0" HorizontalAlignment="Left" VerticalAlignment="Top">
    <ComboBoxItem Content="Apple" />
    <ComboBoxItem Content="Banana" />
    <ComboBoxItem Content="Cherry" />
    <ComboBoxItem Content="Grape" />
    <ComboBoxItem Content="Orange" />
  </ComboBox>
</Panel>

用法

Avalonia 把组合框拆成了两个控件。要从列表中选择，请使用 ComboBox Classes="combobox"：它就是主题化的 Select，区别在于触发器只显示已提交的条目（普通的 ComboBox 在打开时会显示指针下的条目）。要随输入过滤，请使用 AutoCompleteBox：其文本框就是输入框外观，建议项在该 Select 的下拉浮层中打开，位于下方 6px 处，宽度与输入框相同，选中的建议项使用强调色。ItemsSource 与 FilterMode 是控件自身的属性；FilterMode="Contains" 在条目的任意位置匹配。两者的尺寸都有 xsmall、small、large（默认为 medium）。IsEditable="True" 的 ComboBox 也接受输入的文字，并选中文字与之相同的条目；参见 Select。

要在浮层中提供搜索框、多选、页脚或自定义触发器，请使用 uikit:Select 配合 Classes="combobox"。

示例

一个用于过滤水果名称列表的 AutoCompleteBox。演示的 ItemsSource 来自一个持有字符串列表的静态辅助方法；请改为绑定你自己的集合。

自动补全可交互

Live demo unavailable

<Panel MinHeight="280">
  <AutoCompleteBox Width="200" PlaceholderText="Type a fruit" FilterMode="Contains"
                   ItemsSource="{x:Static demos:Fruits.All}"
                   HorizontalAlignment="Left" VerticalAlignment="Top" />
</Panel>

一个小尺寸和一个中尺寸的组合框，以及一个禁用的组合框。

尺寸可交互

Live demo unavailable

<Panel MinHeight="200">
  <WrapPanel ItemSpacing="8" LineSpacing="8" VerticalAlignment="Top">
    <ComboBox Classes="combobox small" Width="160" SelectedIndex="0">
      <ComboBoxItem Content="Apple" />
      <ComboBoxItem Content="Banana" />
      <ComboBoxItem Content="Cherry" />
    </ComboBox>
    <ComboBox Classes="combobox" Width="160" SelectedIndex="0">
      <ComboBoxItem Content="Apple" />
      <ComboBoxItem Content="Banana" />
      <ComboBoxItem Content="Cherry" />
    </ComboBox>
    <ComboBox Classes="combobox" Width="160" SelectedIndex="0" IsEnabled="False">
      <ComboBoxItem Content="Apple" />
      <ComboBoxItem Content="Banana" />
    </ComboBox>
  </WrapPanel>
</Panel>

Combobox

#用法

#示例

用法

示例