UWP 개발, 행과 열 필드의 값을 주어진 형식에 맞게 출력하기

유니버설 Windows 플랫폼(UWP) 개발은 다양한 디바이스에서 실행될 수 있는 앱을 만드는 것을 목표로 합니다. 이 강좌에서는 UWP 애플리케이션에서 행과 열 필드의 값을 주어진 형식에 맞게 출력하는 방법에 대해 자세히 설명하고, 이를 위한 실질적인 예제 코드를 제공하겠습니다.

UWP 기본 구조 이해하기

UWP 애플리케이션은 기본적으로 XAML(Extensible Application Markup Language)과 C# 또는 VB.NET으로 구성됩니다. XAML은 UI를 정의하는 데 사용되고, C#은 애플리케이션의 비즈니스 로직을 구현하는 데 사용됩니다. 우리의 목표는 데이터의 형식을 설정하고 이를 UI에 출력하는 것입니다.

행과 열 데이터 구조

행과 열 데이터를 표현하기 위해 다양한 방법이 있을 수 있지만, 가장 일반적으로 사용되는 방법은 DataGrid와 ListView와 같은 컨트롤을 사용하는 것입니다. 이 예제에서는 행과 열의 데이터를 ListView 컨트롤을 사용하여 출력하겠습니다.

XAML UI 설계

먼저, XAML에서 UI를 정의하겠습니다. 아래의 코드는 행과 열의 데이터를 출력하기 위한 기본 UI를 설정합니다.

<Page
    x:Class="MyApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MyApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid>
        <StackPanel>
            <TextBlock Text="데이터 출력 예제" FontSize="24" Margin="10" />
            <ListView x:Name="dataListView">
                <ListView.View>
                    <GridView>
                        <GridViewColumn Header="ID" Width="100" DisplayMemberBinding="{Binding Id}" />
                        <GridViewColumn Header="이름" Width="200" DisplayMemberBinding="{Binding Name}" />
                        <GridViewColumn Header="나이" Width="100" DisplayMemberBinding="{Binding Age}" />
                    </GridView>
                </ListView.View>
            </ListView>
        </StackPanel>
    </Grid>
    </Page>
    

데이터 모델 정의하기

앱에서 사용할 데이터 모델을 정의합니다. 이 모델은 데이터를 구조화하고 쉽게 다룰 수 있도록 해줍니다. 아래의 코드는 간단한 데이터 모델 클래스인 Person를 정의합니다.

public class Person
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public int Age { get; set; }

        public Person(int id, string name, int age)
        {
            Id = id;
            Name = name;
            Age = age;
        }
    }
    

데이터 로딩 및 바인딩

이제 데이터를 생성하고 ListView에 바인딩하는 방법을 살펴보겠습니다. MainPage.xaml.cs 파일에 다음 코드를 추가하여 데이터를 초기화하고 UI와 연결합니다.

using System.Collections.Generic;
    using Windows.UI.Xaml.Controls;

    namespace MyApp
    {
        public sealed partial class MainPage : Page
        {
            public MainPage()
            {
                this.InitializeComponent();
                LoadData();
            }

            private void LoadData()
            {
                var people = new List<Person>
                {
                    new Person(1, "홍길동", 25),
                    new Person(2, "이몽룡", 30),
                    new Person(3, "성춘향", 28),
                };

                dataListView.ItemsSource = people;
            }
        }
    }
    

형식화된 출력 구현하기

이제 행과 열의 값을 주어진 형식에 맞게 출력해보겠습니다. 예를 들어, 나이를 특정 기준에 맞춰 출력할 수 있습니다. 이를 위해 GridViewColumn의 CellTemplate를 사용하여 값을 형식화할 수 있습니다.

<GridViewColumn Header="형식화된 나이" Width="150">
    <GridViewColumn.CellTemplate>
        <DataTemplate>
            <TextBlock>
                <TextBlock.Text>{Binding Age, Converter={StaticResource AgeFormatConverter}}</TextBlock.Text>
            </TextBlock>
        </DataTemplate>
    </GridViewColumn.CellTemplate>
    </GridViewColumn>
    

위의 코드에서 AgeFormatConverter는 연령을 형식화하는 변환기입니다. 이 변환기는 XAML에 바인딩된 데이터를 변환하여 화면에 출력하기 위해 필요합니다.

변환기 클래스 구현하기

using System;
    using System.Globalization;
    using Windows.UI.Xaml.Data;

    public class AgeFormatConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, string language)
        {
            if (value is int age)
            {
                return $"{age}세"; // 형식화된 출력
            }
            return string.Empty;
        }

        public object ConvertBack(object value, Type targetType, object parameter, string language)
        {
            throw new NotImplementedException();
        }
    }
    

앱 실행 & 결과 확인

이제 모든 구성이 완료되었습니다. 애플리케이션을 실행하고 ListView에서 데이터를 확인합니다. 각 행마다 ID, 이름, 나이가 표시되며, 나이는 형식화된 형태로 보입니다. 이로써 간단한 UWP 앱이 완성되었습니다!

마무리

UWP 개발에서 행과 열 필드의 값을 주어진 형식에 맞게 출력하는 방법에 대해 알아보았습니다. XAML, 데이터 모델, 데이터 바인딩 및 형식 변환기를 사용하는 방법을 배웠습니다. 이 기초를 통해 더 복잡한 애플리케이션으로 발전시킬 수 있습니다.

앞으로 UWP 개발에 더 많은 관심을 가지고 다양한 기능을 추가해 보세요. 다음 강좌에서는 UWP에서의 비동기 프로그래밍에 대해 다루겠습니다.