WPF/WPF 기초 다지기2009.02.19 11:44

개발자라는 직업은 자신이 파는 우물에서 새로운 효험이 발견될 때마다 예의주시하고 때로는 자신이 먼저 시음자가 되어 다른 사람에게 좋은 효과를 전파할 필요도 있다고 생각합니다.

그런 의미에서 요즘 이슈가 되고 있는 Silverlight WPF 등도 닷넷의 좋은 효험을 체험할 수 있는 기술이라고 생각합니다.

이번 강좌의 주제는 [WPF는 왜 필요한가?]라는 조금은 건방져 보일 수도 있는 위험한 내용으로 잡아 보았습니다.

누군가 WPF라는 좋은 약수를 먹고 관절염이 치료되었다는 말을 듣고서야 필요성을 느끼고 WPF를 찾는 것 보다는 WPF가 왜 나왔으며, 또 어떻게 쓰일 것인가를 미리 알아본 후에 WPF에 대해 천천히 음미하며 공부할 수 있도록 안내해 나가는것도 나쁘지 않을 것 같아서 이렇게 주제를 정해 보았습니다. (태클은 무셔요~)


—  WPF(Windows Presentation Foundation)

—  .Net Framework 3.0이상의 환경에서 동작하는 MS의 차세대 그래픽 표현 기술

 
말 그대로 직역을 하자면 "윈도우에서 발표하는(보여주는) 토대(기반)" 정도로 할 수 있습니다.

위의 직역이 지금 제가 전달해 드릴려는 WPF의 기능에 대한 저의 짜집기식 해석이니 너무 큰 짱돌만은 워워워~~

무엇인가 표현을 한다고 하는데. 기존 윈도우 프로그래밍에서도 잘만 되지 않았나라고 하신다면,

사용자 삽입 이미지

기존 프로그래밍은 위의 이미지와 같이 고정된 크기 기반의 프로그래밍이 주를 이루었고 창의 크기의 변화에 따른 자동적인 변환에 어려움이 많았습니다.

MFC로 대표되는 기존 프로그래밍과 WPF의 차이점은 쉽게 설명을 드리면 비트맵 이미지와 벡터 이미지와 차이라고 말씀드릴수 있습니다.

비트맵은 하나 하나의 점으로 이루어진 이미지여서 파일의 크기를 크고 작게 변경하면 계단현상이라는 굴곡이 생겼습니다. (주로 비트맵 이미지를 이용한 기존 프로그래밍도 비슷한 문제점)
그러나 일러스트레이터나 플래시에서 주로 쓰이는 벡터 기반의 이미지는 이미지를 구성하는 점과 점 사이를 크기의 변화에 따라 재계산해서 다시 그려주기 때문에 계단현상이 일어나지 않고 원하는 크기에 맞게 깔끔한 이미지(WPF에서는 XAML을 이용하여 벡터기반 이미지를 지원)를 그릴 수 있었습니다.

이런 화려한 UI를 가진 윈도우 개발 환경을 제공해 주는WPF를 당연히 준비해야 하겠습니다.

이번에는 "WPF가 뭐야?" 물었을때 기존 프로그래밍의 안 좋은 그래픽 표현 부분을 이쁘게 잘 안 깨지고 만들수 있는 닷넷 프레임워크 3.0이상의 새로운 윈도우 기반 그래픽 기술이야 정도로 정리하고 다음 시간에 WPF의 특징들에 대해서 자세히 알아보겠습니다.

오늘은 여기서 뿅~!!

Posted by UXPRO
WPF/WPF 기초 다지기2008.12.21 08:12
◎ 스택패널과 기본적으로 유사
◎ 자동정렬 기능 (윈도우 탐색기와 유사)
◎ 프로퍼티 (Orientation, ItemHeight, ItemWidth)
Posted by UXPRO
WPF/WPF 기초 다지기2008.12.18 07:04
◎ 가장 기본적인 패널
◎ 명시적인 좌표값을 이용해서 엘리먼트의 위치를 결정
◎ Left/Top/Right/Bottom 첨부 프로퍼티, 이를 통해서 엘리먼트의 위치를 결정


Posted by UXPRO
WPF/WPF 기초 다지기2008.12.15 03:41
◎ 여러 가지 기능을 복합적으로 가진 패널이며, 아마도 가장 자주 사용되는 패널
◎ VS나 Blend 같은 프로그램에서는 기본적으로 그리드 패널을 사용한다.
Posted by UXPRO
WPF/WPF 기초 다지기2008.12.13 02:52
◎ 4면의 방향으로 도킹, 전체 높이와 폭을 채운다.
◎ 프로퍼티 (Left, Top, Right, Bottom)
Posted by UXPRO
WPF/WPF 기초 다지기2008.12.11 02:17
◎ 자식 엘리먼트들이 추가되는 순서대로 누적된다.
◎ 오리엔테이션 프로퍼티를 사용하여 조정
Posted by UXPRO
WPF/WPF 기초 다지기2008.12.11 01:57

