it개발자스터디공간

⁠<데이터 템플릿>

​

​데이터 템플릿은 임의의 닷넷 객체가 랜더링 될 때

​

적응 할 수 있는 UI의 한 부분으로 많은 WPF

​

컨트롤들은 데이터 템플릿을 효과적으로 

​

사용하기 위해 DAtaTemplate 타입의 Porperty들을

​

갖고 있습니다 WPF 데이터템플릿 모델을 사용하​면

데이터의 표현 방법을 매우 융통성 있게

정의 할수 있습니다.

이제 데이터 바인딩 예제를 살펴봄으로써

DataTemplate 이 왜 중요한지 알아보겠습니다.

Visual Studio 를 열어 DataTemplate 라는

이름으로 새로운 프로젝트를 생성합니다.

그리고 프로젝트의 이름 Carlist 로 변경합니다.

다음은 데이터 템플릿 작업 전에 데이터 바인딩

작업을 진행하겠습니다.

데이터 바인딩이 익숙하진 않지만 아래의

소스코드와 전 강의때의 데이터바인딩

을 참고하여서 진행해보겠습니다.

위 코드를 다 작성하셨다면 간단한 데이터바인딩

작업은 끝이 났고 다음과 같은 결과를 보입니다

(참고로 App.xaml 의 ⁠⁠StartupUri⁠ 를 CarList.xaml

​

으로 변경해주세요. )

​

위의 CarList.xaml 코드를 보시면서 눈치 채셨을지

​

모르겠지만 ListBox에 데이터 바인딩을 하면서

​

DataTemplate이 사용된 것을 아실 수 있을겁니다.

StackPanel의 DataContext의 "rsCarList" 는

데이터를 정의한 리소스이므로 DataTemplate

형식을 사용하는 속성을 가진 다른 컨트롤들

을 사용할수가 있습니다.

그럼 이제 DataTenplate에 요소를 추가하여

데이터가 좀 더 세련되게 나타나도록

만들어보겠습니다~

​

CarList.xaml에서

<Window Resources>...</Window Resources>

사이의 코드를 아래코드를 추가합니다.

​

​

다음으로 ListBox를 다음과 같이 변경합니다.

​ListBox에 HorizontalContentAlignment를

Stretch로 설정한 것은 항목 너비가 전체 공간을

차지하도록 하게 하기 위함입니다..

Ctrl + F5  눌러 실행결과를 보세요~

DataTemplate를 적용된 보습이 처음 결과보다

훨씬 더 세련되고 멋지게 나옵니다.

이로서 데이터 바인딩을 넘어서

데이터 템플릿을 적용한 응용프로그램을

만들수 있게되었습니다.

<데이터 바인딩>

데이터 바인딩은 컨트롤에 데이터를 채우고 컨트롤과

동기화 시키는 방법입니다.

간단한 에제를 통하여 데이터 바인딩을 하는법에

대하여 알아보겠습니다 ^^

지금 만들어 보고자 하는 프로그램은 TextBox

를 이용하여 사용자입력을 받고 버튼을 클릭해서

ListBox 컨트롤에 데이터를 추가하는 프로그램입니다.

우선 Visual Studio 에서 그림과 같이 새로운 프로젝트

를 WpfDataBinding이란 이름으로 생성합니다

프로젝트가 생성되면 디자인페이지에서

디자인 작업을먼저 실행하겠습니다.

다름 코드를 XAML 뷰어에서 입력하세요.

다 작성을 하였다면 컨트롤들의 배치가 끝나고

기본적인 디자인 작업이 끝이 났습니다.

이제 Wiondow1.xaml.cs 페이지에서 코드를

작성하도록 하겠습니다.

데이터바인딩 부분에서 그리 어려운 부분은 없지만

INotifyPropertyChanged 인터페이스와

ObserbableCollection 클래스는 약간 이해가 쉽지

않을것 입니다. 이부분은 차후 데이터바인딩

