Silverlight ListBox с текстовым поиском

Что такое текстовый поиск?

Когда ваш список находится в фокусе, и вы печатаете какой-либо символ, то в списке автоматически выбирается элемент, первый символ которого совпадает с тем, который вы напечатали. Например, в приложении примера, я кликнул по списку, чтобы он получил фокус ввода, и затем напечатал символ ‘c’:

Нажат символ «с» -- выбран пункт Charlotte

Если вы просматриваете список с тысячью пунктами, например музыкальный плейлист, такая функция здорово сэкономит время и нервы. Вы можете продолжать быстро печатать искомое слово до конца и даже использовать клавишу Backspace, если ошиблись.

Если я быстро напечатаю символ «о» сразу же после первого символа, тогда выделится город Colubus:

Нажмите «с», а затем без задержки «о», будет выбран Columbus

Логика поиска контрола также умеет обрабатывать повторы нажатий для перемещения вниз по списку. Например, если вы быстро напечатаете символ «d» 5 раз подряд, тогда выделение переместится с пункта Dallas на Detroit:

Символ «d» нажат 5 раз подряд - выделение переместилось сразу на 5-й элемент, начинающийся с «d».

Это отличная функция и относительно проста в реализации, особенно с учетом сходства с обычным контролом автозаполнения.

Честно говоря, до того, как я пришел в Microsoft несколько лет назад, я и не думал, что стандартный список может иметь такую полезную функцию. Это один их тех скрытых драгоценных камней, который я использовал довольно часто с той поры, как узнал об этой возможности.

Как использовать этот контрол

Просто скачайте исходный код или добавьте файл TextSearchListBox.cs в ваш проект и обновите пространство имен.

Вот XAML из примера:

<UserControl x:Class="YourNamespace.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="clr-namespace:YourNamespace"
    Width="315" Height="340">
    <Grid x:Name="LayoutRoot" Margin="5">
        <Border BorderBrush="#11999999" BorderThickness="1" CornerRadius="3">
            <Border BorderBrush="#22999999" BorderThickness="1" CornerRadius="3">
                <Border BorderBrush="#33999999" BorderThickness="1" CornerRadius="3">
                    <local:TextSearchListBox x:Name="listBox1" />
                </Border>
            </Border>
        </Border>
    </Grid>
</UserControl>

И код поддержки этого XAML:

using System.Linq;
using System.Windows.Controls;
using Microsoft.Windows.Controls.Samples;

namespace YourNamespace
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
            Loaded += (s, e) => listBox1.ItemsSource = (from n in Airport.SampleAirports orderby n.City select n.City).Distinct();
        }
    }
}