WPF 기초 데이터 바인딩

데이터 바인딩

조만간, 특히 상업용 프로그램을 작성하고 있다면, 화면 위젯을 기존 데이터와 연동시켜야 하는 경우가 있을것이다 이러한 데이터들은 매우 다양한 형태로 존재한다. 인터넷상의 공개된 데이터, 이메일, XML파일, 운영체제, 데이터베이스 등에서 가져올 수도 있다, 좀 범위를 좁혀 보면, 가장 자주 사용하는 것은 관계형 데이터베이스일 것이고, MS쪽  프로그램을 다룬다면 아마도 SQL Server를 주로 사용할 것이다.

컨트롤을 어떤 데이터 타입이든 간에 데이터 소스와 바인딩시키는 기능은 효율적이고 좋은 프로그램을 만드는 데 중요한 요소이다. 만약, WPF가 ASP.NET이나 윈폼을 다룰 때처럼 상당한 수준의 데이터 바인딩 기능을 가지지 못했다면 단순히 인상적인 장난감 정도에 지나지 않았을 것이다

WPF의 데이터 바인딩은 그것이 어떤 종류이든 간에 기반 데이터와 사용자 인터페이스를 분리할 수 있도록 해준다. 그래서, 더 나은 확장성과 성능을 보장하고 무엇보다 유지 보수성을 향상시킨다.

비주얼 스튜디오에서 체크아웃 프로그램 만들기

간단한 장바구니를 구현하기 위해서 XAML과 비즈니스 로직을 결합할 것이다 XAML로 선언할 ListBox와 데이터 소스를 바인딩할 것이다

비주얼 스튜디오를 실행시키고 CheckOut이라는 WPF응용프로그램을 만든다, 처음 할 작업은 ShoppingCartItem.cs 라는 새로운 클래스를 만드는 것이다

 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace CheckOut
{
    public class ShoppingCart : List
    {
    }    
    
    public class ShoppingCartItem
    {
        public ShoppingCartItem()
        {
            this.Item = string.Empty;
            this.Value = string.Empty;
            this.ShortDescription = string.Empty;
            this.SKU = -1;
            this.LongDescription = string.Empty;
            this.ProductImage = string.Empty;
        }

        public string Item
        {
            get;
            set;
        }
        public string Value
        {
            get;
            set;
        }
        public string ShortDescription
        {
            get;
            set;
        }
        public int SKU
        {
            get;
            set;
        }
        public string LongDescription
        {
            get;
            set;
        }
        public string ProductImage
        {
            get;
            set;
        }
    }
}

이클래스는 세개의 문자열 프로퍼티오 한개의 정수형 프로퍼티 외에는 아무것도 없다

Windows1.xaml파일에서 프리제네이션 계층을 정의할 XAML코드를 추가한다. 이 코드들은 아래와 같다

<Window x:Class="CheckOut.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:CheckOut" Title="Programming .NET 3.5 | Data Binding 101" Height="100" Width="380" > <Window.Resources> <local:ShoppingCartItem x:Key="Cart" SKU="1568" Item="Photograph" Value="$19.99" ShortDescription="A beautiful picture of a dolphin" /> </Window.Resources> <Grid DataContext="{StaticResource Cart}" Margin="3" Width="360" HorizontalAlignment="Left"> <Grid.RowDefinitions> <RowDefinition Height="20" /> <RowDefinition Height="20" /> <RowDefinition /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="40" /> <ColumnDefinition Width="100" /> <ColumnDefinition /> <ColumnDefinition Width="40" /> </Grid.ColumnDefinitions> <TextBlock Grid.Column="0" Grid.Row="0">_SKU</TextBlock> <TextBlock Grid.Column="1" Grid.Row="0">_Item</TextBlock> <TextBlock Grid.Column="2" Grid.Row="0">_Description</TextBlock> <TextBlock Grid.Column="3" Grid.Row="0">_Price</TextBlock> <TextBlock Grid.Column="0" Grid.Row="1" Text="{Binding Path=SKU}"/> <TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding Path=Item}"/> <TextBlock Grid.Column="2" Grid.Row="1" Text="{Binding Path=ShortDescription}"/> <TextBlock Grid.Column="3" Grid.Row="1" Text="{Binding Path=Value}"/> </Grid> </Window>

Resources 섹션에서 다양한 프로퍼티를 가진 장바구니의 인스턴스를 선언한다. 이후 Grid를 만들고 DataContext 프로퍼티의 값으로 Resources 섹션에서 선언한 Cart를 할당하고,Resources 센션의 데이터와 지금 선언하고 있는 엘리먼트들과 바인딩할 것이다

다음으로는 , 두 열과 네행을 정의하고 처음 행에 항목의 이름으로 사용할 네 개의 TextBlock 칸마다 하나씩 배치한다

다음 줄에도 , TxtBlock 엘리먼트를 추가하고, Text프로퍼티에 바인딩 구문을 다음과 같이 추가한다

<TextBlock Grid.Column="0" Grid.Row="1" Text="{Binding Path=SKU}" />

이코드는 TextBlock의 위치가 1번 열 0번 행이고, Text 프로퍼티가 리소스에서 "SKU"라는 이름의 데이터 소스와 바인딩된다는 것을 알려준다. SKU의 정의는 이전 Resources 섹션에서 보앗다