C# WPF에서 user control과 data binding에 대한 간단한 설명

응용 프로그램에서 유저 컨트롤(User control)이란?

 윈도우 OS에서 동작되는 어떤 응용프로그램을 만든다고 가정하자. 여기서 응용프로그램은 사용자에게 정보를 보여줄 수 있고, 사용자의 입력을 받을 수도 있다. 예를 들면 텍스트로 정보가 작성된 어떤 ‘화면’이 있고, 사용자가 원하는 동작을 수행하기 위해 ‘버튼’이 있을 수 있다. 이처럼 화면과 버튼과 같은 요소들을 유저 컨트롤(User control)이라고 할 수 있다. 확장하여 생각한다면 UI의 요소라고 말할 수 있다. 

응용 프로그램에서의 다양한 유저 컨트롤

 

 유저 컨트롤은 응용프로그램을 개발할 때 사용자의 입력을 받기도 하고 사용자가 출력을 받아드리기도 하는 중요한 부분이다. 이러한 요소를 단순하게 사용할 수도 있지만 좀 더 편의성, 기능성을 주기 위해 개발자가 변형하여 사용할 수도 있다. 예를 들어 버튼의 상단에 글씨가 있을 수도 있지만 버튼 내부에 글씨가 있을 수도 있고, 버튼의 모양이 네모가 아니라 동그랗게 생겼거나 등등 다양하게 변형하여 표현할 수 있다. 

버튼이라는 하나의 유저 컨트롤이 다양하게 변형될 수 있음

 

 여기서 유저 컨트롤을 잘 만들어 두면 응용 프로그램을 디자인할 때 재사용할 수 있는 장점이 있다. 하나의 페이지가 아닌 여러 페이지로 이루어진 응용 프로그램이거나 혹은 다양한 응용 프로그램을 만들 때 잘 만들어진 유저 컨트롤을 사용할 수 있다. 예를 들어 2개의 페이지로 이루어진 응용 프로그램이 있다고 가정하자. 이 응용 프로그램은 첫번째 페이지에서는 원하는 정보를 볼 수 있는 버튼들로 이루어져있고, 두번째 페이지는 버튼을 눌렀을 때 그 버튼에 해당하는 정보를 보여주는 텍스트 박스와 뒤로 가기 버튼으로  이루어져 있다. 

2개의 페이지로 이루어진 응용 프로그램 예시 설명

 

 이 응용 프로그램에서 공통적으로 사용되는 부분이 있는데 버튼이다. 텍스트만 다를 뿐 같다. 이러한 버튼을 페이지마다 일일이 작업을 한다면 시간이 많이 소요된다. 버튼에 해당하는 부분을 유저 컨트롤로 만들어 가져다 사용한다면 빠르게 작업할 수 있을 것이다.

UI를 구성함에 있어 효율을 가져다주는 유저 컨트롤의 사용

 

WPF에서 데이터 바인딩(Data Binding)이란?

 유저 컨트롤은 사용자에게 정보를 입력을 받고, 출력할 수 있다. 이때 이런 UI 내부에서는 데이터를 변경하거나 가져오거나 등의 행동을 할 수 있다. 사용자가 버튼을 눌렀을 때, 화면에 텍스트가 변경되는 것을 예시로 들어보자. 사용자가 버튼을 누르면 내부에 텍스트 데이터가 바뀌게 되고 이렇게 변경된 텍스트 데이터를 화면에 출력할 것이다. 즉, 데이터가 변경되는 것이다. 데이터가 변경되었을 때, 출력 중인 텍스트 데이터를 바꾸는 방법은 여러 가지가 있을 것이다. WPF에서는 이러한 작업을 쉽게 할 수 있는데, 이러한 기능을 하는 것이 데이터 바인딩(Data binding)이다.

 유저 컨트롤에서 데이터와 연관된 세부 요소를 데이터와 묶어 두는 것이다. 앞에서 언급한 예시를 바탕으로 계속 설명을 해보자면, 화면에 출력을 기능하는 UI의 ‘텍스트’라는 세부 요소를 내부에 어떤 string 데이터와 바인딩하여 작업을 했다면, 이 string 데이터가 변경되었을 때 UI의 ‘텍스트’도 변경된다. MS 공식 문서에서 데이터 바인딩은 앱 UI와 해당 UI가 표시하는 데이터를 연결하는 프로세스라고 설명한다. 

