Select

带搜索框、分组、多选与页脚的 Select，即 uikit:Select。

示例可交互

Select — Avalonia UIKit

Live demo unavailable

<Panel MinHeight="340">
  <uikit:Select Width="240" IsSearchable="True" PlaceholderText="Select a fruit" SearchPlaceholderText="Search…"
                HorizontalAlignment="Left" VerticalAlignment="Top">
    <x:String>Apple</x:String>
    <x:String>Banana</x:String>
    <x:String>Cherry</x:String>
    <x:String>Grape</x:String>
    <x:String>Lemon</x:String>
    <x:String>Mango</x:String>
    <x:String>Orange</x:String>
    <x:String>Peach</x:String>
  </uikit:Select>
</Panel>

用法

uikit:Select 保留 Select 的外观，并补上 ComboBox 所没有的能力：行上方的搜索框（IsSearchable）、分组（uikit:SelectGroup 及其 Title）、有值时用清除按钮替代 chevron（IsCleanable）、标题前的前缀（TitlePrefix）、用图标替代 chevron（Icon）、独立的弹出层宽度（MenuWidth）、页脚（Footer）以及空视图（EmptyContent，默认为收件箱图标）。项即数据：字符串，或文本取自 TextSelector 的对象。ItemTemplate 绘制各行，ItemEnabledSelector 禁用项。

查询会保留文本包含它的项（忽略大小写），分组只要有一项或标题匹配也一并保留；Filter 替换该规则，AsyncPopulator 则改为异步获取项。光标移到第一个匹配项，弹出层打开期间，触发器显示光标所在的项。↑、↓ 与 Enter 可打开已关闭的 Select；随后 ↑ 与 ↓ 移动光标，Enter 选中光标所在的项，Escape 关闭。每次关闭都会清空查询。

选中状态为 SelectedItem、SelectedIndex（分组被展平）与 SelectedItems。SelectionChanging 在点击或 Enter 改变选中之前引发：处理函数可以修改 e.Selection 或设置 e.Cancel。

演示带有搜索框：输入即可筛选水果。

Combobox

Classes="combobox" 提供 Combobox 外观：触发器只用已提交的项作为标题。使用 SelectionMode="Multiple" 时，点击或 Enter 切换项的选中状态，弹出层保持打开；触发器以逗号连接各选中项的文本。Footer 位于分隔线之下的各行下方。TriggerTemplate 用 uikit:SelectTriggerContext（SelectedItems、Title、PlaceholderText、HasSelection、IsOpen）的模板替换触发器的内容。

示例

带搜索框的分组。

分组可交互

Live demo unavailable

<Panel MinHeight="340">
  <uikit:Select Width="240" IsSearchable="True" PlaceholderText="Select food" SelectedIndex="4"
                HorizontalAlignment="Left" VerticalAlignment="Top">
    <uikit:SelectGroup Title="Fruits">
      <x:String>Apple</x:String>
      <x:String>Banana</x:String>
      <x:String>Cherry</x:String>
    </uikit:SelectGroup>
    <uikit:SelectGroup Title="Vegetables">
      <x:String>Carrot</x:String>
      <x:String>Leek</x:String>
      <x:String>Potato</x:String>
    </uikit:SelectGroup>
  </uikit:Select>
</Panel>

有值时显示清除按钮，以及带标题前缀并以图标替代 chevron。

清除可交互

Live demo unavailable

<Panel MinHeight="220">
  <StackPanel Spacing="12" HorizontalAlignment="Left" VerticalAlignment="Top">
    <uikit:Select Width="200" IsCleanable="True" PlaceholderText="Select a fruit" SelectedIndex="1">
      <x:String>Apple</x:String>
      <x:String>Banana</x:String>
      <x:String>Cherry</x:String>
      <x:String>Grape</x:String>
    </uikit:Select>
    <uikit:Select Width="200" TitlePrefix="Fruit: " Icon="{StaticResource UIKit.Icon.Search}" SelectedIndex="2">
      <x:String>Apple</x:String>
      <x:String>Banana</x:String>
      <x:String>Cherry</x:String>
    </uikit:Select>
  </StackPanel>
</Panel>

带搜索框与清除按钮的多选。

多选可交互

Live demo unavailable

<Panel MinHeight="340">
  <uikit:Select Classes="combobox" Width="240" SelectionMode="Multiple" IsSearchable="True" IsCleanable="True"
                PlaceholderText="Select frameworks" HorizontalAlignment="Left" VerticalAlignment="Top">
    <x:String>React</x:String>
    <x:String>Next.js</x:String>
    <x:String>Angular</x:String>
    <x:String>Vue</x:String>
    <x:String>Svelte</x:String>
    <x:String>Astro</x:String>
    <x:String>Remix</x:String>
  </uikit:Select>
</Panel>

页脚按钮，用于添加在搜索框中输入的项。

页脚可交互

Live demo unavailable

<Panel MinHeight="300">
  <uikit:Select Name="Universities" Classes="combobox" Width="240" IsSearchable="True" PlaceholderText="Select university"
                HorizontalAlignment="Left" VerticalAlignment="Top">
    <x:String>Harvard University</x:String>
    <x:String>MIT</x:String>
    <x:String>Stanford</x:String>
    <x:String>Cambridge</x:String>
    <uikit:Select.Footer>
      <Button Classes="ghost" HorizontalAlignment="Stretch" Click="OnAdd">
        <StackPanel Orientation="Horizontal" Spacing="8">
          <PathIcon Data="{StaticResource UIKit.Icon.Plus}" />
          <TextBlock Text="New university" />
        </StackPanel>
      </Button>
    </uikit:Select.Footer>
  </uikit:Select>
</Panel>

触发器模板：一个图标、标题或占位符，以及 chevron。

自定义触发器可交互

Live demo unavailable

<Panel MinHeight="220">
  <uikit:Select Classes="combobox" Width="240" PlaceholderText="Select a framework"
                HorizontalAlignment="Left" VerticalAlignment="Top">
    <x:String>Next.js</x:String>
    <x:String>SvelteKit</x:String>
    <x:String>Nuxt.js</x:String>
    <x:String>Remix</x:String>
    <uikit:Select.TriggerTemplate>
      <DataTemplate x:DataType="uikit:SelectTriggerContext">
        <Grid ColumnDefinitions="Auto,*,Auto" ColumnSpacing="8">
          <PathIcon Width="14" Height="14" Data="{StaticResource UIKit.Icon.Star}" Foreground="{DynamicResource UIKit.MutedForeground}" />
          <TextBlock Grid.Column="1" VerticalAlignment="Center" TextTrimming="CharacterEllipsis"
                     Text="{Binding Title}" IsVisible="{Binding HasSelection}" />
          <TextBlock Grid.Column="1" VerticalAlignment="Center" TextTrimming="CharacterEllipsis"
                     Text="{Binding PlaceholderText}" IsVisible="{Binding !HasSelection}"
                     Foreground="{DynamicResource UIKit.MutedForeground}" />
          <PathIcon Grid.Column="2" Width="16" Height="16" Data="{StaticResource UIKit.Icon.ChevronDown}"
                    Foreground="{DynamicResource UIKit.MutedForeground}" />
        </Grid>
      </DataTemplate>
    </uikit:Select.TriggerTemplate>
  </uikit:Select>
</Panel>

Select

#用法

#Combobox

#示例

用法

Combobox

示例