메뉴 바로가기 검색 및 카테고리 바로가기 본문 바로가기

한빛출판네트워크

회원가입이벤트 :: 한빛비즈 스페셜 멤버로 초대합니다! (이메일 수신동의, '한빛비즈' 관심브랜드 체크시 최대 5,000점 마일리지 적립)

IT/모바일

WPF(windows presentation foundation) 소개

한빛미디어

|

2006-12-13

|

by HANBIT

12,416

제공: 한빛 네트워크
저자: 한동훈

닷넷 프레임워크 3.0 정식 버전이 발표되었고, 윈도 비스타에도 기본으로 포함됩니다. 닷넷 프레임워크 3.0은 닷넷 프레임워크 2.0 위에 추가되는 성격으로 발표되었습니다. 따라서, 컴파일러는 닷넷 프레임워크 2.0의 것을 사용합니다.

닷넷 프레임워크 3.0 준비하기

닷넷 프레임워크 3.0을 윈도 XP/2003 등에서 사용하려면 닷넷 프레임워크 3.0 런타임을 설치해야 합니다.

닷넷 프레임워크 3.0을 기반으로 개발하기 위해서는 SDK를 추가로 설치합니다.

여기서는 비주얼 스튜디오 2005(이하 VS2005)에서 닷넷 프레임워크 3.0 프로그래밍을 할 것이므로 VS 2005에서 사용할 확장팩을 설치해야 합니다.

WPF 프로젝트 생성하기

