Select
A select with a search field, sections, multiple selection and a footer, as uikit:Select.
<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>Usage
uikit:Select keeps the look of the Select and adds what ComboBox does not have: a search field above the rows (IsSearchable), sections (uikit:SelectGroup with a Title), a clear button in place of the chevron while there is a value (IsCleanable), a prefix before the title (TitlePrefix), an icon in place of the chevron (Icon), a popup width of its own (MenuWidth), a footer (Footer) and an empty view (EmptyContent; an inbox icon by default). Items are data: strings, or objects whose text comes from TextSelector. ItemTemplate draws the rows, and ItemEnabledSelector disables items.
A query keeps the items whose text contains it, ignoring case, and a section while one of its items or its title matches; Filter replaces the rule and AsyncPopulator fetches the items instead. The cursor moves to the first match, and while the popup is open the trigger shows the item under the cursor. ↑, ↓ and Enter open the closed select; then ↑ and ↓ move the cursor, Enter selects the item under it and Escape closes. Every close clears the query.
The selection is SelectedItem, SelectedIndex (sections flattened) and SelectedItems. SelectionChanging is raised before a click or Enter changes it: a handler can edit e.Selection or set e.Cancel.
The demo has a search field: type to filter the fruits.
Combobox
Classes="combobox" gives the Combobox look: the trigger is titled with the committed item only. With SelectionMode="Multiple" a click or Enter toggles an item and the popup stays open; the trigger joins the selected items' text with commas. Footer sits below the rows under a separator. TriggerTemplate replaces the trigger's content with a template of a uikit:SelectTriggerContext (SelectedItems, Title, PlaceholderText, HasSelection, IsOpen).
Examples
Sections, with the search field.
<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>A clear button while there is a value, and a title prefix with an icon in place of the chevron.
<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>Multiple selection with a search field and a clear button.
<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>A footer button that adds what was typed in the search field.
<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>A trigger template: an icon, the title or the placeholder, and the chevron.
<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>