UWP XAML <ComboBox/> 콤보박스 컨트롤 사용 방법

UWP 에서 콤보박스는 xaml 마크업인 <ComboBox/> 를 사용하며 선택을 위한 항목으로 <ComboBoxItem/> 마크업을 여러개 사용한다. 콤보박스의 역할은 여러 개의 항목 중 하나를 선택할 수 있도록 하는 것이다. 화면에 최초로 나타날 떄 특정 항목을 선택하도록 하려면 IsSelected 속성을 true 설정하면 된다.

UWP XAML <ComboBox/> 콤보박스 컨트롤 사용 방법

콤보박스는 여러개의 항목 중 하나를 선택하는 선택형 목록이다.

UWP 에서 콤보박스는 <ComboBox/> xaml 마크업 태그를 사용하며 목록 아이템으로 <ComboBoxItem/> 마크업 태그를 사용한다.

하나의 <ComboBox/> 태그에 여러 개의 자식 <ComboBoxItem/> 태그가 설정되는 것이다.

이것은 html 의 list 태그와 같은 개념이기도 하다.

ComboBox 와 ComboBoxItem

UWP 의 <ComboBox/> 하나에는 여러 개의 <ComboBoxItem/> 이 입력되어 있고, 이것은 선택형 목록으로 UWP 화면에 표시된다.

아래는 UWP 에서 콤보박스를 사용하는 예시를 보여준다.

<ComboBox/> 태그 내부에 여러 개의 <ComboBoxItem/> 이 존재하며 여러 개의 항목 중 하나를 선택할 수 있도록 한다.

<ComboBoxItem/> 마크업의 IsSelected 속성에 true 를 설정하면 처음 화면에 나타날 때 특정 항목을 지정하여 표시할 수 있다.

<ComboBox Name="콤보박스명" SelectionChanged="콤보박스_선택_이벤트">
	<ComboBoxItem Content="화면 표시 문자열" Tag="값" IsSelected="기본 선택"></ComboBoxItem>
	<ComboBoxItem Content="화면 표시 문자열" Tag="값"></ComboBoxItem>
	<ComboBoxItem Content="화면 표시 문자열" Tag="값"></ComboBoxItem>
	....
</ComboBox>

전체 코드

위의 내용으로 UWP 화면에 콤보박스를 표현해 보도록 한다.

아래는 UWP 의 <ComboBox/> 와 <ComboBoxItem/> 마크업을 사용한 xaml 코드이다.

<Page
    x:Class="UWPAppTutorials.Ctl_ComboBoxPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UWPAppTutorials"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>

        <StackPanel>

            <ComboBox Name="ComboBoxSample">
                <ComboBoxItem Content="-- 선택 --" Tag="" IsSelected="True"></ComboBoxItem>
                <ComboBoxItem Content="ItemText1" Tag="ItemValue1"></ComboBoxItem>
                <ComboBoxItem Content="ItemText2" Tag="ItemValue2"></ComboBoxItem>
                <ComboBoxItem Content="ItemText3" Tag="ItemValue3"></ComboBoxItem>
            </ComboBox>

        </StackPanel>

    </Grid>
</Page>

UWP xaml 코드에 <ComboBox/> 마크업 하나를 작성하고 여러 개의 <ComboBoxITem/> 마크업을 여러 개 작성하였다.

마우스를 클릭하면 여러개의 항목이 나타나며 하나를 선택할 수 있도록 목록이 나타날 것이다.

아래는 결과화면을 보여준다.