부분에서 자세히 알아보겠습니다(아쉽지만..

<컨트롤>

WPF 의 컨트롤들은 그 동안 사용하엿던 컨트롤

(Winform,Webform Control)

들과는 약간의 차이점이 있습니다.

예를 들어 이벤트 라우팅 이라든지 명령 처리,

마우스 및 키보드 입력 등의 차이점이 있습니다.

콘텐츠 요소를 포함하는 컨트롤과 XAML 속성요소의

문법에 대해 예제를 통해 알아보겠습니다.

저번에 만든 프로젝트의 솔류션 탐색기에서

WpfGridSample 이라는 프로젝트를 선택하고 마우스 우측을 클릭한 후

[추가] -> [창] 을 선택합니다.

새로운 윈도우 대화상자가 나타나면 적당한 이름을

정하고추가 버튼을 눌러줍니다.

새로운 창이 추가 되었으면 버튼컨트롤 안에 이미지와 Text 콘텐츠를

가지는 버튼을 만들어 보겠습니다.

XAML 뷰어에서 Window 의 width를 600으로 설정하고

<Grid></Grid> 사이에 다음 코드를 추가합니다.

이제 모든 작업은 끝이 나쏙 실행을 해서 결과를 확인해보겠습니다.

그러나 그전에 Application Class 의 "Startup Uri" 속성을 변경합니다.

Application Class 의 "Startup Uri" 속성은 응용프로그램의 Run과 같은

메소드로 SrartupUri 에 매핑된 Window 를 실행시켜줍니다.

자 이제 <Ctrl> + F5 키를 눌러 실행결과를 보시기 바랍니다

⁠​*Grid를 이용한 레이아웃 생성

​

​이번 강좌에는 Grid를 이용하여 간단한 

​

레이아웃을 만들어보자​

​

Grid를 이용하여 레이아웃을 만들기 위해

VisualStudio2008을 실행 시킨 뒤 새로운 프로젝트

생성하여 진행하면 된다 그 과정은

파일 -> 새로 만들기 -> 프로젝트를 클릭한다.

새 프로젝트 대화상자가 열리면 아래의 그림과   

같이 진행한다.

​

프러젝트가 생성되면 XAML 뷰어에서

Window 속성의 wdith 를 400으로 변경해주고   

<Grid></Grid>태그 사이에 다음에

아래와 같이 코드를 입력합니다.

이제 실행 결과를 보기 위해 <Ctrl> + F5를 눌러서

​

실행결과를 확인해 보겠습니다.

​

이러한 결과 값을 가지게 됩니다.

​

* 레이아웃 *

​ ​레이아웃 이란 화면의 구성요소(컨트롤)들의 배치입니다.

단순히 화면에 구성요소를 배치하는 것 만이 아니라

주목성/가독성/명쾌성/조형성/창조성 등을 충분히 고려하여

레아아웃을 구성해야 합니다.

(이러한 레이아웃을 쉽게 정의 할 수 있도록 해주는 것을 패널

이라고 하는데 패널의 자신의 콘텐츠를 어떻게 정렬해야 하는지

를 정의 하고 있는 컨트롤로 쉽게 생각해 무엇을 담을 수 있는

컨테이너 라 생각하면 된다)

WPF 에서는 아래와 같은 범용 컨트롤을 제공합니다.

* Canvas

*DockPanel

* grid

* StackPanel

* UniformGrid

* WrapPanel

<Hello World 만들기>

이제 본격적으로 WPF를 다루기 전에 간단하게

프로그램 하나를 만들어 보도록 하겠습니다 ^^

새로운 프로젝트를 만들기 위해 상단 메뉴에서

파일 >> 새로만들기 >> 프로젝트를 클릭합니다.

새 프로젝트 대화상자가 열리면 아래 그림과 같이

탬플릿과 프로젝트 이름을 설정합니다.

프로젝트가 생성되면 Hello World 라는 프로젝트 아래

App.xaml, Window1.xaml 이라는 파일이 생성되는데

Window1.xaml 파일을 보면 XAML 파일 편집기(이하 디자인뷰어)

와 XAML 코드 창 (이하 XAML뷰어)으로 나뉘어 보이는데

우선 XAML뷰어 쪽 XAML코드를 보도록 하겠습니다.

제일 윗줄에 최상위 요소인 Window 가 정의 되어있고 그안에

(xmlns : XML 네임스페이스 문법을이용하여 "x" 접두어를 덧붙인)

XAML 의 XML 네임스페이스로부터 Class 특성에 지정된

이름의 클래스의 일부를 사용하기 위해 사용되었고

그 아래 두 개의 XML 네임스페이스 선언은

XAML이 동작하기 위해 필요한 요소들을 사용하기 위해서 인데

두 번째 줄의 네임스페이스는 WPF를 사용하기 위한 것이며

세 번째 줄은 XAML자체를 선언해 놓은 것입니다.

이제 다음 코드를 입력후에 "HelloWorld"를 출력해봅시다.

이제 출력을 위한 모든 작업을 끝냈습니다.

실행 결과를 보고 위해 <Ctrl> + F5 를 눌러 실행결과를 보죠

WPF 창에 작성한 "HelloWorld" 가 멋지게 출력됨을 볼수있습니다.

WPF의 기능은?

WPF 는 .(1) NET Framework 3.0부터 추가된 기술로 2008년 초에

출시된 비주얼 스튜디오 2008

(한글판의 경우 2008년초 / 영문은 2007년 11월)

에서 사용하는 .NET Framewokr 3.5를 살펴보면

(2) Windows® Communication Foundation(WCF)

(3) Windows® Workflow Foundation(WF)

(4) Windows CardSpace™ (WCS)

이 4가지의 기술이 포함된 것을 볼수 있습니다

WPF는 .NET Framewokr 3.x 에 추가된 새로운 기술중 하나로

Windows Vista 의 새로운 UX를 제공하기 위해 탄생했습니다.

WPF에서는 그 핵심이 UX에 있다보니 기존 Window 프로그래밍과

 다르게 디자인적인 측면이 많이 요구되어 디자이너와

협업을 하여 작업을 진행해야만 합니다.

이때 개발자와 디자이너가 소통할 수 있는 중간언어를 사용해서

디자인과 코딩 작업을 병행할 수 있다면 커뮤니케이션 면,

생산성 면에서 좋은 효과를 거둘 수 있을 것입니다.

이를 위해 Microsoft사는

XAML(Extensible Application Markup Language)

이라고 하는 새로운 MarkUp Language 를 발표하여

UI 를 표현하기 위한 XAML 언어를 이용하여 개발자와 디자이너가

모두 사용 가능한 형태의 중간언어를 제공하게 되었습니다.