세 가지를 모두 설치했으면 VS 2005를 실행합니다. VS2005에서 [파일] -> [새로 만들기] -> [프로젝트]를 선택하면 다음 대화상자를 볼 수 있습니다. 이 대화상자에서 [Visual C#] -> [.NET Framework 3.0]을 선택하면 오른쪽에 WPF 프로젝트 템플릿을 볼 수 있습니다. 여기서 [Windows Application(WPF)]를 선택합니다.

그림1
[그림1] WPF 프로젝트 생성

WPF 프로젝트를 생성하면 위에는 UI 디자이너가 표시되고, 아래에는 XAML 코드가 생성되는 것을 볼 수 있습니다. WPF에서 UI를 구성하는 코드를 XML을 기반으로 하는 XAML을 사용합니다. 처음 생성된 XAML 코드는 아래와 같습니다.

    
        
    

XAML에서 각각의 태그는 .NET 클래스에 해당합니다.  태그는 Window 클래스와 매핑됩니다. x:Class에서는 XAML 코드를 지정하는 클래스를 정의합니다. 닷넷 클래스와 매핑되지 않는 경우는 XML 네임스페이스를 가리키는 xmlns 속성뿐입니다.  태그는 XAML에서 사용하는 레이아웃 관리자(Layout Manager)를 의미합니다.


프로젝트 솔루션 탐색기를 보면 App.xaml 파일을 볼 수 있습니다. 이 파일은 응용프로그램의 설정을 관리합니다. App.xaml의 코드는 다음과 같습니다.

    
         
    

여기서 관심을 가질 것은 StartupUri 속성입니다. StartupUri 속성에서 시작 페이지를 설정합니다. Window1.xaml 파일이 설정되어 있으므로 응용프로그램을 실행할 때 Window1.xaml 페이지를 보여주게 됩니다. 다시 Window1.xaml로 돌아갑니다. 도구 상자에서 Button을 끌어다가 폼에 올려둔 모습은 다음과 같습니다.

그림2
[그림2]

UI를 디자인하는 모습은 윈폼(WinForm)을 사용할 때와 차이가 없습니다. 추가된 XAML 코드는 다음과 같습니다.
    
Window1.xaml.cs에는 다음과 같은 코드를 추가합니다.
    void Button1Click(object sender, RoutedEventArgs arg)
    {
      button1.Content = "Hello";
    }
아직은 버튼을 두 번 클릭해서 이벤트 코드가 생성되거나 하는 기능은 지원하지 않습니다. WPF를 위한 VS 2005 확장팩은 개발중인 CTP 버전이므로, 이 부분은 정식버전이 나타나면 나아지리라 생각합니다. 이벤트 핸들러의 코드를 보면 윈폼에서 사용하면 EventArgs 대신 RoutedEventArgs 클래스를 사용하는 것을 알 수 있습니다.

C# 소스 코드를 보면 WPF를 사용하기 때문에 WPF가 정의된 네임스페이스들이 선언된 것을 볼 수 있습니다.
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.Shapes;
마찬가지로 클래스도 윈폼을 상속받는 대신 System.Windows.Window 클래스를 상속받습니다.

프로그램을 빌드하면 정상적인 윈도우가 나타나며, 버튼을 클릭하면 일반적인 윈폼 응용프로그램 처럼 동작하는 것을 알 수 있습니다.

WPF에서는 XAML를 사용해서 UI를 정의하고, 로직은 C# 코드에 작성합니다. 이는 ASP.NET의 코드 숨김(Code Behind) 기능과 같습니다. C# 코드를 XAML 안에 직접 정의하는 것도 가능합니다. XAML 안에 코드를 정의하려면 태그로 정의하고, CDATA 섹션안에 C# 코드를 작성합니다. 앞의 예제에서 C# 코드를 XAML에 정의하면 다음과 같습니다.
    
      
        
      
XAML 안에 직접 작성하면 코드 자동 완성 기능(인텔리센스)을 사용할 수 없습니다. XAML을 사용하는 이유는 UI와 코드의 분리이므로 XAML 안에 직접 코드를 작성하는 일은 거의 없겠지만 위와 같은 방법으로 작성하는 것은 가능합니다.

WPF에서는 두 가지 응용프로그램 프로젝트가 있습니다. 한 가지는 윈도우 응용프로그램이며, 다른 하나는 XAML 브라우저 응용프로그램입니다. 이는 XAML 기반으로 작성하지만 웹 브라우저에서 동작하는 차이점이 있습니다. 마이크로소프트는 현재 WPF/E를 개발하고 있으며, CTP 버전을 내놓고 있습니다. WPF/E는 XAML 기반으로 응용프로그램을 작성하면, 이를 윈도우, 웹 브라우저, 모바일, 임베디드 환경 등에서 사용할 수 있습니다. WPF/E의 E는 "Everywhere"를 의미합니다.

레이아웃 관리자

WPF의 레이아웃 관리자는 Grid, Canvas, StackPanel, DockPanel이 있습니다. Grid는 표와 같은 형식으로 화면을 분할하는 기능을 제공하고 있으며, Canvas는 캔버스로 정의한 영역 안에서의 절대 좌표를 정의하기 위해 사용합니다. Panel 클래스를 상속한 StackPanel, DockPanel은 WPF에서 가장 많이 사용하는 레이아웃 관리자입니다. StackPanel은 상자를 차곡차곡 쌓아놓듯이 쌓아두는 모델을 채택하고 있습니다. 따라서, StackPanel 내부에 컨트롤을 정의하는 순서대로 차곡차곡 쌓이는 레이아웃을 갖게 됩니다. DockPanel은 도킹(Docking) 형태로 레이아웃을 구성합니다. 자바의 AWT의 레이아웃 관리자를 생각하게 될 수도 있는데, 이들 패널은 조금 다릅니다. 두 패널은 상대위치를 정의하기 위해 사용합니다. DockPanel 같은 경우는 패널의 영역을 Width, Height으로 정의하지 않습니다. 대신에, 왼쪽 상단의 좌표와 오른쪽 하단의 좌표를 정의하는 형태로 되어 있습니다. 이런 방식의 정의를 사용하기 때문에 윈도우 창의 크기를 변경하는 경우에도 컨트롤들이 창 크기에 따라 유연하게 배치되는 것을 알 수 있습니다. 다음은 간단한 레이아웃 예제입니다.

    
      
        

          
            
            Username
            
          
          
        
        

          
            
            username
          
        
      
  

실행한 결과는 다음과 같습니다.

그림3
[그림3] StackPanel과 DockPanel을 이용한 배치

각 패널을 명확하게 하기 위해 태그를 사용해서 경계를 정의했습니다. 패널안에 다양한 컨트롤을 추가하고, 윈도우 창의 크기를 변경해보면 DockPanel의 크기가 그에 따라 배열되며, 컨트롤들의 위치도 제대로 유지되는 것을 볼 수 있습니다.

StackPanel, DockPanel 컨트롤이 상대위치에 따라 컨트롤을 배치하는데, 해당 영역에서 절대 좌표로 표현하는 것이 필요하다면 Canvas 컨트롤을 사용합니다. Canvas 컨트롤의 XAML 코드는 다음과 같습니다.

  
    
      
      
      
      
      
    
    
    
    
    

  

두 개의 Canvas 컨트롤을 배치하고, Label 컨트롤을 사용해서 각각 (0,0), (50, 100), (0,100), (100,100)의 좌표에 좌표값을 출력하게 설정하고 있습니다. 실행 결과는 다음과 같습니다.

그림4
[그림4] Canvas를 사용한 절대 좌표 배치

Canvas 컨트롤을 사용해서 절대좌표를 표현할 수 있는 것을 알 수 있습니다.

스크롤 사용하기

WPF에서 스크롤 기능은 ScrollViewer 클래스로 정의되어 있습니다. 다음은 스크롤 기능을 정의한 XAML 코드입니다.

    
    
      
        The ScrollViewer element encapsulates a content element and up to two ScrollBar controls.

        Physical scrolling is used to scroll content by a predetermined physical increment, 
        typically by a value that is declared in pixels. Logical scrolling is used to scroll 
        to the next item in the logical tree. If you require physical scrolling instead of 
        logical scrolling, wrap the host Panel element in a ScrollViewer and set its 
        CanContentScroll property to false. Physical scrolling is the default scroll 
        behavior for most Panel elements.

        Because the scroll bars for a ScrollViewer element are defined in the default 
        style of the element, scroll bars will no longer appear if you apply a custom 
        style to a ScrollViewer. Scroll bars must be defined in the custom style for 
        them to appear. For an example of how to implement scroll bars in a custom style, 
        see Style the ScrollViewer Element.

       
    
  

WPF에서 화면에 표시하는 텍스트는
TAG :
댓글 입력
자료실