Day 6: 컨트롤 소개 - TextBox, Label, Button, ComboBox, ListBox

 

Day 6: 컨트롤 소개 - TextBox, Label, Button, ComboBox, ListBox

WPF에서는 다양한 컨트롤(Control)을 제공하여 UI를 구성할 수 있습니다. 이번 글에서는 대표적인 컨트롤 중 TextBox, Label, Button, ComboBox, ListBox에 대해 소개하겠습니다.

TextBox

TextBox는 사용자가 텍스트를 입력할 수 있는 컨트롤입니다. 다양한 속성을 제공하여 텍스트 입력에 대한 제한, 유효성 검사 등을 수행할 수 있습니다.

예시 코드:

<TextBox Text="Hello, WPF!" Width="120" Height="30" />

위 코드는 텍스트 박스를 생성하고, 초기 텍스트로 "Hello, WPF!"를 설정하며, 너비는 120, 높이는 30으로 지정합니다.

Label

Label은 사용자에게 보여줄 텍스트를 제공하는 컨트롤입니다. 주로 TextBox와 같은 다른 컨트롤과 함께 사용되어 해당 컨트롤의 라벨(Label) 역할을 합니다.

예시 코드:

<Label Content="Username:" />

위 코드는 "Username:"이라는 텍스트를 보여주는 라벨(Label)을 생성합니다.

Button

Button은 사용자가 클릭할 수 있는 버튼을 제공하는 컨트롤입니다. 클릭 이벤트를 핸들링하여 원하는 기능을 수행할 수 있습니다.

예시 코드:

<Button Content="Click me!" Click="Button_Click" />

위 코드는 "Click me!"라는 텍스트를 보여주는 버튼을 생성하고, 클릭 이벤트 핸들러로 Button_Click 메서드를 등록합니다.

ComboBox

ComboBox는 사용자가 선택할 수 있는 목록(List)을 제공하는 컨트롤입니다. 목록 항목은 자유롭게 추가하거나 삭제할 수 있습니다.

예시 코드:

<ComboBox SelectedIndex="0">
	<ComboBoxItem Content="Item 1" />
	<ComboBoxItem Content="Item 2" />
	<ComboBoxItem Content="Item 3" />
</ComboBox>

위 코드는 세 개의 목록 항목은 ComboBoxItem 요소를 사용하여 추가할 수 있습니다. ComboBoxItem 요소의 Content 속성에는 목록 항목의 텍스트를 지정할 수 있습니다. 예시 코드에서는 "Item 1", "Item 2", "Item 3"이라는 세 개의 목록 항목을 ComboBox에 추가하고 있습니다.

ComboBox에서 현재 선택된 항목은 SelectedIndex 속성을 통해 알아낼 수 있습니다. SelectedIndex 속성의 기본값은 -1이며, 이는 아무 항목도 선택되지 않은 상태를 의미합니다. 예시 코드에서는 ComboBox의 기본 선택 항목으로 "Item 1"을 선택하도록 SelectedIndex 속성을 0으로 지정하고 있습니다.

ComboBox의 항목은 동적으로 추가하거나 삭제할 수 있습니다. C# 코드에서 ComboBox에 항목을 추가하려면 Items 속성을 사용합니다. 예시 코드에서는 C# 코드에서 ComboBox에 항목을 추가하는 방법을 보여줍니다.

ComboBox는 다른 컨트롤과 마찬가지로 다양한 이벤트를 지원합니다. 예를 들어, SelectionChanged 이벤트는 ComboBox에서 선택한 항목이 변경될 때마다 발생합니다. 이벤트를 처리하기 위해서는 XAML에서 이벤트 핸들러를 등록해야 합니다.

ListBox

ListBox는 여러 개의 선택 가능한 목록 항목을 제공하는 컨트롤입니다. 다중 선택도 가능합니다. ListBox도 ComboBox와 마찬가지로 자유롭게 항목을 추가하거나 삭제할 수 있습니다.

예시 코드:

<ListBox>
        <ListBoxItem Content="Item 1" />
        <ListBoxItem Content="Item 2" />
        <ListBoxItem Content="Item 3" />
</ListBox>

위 코드는 세 개의 목록 항목을 가진 ListBox를 생성합니다.