UWP XAML <ComboBox/> 콤보박스 컨트롤 선택 이벤트SelectionChanged 사용 방법

UWP 의 콤보박스인 <ComboBox/> 컨트롤에 SelectionChanged 이벤트를 설정하면 마우스로 선택된 항목의 값을 가져올 수 있다. 여러 항목 중 하나는 <ComboBox/> 의 자식 컨트롤인 여러 개의 <ComboBoxItem/> 중에 선택된 하나의 컨트롤이 가진 값을 가져오는 것이다.

UWP XAML <ComboBox/> 콤보박스 컨트롤 선택 이벤트
SelectionChanged 사용 방법

콤보박스는 여러 개의 항목 중 하나를 선택하는 것으로 UWP 에서 <ComboBox/> 컨트롤을 사용한다.

하나의 콤보박스 컨트롤에는 자식 컨트롤로 여러 개의 <ComboBoxItem/> 이 존재하여 이것 중 하나를 화면에서 선택하도록 한다.

콤보박스가 단순히 선택하는 것이 아닌 어떤 항목을 선택하면 그 값에 따라 이벤트가 일어나도록 할 수 있다.

UWP 콤보박스인 <ComboBox/> 컨트롤에 SelectionChanged 이벤트를 추가함으로써 항목이 선택될 때마다 원하는 동작을 추가할 수 있다.

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

선택 이벤트 SelectionChanged

UWP 의 콤보박스를 선택했을 때 특정 동작을 발생시키기 위해 SelectionChanged 이벤트를 등록하여 사용할 수 있다.

아래는 UWP 콤보박스인 <ComboBox/> 마크업에 SelectionChanged 를 등록하는 xaml 코드이다.

<ComboBox Name="콤보박스_컨트롤명" SelectionChanged="콤보박스_선택이벤트명_SelectionChanged">
	<ComboBoxItem/>
	<ComboBoxItem/>
	<ComboBoxItem/>
	....
</ComboBox>

xaml 코드에서 이벤트를 등록했다면 C# 코드인 xaml.cs 에서 실제로 이벤트가 동작할 코드를 추가해야 한다.

아래는 xaml.cs 에 SelectionChanged 이벤트를 작성한 것을 보여준다.

/** 콤보박스 선택시 이벤트 실행 */
private void ComboBoxSample_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
	ComboBox cb = sender as ComboBox;

	ComboBoxItem cbi = cb.Items[cb.SelectedIndex] as ComboBoxItem;
    
    // 코드
}

위의 코드는 UWP <ComboBox/> 컨트롤의 선택이벤트인 SelectionChanged 가 실행되는 것을 보여준다.

위에서 중요한 점은 SelectedIndex 부분이다.

<ComboBox/> 컨트롤 내에는 자식 컨트롤인 <ComboBoxItem/> 이 여러개 존재한다.

SelectedIndex 는 사용자가 어떤 자식 컨트롤이 선택되었는지를 숫자 인덱스로 알 수 있다.

선택된 인덱스를 찾았다면 어떤 자식 컨트롤이 선택되었는지 찾을 수 있다.

전체 코드

UWP 콤보박스에서 항목을 선택했을 때 어떤 것이 선택되었는지 C# 코드로 만들어 본다.

xaml 에 <ComboBox/> 컨트롤과 <ComboBoxItem/> 컨트롤을 작성한 후 SelectionChanged 이벤트를 설정한다.

xaml.cs 코드에는 SelectionChanged 에 대한 코드를 작성하고 어떤 값이 선택되었는지 메세지창으로 보여주도록 한다.

아래는 컨트롤을 작성한 UWP 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" SelectionChanged="ComboBoxSample_SelectionChanged">
                <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>

<ComboBox/> 컨트롤에 SelectionChanged 이벤트에 대한 코드는 다음과 같다.

xaml.cs 코드에 SelectionChanged 이벤트를 구현하고 코드를 작성한다.

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Popups;
using Windows.UI.ViewManagement;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// 빈 페이지 항목 템플릿에 대한 설명은 https://go.microsoft.com/fwlink/?LinkId=234238에 나와 있습니다.

namespace UWPAppTutorials
{
    /// <summary>
    /// 자체적으로 사용하거나 프레임 내에서 탐색할 수 있는 빈 페이지입니다.
    /// </summary>
    public sealed partial class Ctl_ComboBoxPage : Page
    {
        public Ctl_ComboBoxPage()
        {
            this.InitializeComponent();
            
            /** 윈도우 크기 초기화 */
            InitSetWindowsSize();
        }

        /** MessageDialog 화면에 표시하기 */
        async void ShowMessageDialog(string content)
        {
            var dialog = new MessageDialog(content);
            await dialog.ShowAsync();
        }

        /** 윈도우 크기 초기화 */
        void InitSetWindowsSize()
        {
            double width = 480;
            double height = 320;
            ApplicationView.GetForCurrentView().SetPreferredMinSize(new Size(width, height));
        }

        /** 콤보박스 선택시 이벤트 실행 */
        private void ComboBoxSample_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            ComboBox cb = sender as ComboBox;

            int idxItem = cb.SelectedIndex;

            if (idxItem == 0)
            {
                return;
            }

            ComboBoxItem cbi = cb.Items[cb.SelectedIndex] as ComboBoxItem;

            object objTag = cbi.Tag;
            object objContent = cbi.Content;

            string content = "";
            content += (cb.SelectedIndex + " 번째 :");
            content += ("{");
            content += (" 항목 : " + objTag);
            content += (", 값 : " + objContent);
            content += ("}");

            ShowMessageDialog(content);
        }
    }
}

SelectionChanged 이벤트 코드를 보면 SelectedIndex 를 이용하여 <ComboBox/> 의 자식컨트롤에 있는 여러 개의 <ComboBoxItem/> 에서 어떤 값이 선택되었는지 인덱스를 찾는다.

이후 <ComboBoxItem/> 의 Tag 와 Content 값을 가져온 후 메세지창을 나타내어 값을 보여준다.

결과 화면은 아래와 같다.