데이터 바인딩의 설명

 

WPF에서 데이터 바인딩의 데이터 흐름 방향

 MS 공식 문서에 있는 내용에 따르면 크게 3가지 방법이 있다. 이를 간단하게 요약해보고자 한다.

MS의 WPF .NET의 데이터 바인딩 개요에 있는 데이터 흐름 방향의 정리

 

 이러한 데이터 바인딩의 장점은 데이터 부분과 UI 부분이 분리가 잘 된다는 것이다. 풀어서 이야기하자면 디자인 작업을 하는 사람과 데이터 작업을 하는 사람이 나누어서 협업할 수 있다는 장점이 있다.  

 

Visual studio 2012에서 유저 컨트롤을 만들고 데이터 바인딩 해보기

 다른 상위 버전의 Visual studio도 큰 차이 없이 진행할 수 있는 예제를 준비해보았다. 먼저 C# WPF 프로젝트를 생성한다. 필자는 UCExample이라는 이름으로 프로젝트를 생성하였다. 이후 유저 컨트롤과 관련된 코드들을 쉽게 찾기 위해 UserControls라는 디렉토리를 프로젝트에 추가하자. 프로젝트에 추가된 디렉토리에 오른쪽 마우스 클릭을 하여 ‘추가’를 선택하고 ‘새 항목’을 선택하자. 

오른쪽에 있는 솔류션 탐색기에서 디렉토리를 생성하고 '추가'-'새 항목'을 선택

 

 새 항목 추가 창에서 사용자 정의 컨트롤 (WPF)를 선택하고 TextBtn.xaml이라는 이름으로 유저 컨트롤을 생성해보자.

사용자 정의 컨트롤을 선택하고 'TextBtn.xaml'로 유저 컨트롤을 생성

 

생성된 유저 컨트롤인 TextBtn.xaml에 아래와 같이 코드를 수정하자. 이 코드는 버튼 유저 컨트롤을 생성하는 코드이다.

<UserControl x:Class="UcExample.UserControls.TextBtn"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d"  
             d:DesignHeight="70" d:DesignWidth="150"    
             x:Name="TxtBtn">
    <Grid>
        <Button Foreground="Black" FontSize="20" Content="{Binding BtnTextStr, ElementName=TxtBtn}" Click="Button_Click"/>
    </Grid>
</UserControl>
 

 

 이 버튼은 글자가 새겨진 버튼이다. 이 버튼은 Foreground 속성을 통해 글자의 색이 검은색으로 표기된다. 또 글자의 크기는 FontSize 속성을 통해 20으로 정의되었다. Click은 버튼이 눌러졌을 때의 이벤트 발생을 위한 코드이다. Content 속성에는 버튼 위에 새겨질 글자를 넣을 수 있다. 이 버튼 위의 텍스트를 데이터 바인딩시켜서 사용해보자. 데이터 바인딩을 위해 {Binding BtnTextStr, ElementName=TxtBtn}와 같은 코드를 입력했다. Binding 뒷 부분에 작성된 BtnTextStr은 이 버튼에 새겨질 텍스트와 연결할 변수의 이름을 나타낸다. ElementName은 이 변수가 바인딩될 요소를 작성해주는데, xaml코드 상단의 x:Name=TxtBtn의 TxtBtn을 작성한다. 이 유저 컨트롤의 요소 이름이 TxtBtn이라는 의미이다.

 생성된 유저 컨트롤의 코드 비하인드인 TextBtn.xaml.cs에 아래와 같이 코드를 수정하자. 이 코드는 버튼 유저 컨트롤과 관련된 내부 코드이다. 여기서 변수를 정의하고 데이터 바인딩을 한다.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
 