Panel이라는 개념은 기존 WinForm환경에도 있던 부분이지만 프로그램의 레이아웃을 잡고 컨트롤을 배열하는데 Panel만큼 중요한 것이 없습니다.

WPF에서도 여러 컨트롤을 하나의 단일화된 컨트롤로 그룹화하는데 Panel을 씁니다.

WPF에서 제공하는 기본 패널들에는 아래와 같은 것들이 있습니다.

◎ DockPanel : 다섯 개의 고정된 위치에 컨트롤을 배치한다.
◎ StackPanel : 수직 또는 수평으로 컨트롤을 적재하여 배치한다.
◎ Grid : 열과 행을 임의로 정의하여 각 열과 행에 해당 컨트롤을 배치한다.
◎ Cnavas : 원하는 임의의 좌표 값을 이용하여 컨트롤을 배치한다.

각각에 대한 자세한 내용은 다음에 바로 올리겠습니다.

Posted by UXPRO
WPF/WPF 기초 다지기2008.11.28 02:43

XAML은 XML기반의 문법을 따르기 때문에 많은 부분에서 XML과 유사합니다.

그렇다고 사전 학습으로 XML에 대해서 따로 시간을 내셔서 학습을 하셔야 한다는 말은 아닙니다.

거두절미하고 XAML은 XML과 같이 가장 최상단의 루트 요소는 하나여야 한다는 말입니다.

(XML과 같이 이런 부분만 학습해 주시면 됩니다.)

XML은 3가지의 루트 엘리먼트를 가질 수 있습니다.

◎ Windows : 독립 실행형 Windows 응용 프로그램의 형태로 실행
◎ Page : 브라우저에 포함된 페이지의 형태로 실행
◎ Application : 현재 응용 프로그램의 실행과 관련한 다양한 설정

이상입니다.


Posted by UXPRO
WPF/WPF 기초 다지기2008.05.02 20:25

엘리먼트(element)와 어트리뷰트(attribute)

XAML은 XML 기반의 언어입니다.
따라서 XAML도 XML의 엘리먼트와 어트리뷰트라는 개념을 고스란히 가지고 있는데요.

우선 XML에서의 엘리먼트와 어트리뷰트의 정의를 보면

엘리먼트(Element)
- XML 문서를 구성하는 기본이 되는 단위

- 작성 규칙
   * 시작 태그와 종료 태그가 쌍으로 존재해야 하고, 시작 태그와 종료 태그 사이에 엘리먼트의 내용으로 구성된다.
   * 태그명은 대소문자를 구분한다.
   * 종료 태그가 없는 빈 태그(Empty Tag)는 시작 태그 뒤에 "/"를 붙인다.
   * 올바른 중첩 구조를 가져야 한다.

어트리뷰트(Attribute)
- 엘리먼트를 꾸며주는 형용사 같은 역할을 한다.

- 작성규칙
    * 어트리뷰트는 이름과 값의 쌍으로 이루어진다.
    * 어트리뷰트의 값은 큰 따옴표("")나 작은 따옴표('')로 둘러 싸여져 있어야 한다.

정도로 요약할 수 있겠습니다.

XAML에서는 XML의 기본 개념에서 조금 더 나아가

엘리먼트를 닷넷 객체 혹은 구조체와 상응한다는 의미로 오브젝트 엘리먼트(object element)라고 부르고, 어트리뷰트는 속성을 정의하는 프로퍼티 어트리뷰트(property attribute)와 이벤트에 대한 정의를 지정하는 이벤트 어트리뷰트(event attribute)로 구분하며, 프로퍼티 어트리뷰트는 프로퍼티로, 이벤트 어트리뷰트는 이벤트로 각각 매핑이 됩니다.

Posted by UXPRO
WPF/WPF 기초 다지기2007.10.13 23:21
사용자 삽입 이미지
WinFX 시절 Code Name "Avalon"로 WPF의 전신을 소개 받을 무렵...

XAML은 좋습니다. 디자이너와 개발자의 협업과 직관적인 디자인 등으로 설명을 들으며

만난 XamlPAD 입니다.

오오~ 좋다 라는 생각을 가지고 나도 한번 만들어봐야 겠다는 생각을 가지고만 있다가
Expression Blend에 매료 되는 바람에 저에게 바람을 맞은 XamlPAD...

닷넷 프레임워크 3.0 SDK를 다운 받으면 같이 들어 있습니다.

Blend가 하나의 프로그램으로써 XAML을 랜더링하는 반면 XamlPAD는 말 그대로 메모장 정도의 가벼움에서 뿜어내는 포스가 있습니다.

앗! 아직 눈치 못 채신 분들을 위해 XamlPAD는 아래 부분에 XAML 코드를 넣으면 바로 위의 디자인 부분에 보여지는 유용한 프로그램입니다.
Posted by UXPRO