Auto Complete TextBox using ComboBox

Introduction

 이번 강좌에서는 포털 사이트에서 흔히 볼 수 있는 자동완성 기능을 구현하는 방법에 대해 소개합니다. 먼저 자동완성을 구현하기 위해 필요한 요소들을 살펴보면 검색어를 입력할 수 있는 TextBox와 검색 결과를 표현 할 수 있는 ListBox가 필요 하다는걸 알 수 있습니다. 이번시간에는 WPF에서 TextBox와 ListBox 컨트롤을 동시에 포함하고 있는 컨트롤인 ComboBox를 이용해 자동완성을 구현 하는 방법에 대해 소개합니다.

ComboBox ControlTemplate

먼저 ComboBox의 ControlTemplate을 아래와 같이 정의하여 자동완성에 필요한 뷰를 구성합니다. 주의할 점은 TextBox의 이름을 ComboBox가 내부적으로 사용하는 이름인 PART_EditableTextBox로 지정할 경우 SelectedItem과 내부적으로 바인딩 되기 때문에 다른 이름을 사용합니다.
<Grid> <TextBox x:Name="AutoCompleteText" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" Width="{TemplateBinding ActualWidth}"/> <Popup Placement="Bottom" IsOpen="{TemplateBinding IsDropDownOpen}" AllowsTransparency="True"> <Border x:Name="ItemsRoot" Visibility="Visible" MinWidth="{TemplateBinding ActualWidth}" MaxHeight="{TemplateBinding MaxDropDownHeight}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}"> <ScrollViewer Margin="1" SnapsToDevicePixels="True"> <VirtualizingStackPanel x:Name="PART_Items" IsItemsHost="True" /> </ScrollViewer> </Border> </Popup> </Grid>
그리고 TextBox에서 TextChanged이벤트가 발생할때 아래와 같이 처리해 줍니다.
void AutoComplateText_TextChanged(object sender, TextChangedEventArgs e) { // 목록 팝업을 표시합니다. IsDropDownOpen = true; // 목록에서 선택된 값이 없도록 지정합니다. SelectedIndex = -1; // AutoCompleteText에 텍스트가 입력되있다면 Filter를 적용합니다. if (string.IsNullOrEmpty(AutoCompleteText.Text) == false && AutoComplate != null) { Items.Filter = new Predicate<object>(O => AutoComplate(O, AutoCompleteText.Text)); } else { // Filter를 해제하고 팝업을 숨깁니다. Items.Filter = null; IsDropDownOpen = false; } }
위와 같이 코드를 정의하면 사용자가 TextBox에 어떤 텍스트를 입력할때 AutoComplate 이벤트를 호출하여 자동완성 목록에 표현될 아이템을 필터링 하게 됩니다. 그리고 키보드를 이용해 자동완성 목록을 선택 할 수 있도록 OnPreviewKeyDown메서드를 아래와 같이 재정의 합니다.
protected override void OnPreviewKeyDown(KeyEventArgs e) { if (e.Key == Key.Down && IsDropDownOpen) SelectedIndex += 1; else if (e.Key == Key.Up && IsDropDownOpen) SelectedIndex -= 1; else if (e.Key == Key.Return && IsDropDownOpen) { object CurrentItem = SelectedItem; AutoCompleteText.Text = Text; AutoCompleteText.SelectionStart = AutoCompleteText.Text.Length; SelectedItem = CurrentItem; } else if(e.Key == Key.Escape) { AutoCompleteText.Text = ""; } base.OnPreviewKeyDown(e); }

자동완성 기능을 사용하기 위해서는 아래와 같이 ItemSource에 자동완성에 사용할 데이터를 입력하고, AutoComplate이벤트에서 필터링 여부를 리턴 하면됩니다.
public Window1() { InitializeComponent(); AutoCompleteBox.ItemsSource = TestData; AutoCompleteBox.AutoComplate += new AutoCompleteBox.AutoComplateHandler(AutoComplateProcess); } bool AutoComplateProcess(object Source, string Input) { User UserObject = Source as User; return UserObject.Name.ToLower().StartsWith(Input.ToLower()); }
이번시간에 구현한 자동완성은 ComboBox를 기반으로 구현되었기 때문에 SelectedItem이나, SelectedValue 속성을 통해 선택된 객체에 대한 접근할 수 있습니다. 이번시간에 구현한 자동완성을 응용한 예제는 샘플 자료실에서 확인 하실 수 있습니다.

WIT.Sample.AutoComplateBox.zip