How to Bind an Enum to a ComboBox in UWP

앱을 개발하다보면 Enum을 ComboBox 목록에 출력을 해야할 경우가 종종 있습니다. 이 경우 편하게 사용할 수 있는 방법을 알려드리도록 하겠습니다.

 

아래 동영상은 WPF에서 사용하는 방법에 대해서 설명하고 있습니다. 그런데, UWP에서는 조금 다르게 사용해야 할 것 같습니다.

 

(1) How to Bind an Enum to a ComboBox in WPF - YouTube

MarkupExtension

태그 확장은 XAML의 문자열 특성 값 또는 태그 요소의 입력을 기반으로 개체를 호출자에게 반환합니다. 태그 확장은 Type Converter만으로 수행 할 수있는 것보다 더 정교한 방식으로 개체를 반환합니다. 

 

사용자 지정 태그 확장을 만드는 방법에 대한 자세한 내용은 ProvideValue를 참조하십시오. 일반적인 태그 확장에 대한 자세한 내용은 XAML용 태그 확장 개요를 참조하세요. WPF에서 빌드하고 XAML용 태그 확장을 사용하거나 만드는 경우 다른 관련 정보는 태그 확장 및 WPF XAML 항목에서 찾을 수 있습니다.

 

파생 클래스는 MarkupExtensionReturnTypeAttribute로 특성을 지정하여 태그 확장의 ProvideValue 구현에서 사용할 수있는 가장 구체적인 반환 형식을 사용자에게 알려야합니다.

Source

Status.cs

    public enum Status
    {
        Horrible,
        Bad,
        Soso,
        Good
    }

EnumBindingSourceExtension.cs

using System;
using Windows.UI.Xaml.Markup;

namespace EnumToComboBox
{
    public class EnumBindingSourceExtension : MarkupExtension
    {
        public Type EnumType { get; set; }

        public EnumBindingSourceExtension()
        {
        }

        protected override object ProvideValue()
        {
            if (EnumType is null || !EnumType.IsEnum)
                throw new Exception("EnumType must not be null and of type enum");
            return Enum.GetValues(EnumType);
        }
    }
}

MainPage.xaml

UWP의 경우 x:Type을 사용할 수 없어서, EnumType이라는 Public 프로퍼티에 Status 타입을 직접 입력했습니다. 만약 Enum의 int값을 이용해야 하는 경우에는 ProvideValue()에서 Enum.GetValues()를 이용하지 않고 String, Int가 포함된 모델을 만들어서 배열이나 리스트 형태로 반환하면 될 것 같습니다.

<Page
    x:Class="EnumToComboBox.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:EnumToComboBox"
    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 HorizontalAlignment="Center" VerticalAlignment="Center">
            <ComboBox x:Name="StatusCombo" MinWidth="150"
                  ItemsSource="{Binding Source={local:EnumBindingSourceExtension EnumType=local:Status}}"/>
            <TextBlock Text="{Binding ElementName=StatusCombo, Path=SelectedItem}"/>
            <TextBlock Text="{Binding ElementName=StatusCombo, Path=SelectedIndex}"/>
        </StackPanel>
    </Grid>
</Page>

전체 소스는 여기를 참고합니다.