[c# wpf] 콤보박스(combobox) 사용방법

 

 

이번 포스팅에서는 아래의  기본 콤보박스를 두가지 방법으로 만들어보겠습니다.

 

'

 

첫번째 방법은 xaml만을 이용하는 방법, 두번째 방법은 코드 비하인드단(c#) 에서 바인딩을 이용하는 방법입니다.

 

 

이 글을 읽기 전 선수 지식 포스팅

• [c# wpf] DataContext란? 왜 쓰는 것일까?
• [c# wpf] 데이터 바인딩 기초 개념/ 예제

 

1.콤보박스 만들기

1) xaml만 이용

 

 

먼저 <ComboBox> 태그로 감싸고, 그 안에 원하는 아이템을 <ComboBoxItem>안에 넣는 형태로 작성합니다.

 

2) 코드 비하인드단(c#) 이용

(1) DataContext로 바인딩

//MainWindow.xaml

 

 

기존에 작성했던 <ComboBoxItem> 태그들은 다 지워주고 ItemSource라는 속성값에 {Binding ColorList}를 넣어줍니다.

(데이터 바인딩을 모르시는분은 해당 포스팅을 먼저 읽고 와주시기 바랍니다.)

 

여기서 ColorList가 무엇인지는 바로 아래서 확인해보시죠!

 

//MainWindow.xaml.cs

 

 

ComboBoxColorList라는 임의의 클래스를 만들고 그 안에 기존에 일일이 적었던 컬러명을 리스트 형태로 넣어두었습니다. 이 리스트의 이름을 ColorList로 지정했는데요.

 

이 친구가 앞서 말씀드렸던 바인딩명으로 사용된 것입니다.

 

이 리스트를 사용하기 위해서 ComboBoxColorList() 클래스를 객체화하고 이를 DataContext에 할당시켰습니다.

 

그런데 객체화 없이 그냥 리스트를 넘기는게 더 간편해보이는데 그렇게 할 순 없을까요?

 

바로 이어서 그 방법에 대해 알아보겠습니다.

 

(2) ComboBox x:Name을 이용한 바인딩

//MainWindow.xaml

 

 

앞서 콤보박스에 있던 ItemSource부분은 날리고 x:Name을 추가해줍니다.

 

 

//MainWindow.xaml.cs

 

 

기존에 코드비하인드단에서 사용했던 DataContext를 지우고,

x:Name으로 넣어주었던 Combobox .ItemSource 에 리스트를 할당 해주면 됩니다.

 

 

+ 보너스

추가적으로 아래와 같이 컬러별 도형을 추가하는 방법에 대해서 알아보겠습니다.

 

 

 

우선 간단한 원리 이해를 위해 아래처럼 Red만 적용해보겠습니다.

 

 

1) xaml만 이용

//MainWindow.xaml

 

 

<ComboBoxItem> 안에 원을 그리기위한 <Ellipse>와 글자를 적기위한 <TextBlock>을 넣어줍니다.

 

이들을 각각 옆으로 쌓기 위해 저는 <StackPanel>을 사용했는데요 <WrapPanel>을 사용하셔도 무방합니다!

 

2) c# 코드 이용

(1) c# 코드비하인드 Datacontext로 바인딩

//MainWindow.xaml

 

앞서 배웠듯이 ItemSource에 {binding ColorList}를 넣은 형태는 같습니다.

다만 차이가 있다면 <DataTemplate/>를 이용했다는 것인데요.

 

먼저 <DataTemplate/>를 콤보박스 내에서 쓰기 위해선 <ComboBox.ItemTemplate>를 감싸줘야 합니다.

그 후에 <DataTemplate/>태그 안에 우리가 앞서 적었던 <StackPanle/>을 넣어줍니다.

 

 

그 후 아래와 같이 {Binding }이라고만 적어주면 리스트의 값들을 하나씩 뽑아진다고 보시면 됩니다.

 

 

//MainWindow.xaml.cs

코드 비하인드단은 앞선 예시와 같기 때문에 설명은 생략합니다.

 

 

(2) ComboBox x:Name을 이용한 바인딩

//MainWindow.xaml.cs

 

 

이번에도 DataContext가 아닌 리스트 자체를 넣는 형태입니다.

 

//MainWindow.xaml

 

 

itemsource를 날리고 Name을 지정해주었습니다.

 

output:

 

정상적으로 출력되는걸 알 수 있습니다.