namespace UcExample.UserControls
{
    /// <summary>
    /// TextBtn.xaml에 대한 상호 작용 논리
    /// </summary>
    public partial class TextBtn : UserControl
    {
        public TextBtn()
        {
            InitializeComponent();
        }
 
        public string BtnTextStr
        {
            get { return (string)GetValue(BtnTextStrProperty); }
            set { SetValue(BtnTextStrProperty, value); }
        }
        public static readonly DependencyProperty BtnTextStrProperty =
            DependencyProperty.Register("BtnTextStr", typeof(string), typeof(TextBtn), new UIPropertyMetadata("default"));
 
        public event RoutedEventHandler Click;
 
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            Click(this, e);
        }
    }
}
 

 

 작성된 코드 중 아래 부분의 이벤트(event)와 관련된 함수와 변수는 버튼을 클릭하였을 때 클릭되었음을 이벤트로 처리하기 위한 코드이다. 버튼 위의 글자와 연결할 작성된 변수인 ‘BtnTextStr’를 정의한다. 여기서 데이터 바인딩을 위해 get, set 함수에 프로퍼티(property)를 작성한다. DependencyProperty BtnTextStrProperty라는 프로퍼티를 통해 UI의 요소와 변수를 엮여준다. 각 세부 코드의 설명은 아래의 그림과 같다.

DependencyProperty BtnTextStrProperty와 관련한 세부 입력 파라미터의 설명

 

 다음으로 MainWindow.xaml를 다음과 같이 코드를 수정하자. 먼저 메인 윈도우의 사이즈를 조절하고, 유저 컨트롤을 사용하기 위해 네임스페이스(namespace)를 추가했다. 이후 텍스트가 있는 버튼 유저 컨트롤(TextBtn)을 사용하여 버튼 2개를 생성하였다. 유저 컨트롤에서 생성한 텍스트가 있는 버튼을 xaml 코드에 어떻게 추가하는지 확인하자.

<Window x:Class="UcExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:UserControls="clr-namespace:UcExample.UserControls" 
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <StackPanel>
            <UserControls:TextBtn x:Name="txtBtn1" Click="btn1_click"/>
            <UserControls:TextBtn x:Name="txtBtn2" Click="btn2_click"/>
        </StackPanel>
    </Grid>
</Window>
 

 

 이제 MainWindow.xaml의 코드 비하인드(MainWindow.xaml.cs)를 수정하자. 각 버튼을 클릭할 때, 버튼에 표기되는 텍스트를 변경할 수 있게 코드를 작성한다. 여기서 버튼의 텍스트를 변경하는 방법은 이전에 데이터 바인딩하였던 string 변수의 값을 바꿈으로써 수행한다. 각 버튼을 누를 때 데이터 바인딩된 변수를 각각 btn1과 btn2로 수정할 것이다.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
 
namespace UcExample
{
    /// <summary>
    /// MainWindow.xaml에 대한 상호 작용 논리
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
 
        private void btn1_click(object sender, RoutedEventArgs e)
        {
            txtBtn1.BtnTextStr = "btn1";
        }
 
        private void btn2_click(object sender, RoutedEventArgs e)
        {
            txtBtn2.BtnTextStr = "btn2";
        }
    }
}
 

 

 빌드(build)를 수행하여 만들어진 응용프로그램을 실행해보자. 처음에 버튼 위의 텍스트는 초기 값으로 지정한 default가 나타나는 것을 볼 수 있다. 각 버튼을 클릭하면 데이터 바인딩된 string 값이 변경되면서 버튼 위의 텍스트가 변경됨을 볼 수 있다.

이 예제의 실행 및 동작 화면 예시

 

참고자료 (Reference)

1. docs.microsoft.com/ko-kr/dotnet/desktop/wpf/data/data-binding-overview?view=netdesktop-5.0
2. colorscripter.com/

데이터 바인딩 개요 - WPF .NET

Color Scripter