본문 바로가기
IT/WPF

WPF ComboBox(콤보박스) 사용 방법 - 데이터 바인딩, 이벤트 처리

by 골드도니 2024. 8. 5.

WPF ComboBox 사용 방법과 예제

목차
1. WPF ComboBox란?
2. WPF ComboBox 기본 사용법
3. 데이터 바인딩을 통한 ComboBox 사용
4. ComboBox의 이벤트 처리

 

 

 

1. WPF ComboBox란?

WPF(Windows Presentation Foundation)에서 ComboBox는 사용자에게 선택 가능한 옵션 목록을 제공하는 컨트롤입니다. 드롭다운 목록을 사용하여 사용자가 여러 옵션 중에서 하나를 선택할 수 있도록 합니다. ComboBox는 데이터 바인딩, 스타일 적용, 템플릿 커스터마이징 등 다양한 기능을 지원하여 강력하고 유연한 UI 요소를 제공합니다.

 

2. WPF ComboBox 기본 사용법

WPF의 ComboBox를 사용하는 방법은 매우 간단합니다. 기본적인 ComboBox는 XAML에서 직접 정의할 수 있으며, 코드에서 항목을 추가할 수도 있습니다.

2.1. XAML에서 ComboBox 정의

다음은 기본적인 ComboBox를 XAML에서 정의하는 예제입니다.

<Window x:Class="ComboBoxExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="300" Width="500">
    <Grid>
        <ComboBox Name="myComboBox" Width="200" Height="30" VerticalAlignment="Top" Margin="10">
            <ComboBoxItem Content="Option 1"/>
            <ComboBoxItem Content="Option 2"/>
            <ComboBoxItem Content="Option 3"/>
        </ComboBox>
    </Grid>
</Window>

 

위 예제에서 ComboBox는 세 가지 항목을 가진 드롭다운 목록을 생성합니다. XAML을 통하여 간단하게 목록들을 생성할 수 있으며, 사용자는 목록에서 항목을 선택할 수 있습니다.

2.2. 코드에서 항목 추가

ComboBox의 항목을 코드에서 추가할 수도 있습니다. 다음은 C# 코드에서 항목을 추가하는 예제입니다.

public MainWindow()
{
    InitializeComponent();

    // 항목 추가
    myComboBox.Items.Add("Option A");
    myComboBox.Items.Add("Option B");
    myComboBox.Items.Add("Option C");
}

 

이 코드는 ComboBox에 세 가지 항목을 추가합니다. 이렇게 하면 XAML에서 정의한 ComboBox와 동일한 방식으로 드롭다운 목록이 표시됩니다.

 

 

3. 데이터 바인딩을 통한 ComboBox 사용

WPF의 강력한 기능 중 하나는 데이터 바인딩입니다. 데이터 바인딩을 사용하면 ComboBox의 항목을 데이터 소스와 연결할 수 있습니다. 주로 ViewModel을 통하여 Binding된 개체를 보다 쉽게 연결하여, 해당 기능을 처리할 수 있습니다.

3.1. XAML에서 데이터 바인딩

다음은 ComboBox에 데이터 바인딩을 적용하는 예제입니다.

<Window x:Class="ComboBoxExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="300" Width="500">
    <Grid>
        <ComboBox Name="myComboBox" Width="200" Height="30" VerticalAlignment="Top" Margin="10"
                  ItemsSource="{Binding MyItems}"/>
    </Grid>
</Window>

 

여기서 MyItems는 데이터 소스입니다. 이를 C# 코드에서 정의해보겠습니다.

public partial class MainWindow : Window
{
    public ObservableCollection<string> MyItems { get; set; }

    public MainWindow()
    {
        InitializeComponent();

        MyItems = new ObservableCollection<string>
        {
            "Item 1",
            "Item 2",
            "Item 3"
        };

        DataContext = this;
    }
}

 

ObservableCollection은 데이터 변경 시 UI를 자동으로 업데이트합니다. DataContext를 설정하여 ComboBox의 ItemsSource를 MyItems로 바인딩합니다.

 

ObservableCollection<T>는 WPF 및 기타 .NET 애플리케이션에서 데이터의 변경을 UI에 실시간으로 반영할 수 있도록 돕는 컬렉션 클래스입니다. 기본적으로 ObservableCollection<T>는 Collection<T>의 기능을 확장하여 데이터 변경을 추적하고 이를 UI에 알리는 기능을 제공합니다.

DataContext는 WPF에서 데이터 바인딩을 설정하는 중요한 개념입니다. DataContext는 UI 요소의 데이터 소스를 정의하며, 데이터 바인딩을 통해 UI와 데이터 간의 연결을 관리합니다.

 

 

4. ComboBox의 이벤트 처리

ComboBox에서 항목이 선택될 때 이벤트를 처리할 수 있습니다. 다음은 선택 변경 이벤트를 처리하는 방법입니다.

4.1. XAML에서 이벤트 핸들러 정의

<ComboBox Name="myComboBox" Width="200" Height="30" VerticalAlignment="Top" Margin="10"
          SelectionChanged="MyComboBox_SelectionChanged">
    <ComboBoxItem Content="Option A"/>
    <ComboBoxItem Content="Option B"/>
    <ComboBoxItem Content="Option C"/>
</ComboBox>

 

4.2. 코드에서 이벤트 처리

private void MyComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    ComboBox comboBox = sender as ComboBox;
    if (comboBox != null)
    {
        ComboBoxItem selectedItem = comboBox.SelectedItem as ComboBoxItem;
        if (selectedItem != null)
        {
            MessageBox.Show($"Selected item: {selectedItem.Content}");
        }
    }
}

 

이 코드는 사용자가 ComboBox에서 항목을 선택할 때마다 선택된 항목의 내용을 메시지 박스로 표시합니다.

참고로 XAML에서 ComboBox 선택 이벤트를 추가하면 자동으로 xaml.cs 파일에 자동으로 기본 이벤트 형태가 생성됩니다.

 

WPF의 ComboBox는 강력하고 유연한 컨트롤로, 다양한 방법으로 사용자 인터페이스를 구성할 수 있습니다. 기본적인 사용법, 데이터 바인딩, 이벤트 처리 등을 통해 ComboBox를 효과적으로 활용할 수 있습니다. WPF를 활용한 애플리케이션 개발에 있어 ComboBox는 필수적인 요소로, 다양한 기능을 통해 사용자 경험을 향상시킬 수 있습니다.

이상으로 WPF에서 ComboBox의 사용 방법에 대하여 알아보았습니다. 이 글이 WPF ComboBox의 기본 사용법을 이해하는 데 도움이 되길 바랍니다.

728x90

댓글