AutoComplete TextBox in WPF

원문 : AutoComplete TextBox in WPF

---

AutoComplete TextBox in WPF




우선 Visual Studio 2008  에서 WPF 응용프로그램 프로젝트를 생성한다. 프로젝트 이름은 AutoCompleteWPF 라고 정했다.

AutoComplete TextBox 를 테스트 하기 위하여 TextBox 와 ListBox 가 필요하다. 아래와 같이 작성해 주자.

<Window x:Class="AutoCompleteWPF.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="AutoComplete TextBox" Height="281" Width="503">
   
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="40"/>
            <RowDefinition Height="203*"/>
        </Grid.RowDefinitions>
       
        <TextBlock Grid.Row="0" Text="Type Your Search : " HorizontalAlignment="Left" VerticalAlignment="Bottom"
                   Width="112" Height="15.92" Margin="31, 0, 0, 4"/>
        <TextBox x:Name="tbxAuto" Grid.Row="0" HorizontalAlignment="Right" VerticalAlignment="Bottom"
                 Height="25" Width="325" Margin="0, 0, 10, 0" TextWrapping="NoWrap"/>
        <ListBox x:Name="lbxSuggestion" Grid.Row="1" Background="LightYellow" Visibility="Collapsed"
                 HorizontalAlignment="Right" VerticalAlignment="Top" Width="325" Margin="0, 0, 10, 0"
                 SelectionChanged="lbxSuggestion_SelectionChanged"/>       
    </Grid>
   
</Window>

아래와 같이 코딩을 해주자.
문자열들의 리스트가될 샘플 데이트를 만든다.

List<string> nameList;

        public Window1()
        {
            InitializeComponent();

            nameList = new List<string>
            {
                "yuk1","yuk2","yuk3","yuk4", "yuk5", "yuk6"
            };

            tbxAuto.TextChanged += new TextChangedEventHandler(tbxAuto_TextChanged);
        }

텍스트 박스 tbxAuto 의 TextChaned 이벤트 핸들러에 아래와 같이 코딩해 주자.

void tbxAuto_TextChanged(object sender, TextChangedEventArgs e)
        {
            string typeString = tbxAuto.Text;
            List<string> autoList = new List<string>();
            autoList.Clear();

            foreach (string item in nameList)
            {
                if (!string.IsNullOrEmpty(tbxAuto.Text))
                {
                    if (item.StartsWith(typeString))
                        autoList.Add(item);
                }
            }

            if (autoList.Count > 0)
            {
                lbxSuggestion.ItemsSource = autoList;
                lbxSuggestion.Visibility = Visibility.Visible;
            }
            else if (tbxAuto.Text.Equals(""))
            {
                lbxSuggestion.Visibility = Visibility.Collapsed;
                lbxSuggestion.ItemsSource = null;
            }
            else
            {
                lbxSuggestion.Visibility = Visibility.Collapsed;
                lbxSuggestion.ItemsSource = null;
            }
        }

저장되어 있는 문자로 텍스트 박스에 입려하게 되면 리스트박스 lbxSuggestion 에 팝업으로 저장된 문자열이 보인다. 팝업된 특정 아이템을 선택 했을 때 텍스트 박스에 적용 시키기 위하여 아래와 같이 코딩해 준다.

private void lbxSuggestion_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if (lbxSuggestion.ItemsSource != null)
            {
                lbxSuggestion.Visibility = Visibility.Collapsed;
                tbxAuto.TextChanged -= new TextChangedEventHandler(tbxAuto_TextChanged);

                if (lbxSuggestion.SelectedIndex != -1)
                {
                    tbxAuto.Text = lbxSuggestion.SelectedItem.ToString();
                }

                tbxAuto.TextChanged +=new TextChangedEventHandler(tbxAuto_TextChanged);
            }
        }

실행 화면은 다음과 같다.

샘플 프로젝트

AutoCompleteWPF.zip

---

Review


- Visibility 프로퍼티
Visibility 프로퍼티는 UIElement 클래스에 정의되 있다. Visibility 프로퍼티 값이 Collapsed 이므로 엘리먼트는 보이지 않고 화면 배치 러리 과정에 참여 하지도 않는다.

- 이벤트 핸들러 제거, 추가
한번 연결된 이벤트 핸들러를 계속 사용하는 것이 아니라 삭제 할 수 도 있다는것!
이벤트 핸들러를 삭제해 주고 문자열을 텍스트박스에 넣어준 다음 다시 핸들러를 연결시켜 주었다.

- 팝업된 리스트박스의 아이템을 키보드 방향키 입력으로 선택되게 했으면 좋겠는데...
일단 이건 추후에!