WPF 소개

Windows Presentation Foundation (WPF)는 시각적으로 뛰어난 사용자 환경에서 Windows 클라이언트 응용 프로그램을 만들 수 있는 차세대 프레젠테이션 시스템입니다. WPF를 사용하면 광범위한 독립 실행형 응용 프로그램과 브라우저에서 호스팅되는 응용 프로그램을 모두 만들 수 있습니다. 예를 들어 다음 그림에 표시된 Contoso Healthcare 샘플 응용 프로그램을 만들 수 있습니다.

WPF의 핵심 기능은 최신 그래픽 하드웨어를 활용하도록 만들어진 해상도 독립적인 벡터 기반 렌더링 엔진입니다. WPF에서는 Extensible Application Markup Language (XAML), 컨트롤, 데이터 바인딩, 레이아웃, 2-D 및 3-D 그래픽, 애니메이션, 스타일, 템플릿, 문서, 미디어, 텍스트, 입력 체계 등의 광범위한 응용 프로그램 개발 기능으로 이 핵심 기능을 확장합니다. WPF는 Microsoft .NET Framework에 포함되므로 .NET Framework 클래스 라이브러리의 다른 요소가 통합된 응용 프로그램을 만들 수 있습니다.

이 개요 문서는 초보자를 위한 안내서로 WPF의 주요 기능 및 개념에 대해 다룹니다. 이 문서에서는 WPF에 대해 깊이 있게 알아보려는 숙련된 WPF 개발자에게도 유용한 정보를 제공합니다.

참고
.NET Framework 4에서 새로 추가되었거나 업데이트된 WPF 기능은 WPF 버전 4의 새로운 기능을 참조하십시오.

이 항목에는 다음 단원이 포함되어 있습니다.

• WPF를 사용한 프로그래밍
• 태그 및 코드 숨김
• 응용 프로그램
• 컨트롤
• 입력 및 명령
• 레이아웃
• 데이터 바인딩
• 그래픽
• 애니메이션
• 미디어
• 텍스트 및 입력 체계
• 문서
• WPF 응용 프로그램 사용자 지정
• WPF를 사용하는 최선의 방법
• 요약
• 권장 개요 및 샘플
• 관련 항목

WPF를 사용한 프로그래밍

WPF는 대부분 System.Windows 네임스페이스에 있는 .NET Framework 형식의 하위 집합으로 존재합니다. 이전에 ASP.NET, Windows Forms 등의 관리되는 기술을 사용하여 .NET Framework으로 응용 프로그램을 작성해 본 경험이 있는 개발자에게는 기본 WPF 프로그래밍 환경이 매우 친숙할 것입니다. 즉, 클래스를 인스턴스화하고, 속성을 설정하고, 메서드를 호출하고, 이벤트를 처리하는 등의 모든 작업을 C#, Visual Basic 등의 익숙한 .NET Framework 프로그래밍 언어로 수행할 수 있습니다.

보다 강력한 몇 가지 WPF 기능을 지원하고 프로그래밍 환경을 단순화하기 위해 WPF에는 속성과 이벤트를 향상시키는 추가 프로그래밍 구성 요소인 종속성 속성과 라우트된 이벤트가 포함되어 있습니다. 종속성 속성에 대한 자세한 내용은 종속성 속성 개요를 참조하십시오. 라우트된 이벤트에 대한 자세한 내용은 라우트된 이벤트 개요를 참조하십시오.

태그 및 코드 숨김

WPF에서는 Windows 클라이언트 응용 프로그램 개발을 위해 또 다른 프로그래밍 향상 기능을 제공합니다. 눈에 띄게 향상된 기능 중 하나는 바로 ASP.NET 개발자에게 친숙한 태그 및 코드 숨김을 이용하여 응용 프로그램을 개발하는 기능입니다. 일반적으로 Extensible Application Markup Language (XAML) 태그는 응용 프로그램의 모양을 구현하는 데 사용되고, 관리되는 프로그래밍 언어(코드 숨김)는 응용 프로그램의 동작을 구현하는 데 사용됩니다. 이와 같이 모양과 동작을 분리하면 다음과 같은 장점을 얻을 수 있습니다.

• 모양 관련 태그와 동작 관련 코드가 밀접하게 연결되지 않으므로 개발 및 유지 관리 비용이 줄어듭니다.

• 응용 프로그램의 동작을 구현하는 개발자와 응용 프로그램의 모양을 구현하는 디자이너가 동시에 작업할 수 있으므로 개발 프로세스의 효율성이 개선됩니다.

• 다양한 디자인 도구를 사용하여 XAML 태그를 구현 및 공유할 수 있으며 응용 프로그램 개발 참가자의 요구 사항을 만족시킬 수 있습니다. Microsoft Expression Blend는 디자이너에게 적합한 환경을 제공하고 Visual Studio 2005는 개발자에게 유용합니다.

• WPF 응용 프로그램의 전역화 및 지역화가 눈에 띄게 단순해졌습니다(WPF 전역화 및 지역화 개요 참조).

아래에서는 WPF 태그 및 코드 숨김에 대해 간단히 소개합니다. 이 프로그래밍 모델에 대한 자세한 내용은 XAML 개요(WPF) 및 WPF의 코드 숨김 및 XAML를 참조하십시오.

태그

XAML은 선언적으로 응용 프로그램의 모양을 구현하는 데 사용되는 XML 기반 태그 언어입니다. 이 언어는 일반적으로 창, 대화 상자, 페이지 및 사용자 정의 컨트롤을 만들고, 이러한 항목을 컨트롤, 도형 및 그래픽으로 채우는 데 사용됩니다.

다음 예제에서는 XAML을 사용하여 단추 한 개가 있는 창의 모양을 구현합니다.

<Window
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    Title="Window with Button"
    Width="250" Height="100">

  <!-- Add button to window -->
  <Button Name="button">Click Me!</Button>

</Window>

좀 더 자세히 설명하면 이 XAML은 Window 및 Button 요소를 사용하여 창과 단추를 각각 하나씩 정의합니다. 각 요소는 특성을 사용하여 구성됩니다. 예를 들어 Window 요소의 Title 특성을 사용하여 창의 제목 표시줄 텍스트를 지정하면 런타임에 WPF가 태그에 정의된 요소와 특성을 WPF 클래스의 인스턴스로 변환합니다. 예를 들어 Window 요소는 Title 속성이 Title 특성의 값인 Window 클래스의 인스턴스로 변환됩니다.

다음 그림에서는 앞 예제에서 XAML로 정의한 user interface (UI)를 보여 줍니다.

자세한 내용은 XAML 개요(WPF)를 참조하십시오.

XAML은 XML을 기반으로 하기 때문에 이를 사용하여 작성한 UI는 요소 트리라는 중첩된 요소 계층으로 어셈블됩니다. 이 요소 트리를 사용하면 논리적이고 직관적인 방법으로 UIs를 만들고 관리할 수 있습니다. 자세한 내용은 WPF의 트리를 참조하십시오.

코드 숨김

응용 프로그램의 기본 동작은 메뉴, 도구 모음 또는 단추 클릭과 같은 이벤트를 처리하고 이에 따라 비즈니스 논리 및 데이터 액세스 논리를 호출하는 등 사용자 상호 작용에 응답하는 기능을 구현하는 것입니다. 일반적으로 WPF에서는 이 동작을 태그와 연결된 코드에서 구현합니다. 이러한 종류의 코드를 코드 숨김이라고 합니다. 다음 예제에서는 앞 예제의 코드 숨김 및 업데이트된 태그를 보여 줍니다.

<Window
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.AWindow"
    Title="Window with Button"
    Width="250" Height="100">

  <!-- Add button to window -->
  <Button Name="button" Click="button_Click">Click Me!</Button>

</Window>

Namespace SDKSample

    Partial Public Class AWindow
        Inherits System.Windows.Window

        Public Sub New()

            ' InitializeComponent call is required to merge the UI
            ' that is defined in markup with this class, including 
            ' setting properties and registering event handlers
            InitializeComponent()

        End Sub

        Private Sub button_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)

            ' Show message box when button is clicked
            MessageBox.Show("Hello, Windows Presentation Foundation!")

        End Sub

    End Class

End Namespace

using System.Windows; // Window, RoutedEventArgs, MessageBox

namespace SDKSample
{
    public partial class AWindow : Window
    {
        public AWindow()
        {
            // InitializeComponent call is required to merge the UI
            // that is defined in markup with this class, including 
            // setting properties and registering event handlers
            InitializeComponent();
        }

        void button_Click(object sender, RoutedEventArgs e)
        {
            // Show message box when button is clicked
            MessageBox.Show("Hello, Windows Presentation Foundation!");
        }
    }
}

이 예제에서는 코드 숨김이 Window 클래스에서 파생된 클래스를 구현합니다. x:Class 특성은 태그를 코드 숨김 클래스와 연결하는 데 사용됩니다. InitializeComponent는 코드 숨김 클래스의 생성자에서 호출되어 태그에 정의된 UI를 코드 숨김 클래스와 병합합니다. InitializeComponent는 응용 프로그램을 만들 때 자동으로 생성되므로 직접 구현할 필요가 없습니다. x:Class와 InitializeComponent를 함께 사용하면 구현을 만들 때마다 구현이 올바르게 초기화됩니다. 코드 숨김 클래스는 단추의 Click 이벤트에 대한 이벤트 처리기도 구현합니다. 단추를 클릭하면 이벤트 처리기가 MessageBox.Show 메서드를 호출하여 메시지 상자를 표시합니다.

다음 그림에서는 단추를 클릭한 결과를 보여 줍니다.

자세한 내용은 WPF의 코드 숨김 및 XAML을 참조하십시오.

응용 프로그램

.NET Framework, System.Windows, 태그 및 코드 숨김은 WPF 응용 프로그램 개발 환경의 기반입니다. 또한 WPF에는 풍부한 콘텐츠로 사용자 환경을 만들 수 있는 광범위한 기능이 있습니다. 이러한 콘텐츠를 패키지하여 사용자에게 "응용 프로그램"으로 전달할 수 있도록 WPF에서는 응용 프로그램 모델이라고 통칭하는 형식 및 서비스를 제공합니다. 응용 프로그램 모델은 독립 실행형 응용 프로그램과 브라우저에서 호스팅되는 응용 프로그램의 개발을 모두 지원합니다.

독립 실행형 응용 프로그램

독립 실행형 응용 프로그램을 만드는 경우 Window 클래스를 사용하여 메뉴 모음 및 도구 모음에서 액세스하는 창과 대화 상자를 만들 수 있습니다. 다음 그림에서는 주 창과 대화 상자가 각각 하나씩 있는 독립 실행형 응용 프로그램을 보여 줍니다.

이 외에도 MessageBox, OpenFileDialog, SaveFileDialog 및 PrintDialog와 같은 WPF 대화 상자를 사용할 수 있습니다.

자세한 내용은 WPF 창 개요를 참조하십시오.

브라우저에서 호스팅되는 응용 프로그램

XAML browser applications (XBAPs)라고 하는 브라우저에서 호스팅되는 응용 프로그램을 만드는 경우 하이퍼링크(Hyperlink 클래스)를 사용하여 서로 간에 탐색할 수 있는 페이지(Page) 및 페이지 함수(PageFunction<T>)를 만들 수 있습니다. 다음 그림에서는 Internet Explorer 7에서 호스팅되는 XBAP의 페이지를 보여 줍니다.

WPF 응용 프로그램은 Microsoft Internet Explorer 6 및 Internet Explorer 7 모두에서 호스팅할 수 있습니다. WPF에서는 이외 다른 탐색 호스팅을 위해 다음과 같은 두 가지 옵션을 제공합니다.

• Frame(페이지 또는 창에서 탐색 가능한 콘텐츠 아일랜드를 호스팅하려는 경우)

• NavigationWindow(전체 창에서 탐색 가능한 콘텐츠를 호스팅하려는 경우)

자세한 내용은 탐색 개요를 참조하십시오.

응용 프로그램 클래스

XBAPs 및 독립 실행형 응용 프로그램은 대개 공유 리소스, 공유 속성, 시작 및 수명 관리와 같은 응용 프로그램 범위의 추가 서비스를 필요로 하는 복잡한 응용 프로그램입니다. Application 클래스는 이러한 서비스 및 다른 서비스를 캡슐화합니다. 이 클래스는 다음 예제에서와 같이 XAML만 사용하여 구현할 수 있습니다.

<Application
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    StartupUri="MainWindow.xaml" />

이 태그는 독립 실행형 응용 프로그램에 대한 응용 프로그램 정의이며, 응용 프로그램을 시작할 때 자동으로 MainWindow를 여는 Application 개체를 만들도록 WPF에 지시합니다.

Application의 주요 개념은 독립 실행형 응용 프로그램과 브라우저에서 호스팅되는 응용 프로그램을 모두 지원하는 공통 플랫폼을 제공하는 것입니다. 예를 들어 앞의 XAML은 다음 예제에 표시된 것과 같이 XBAP를 시작할 때 브라우저에서 호스팅되는 응용 프로그램이 자동으로 특정 페이지로 이동하는 데 사용할 수 있습니다.

<Application
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    StartupUri="HomePage.xaml" />

자세한 내용은 응용 프로그램 관리 개요를 참조하십시오.

보안

XBAPs는 브라우저에서 호스팅되므로 보안이 매우 중요합니다. 특히 XBAPs는 HTML 기반 응용 프로그램에 적용된 것보다 낮거나 같은 제한을 적용하기 위해 부분 신뢰 보안 샌드박스를 사용합니다. 또한 XBAPs에서 부분 신뢰로 실행하기에 안전한 각 HTML 기능은 광범위한 보안 프로세스를 통해 테스트되었습니다. 자세한 내용은 WPF 보안 전략 - 보안 엔지니어링을 참조하십시오.

WPF 부분 신뢰 보안에 설명된 것과 같이 대부분의 WPF 기능도 XBAPs에서 안전하게 실행할 수 있습니다.

컨트롤

응용 프로그램 모델이 제공하는 사용자 환경은 생성된 컨트롤입니다. WPF에서 "컨트롤"이란 창이나 페이지에서 호스팅되고 user interface (UI)가 있으며 몇몇 동작을 구현하는 WPF 클래스의 범주를 포괄적으로 지칭하는 용어입니다.

자세한 내용은 컨트롤를 참조하십시오.

기능별 WPF 컨트롤

기본 제공되는 WPF 컨트롤은 다음과 같습니다.

• 단추: Button 및 RepeatButton

• 데이터 표시: DataGrid, ListView 및 TreeView

• 날짜 표시 및 선택: Calendar 및 DatePicker

• 대화 상자: OpenFileDialog, PrintDialog 및 SaveFileDialog

• 디지털 잉크: InkCanvas 및 InkPresenter

• 문서: DocumentViewer, FlowDocumentPageViewer, FlowDocumentReader, FlowDocumentScrollViewer 및 StickyNoteControl

• 입력: TextBox, RichTextBox 및 PasswordBox

• 레이아웃: Border, BulletDecorator, Canvas, DockPanel, Expander, Grid, GridView, GridSplitter, GroupBox, Panel, ResizeGrip, Separator, ScrollBar, ScrollViewer, StackPanel, Thumb, Viewbox, VirtualizingStackPanel, Window 및 WrapPanel

• 미디어: Image, MediaElement 및 SoundPlayerAction

• 메뉴: ContextMenu, Menu 및 ToolBar

• 탐색: Frame, Hyperlink, Page, NavigationWindow 및 TabControl

• 선택: CheckBox, ComboBox, ListBox, RadioButton 및 Slider

• 사용자 정보: AccessText, Label, Popup, ProgressBar, StatusBar, TextBlock 및 ToolTip

입력 및 명령

컨트롤은 대개 사용자 입력을 감지하여 이에 응답합니다. WPF 입력 시스템에서는 직접 이벤트와 라우트된 이벤트를 모두 사용하여 텍스트 입력, 포커스 관리 및 마우스 위치 지정을 지원합니다. 자세한 내용은 입력 개요를 참조하십시오.

응용 프로그램에는 종종 복잡한 입력 요구 사항이 있습니다. WPF에서는 사용자 입력 작업과 이러한 작업에 응답하는 코드를 구별하는 명령 시스템을 제공합니다. 자세한 내용은 명령 개요를 참조하십시오.

레이아웃

UI를 만들 때 위치와 크기별로 컨트롤을 배열하여 레이아웃을 구성합니다. 모든 레이아웃은 창 크기와 디스플레이 설정이 변경되면 이에 따라 변경되어야 합니다. WPF에서는 확장 가능한 뛰어난 레이아웃 시스템을 제공하므로 이러한 경우 레이아웃을 변경하기 위해 코드를 작성할 필요가 없습니다.

이 레이아웃 시스템은 상대적 위치 지정을 기반으로 창 및 디스플레이 상태의 변경에 보다 빠르게 응답할 수 있습니다. 또한 이 레이아웃 시스템은 컨트롤 간 협상을 관리하여 레이아웃을 결정합니다. 협상은 컨트롤이 자신에게 필요한 위치와 크기를 부모 컨트롤에 알리는 것과 부모 컨트롤이 해당 컨트롤에 사용 가능한 공간을 컨트롤에 알리는 두 단계의 프로세스로 이루어집니다.

레이아웃 시스템은 기본 WPF 클래스를 통해 자식 컨트롤에 노출됩니다. WPF에는 표, 스택 및 도킹과 같은 일반적인 레이아웃에 사용되는 다음과 같은 몇 가지 레이아웃 컨트롤이 포함되어 있습니다.

• Canvas: 자식 컨트롤이 고유의 레이아웃을 제공합니다.

• DockPanel: 자식 컨트롤이 패널 가장자리에 맞춰 배열됩니다.

• Grid: 자식 컨트롤이 행과 열을 기준으로 배치됩니다.

• StackPanel: 자식 컨트롤이 가로 또는 세로로 스택 방식으로 배치됩니다.

• VirtualizingStackPanel: 자식 컨트롤이 가상화되어 가로 또는 세로 방향으로 한 줄로 배열됩니다.

• WrapPanel: 자식 컨트롤이 왼쪽에서 오른쪽으로 배치되며 컨트롤의 수가 현재 줄에 배치할 수 있는 것보다 많으면 컨트롤이 다음 줄로 넘어갑니다.

다음 예제에서는 DockPanel을 사용하여 여러 개의 TextBox 컨트롤을 배치합니다.

<Window
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.LayoutWindow"
    Title="Layout with the DockPanel" Height="143" Width="319">

  <!--DockPanel to layout four text boxes--> 
  <DockPanel>
    <TextBox DockPanel.Dock="Top">Dock = "Top"</TextBox>
    <TextBox DockPanel.Dock="Bottom">Dock = "Bottom"</TextBox>
    <TextBox DockPanel.Dock="Left">Dock = "Left"</TextBox>
    <TextBox Background="White">This TextBox "fills" the remaining space.</TextBox>
  </DockPanel>

</Window>

DockPanel을 사용하면 자식 TextBox 컨트롤에 컨트롤의 배열 방법을 지정할 수 있습니다. 이를 위해 DockPanel은 각 자식 컨트롤에서 도킹 스타일을 지정할 수 있도록 자식 컨트롤에 노출되는 Dock 속성을 구현합니다.

참고
자식 컨트롤이 사용할 수 있도록 부모 컨트롤이 구현한 속성이 바로 연결된 속성이라고 하는 WPF 구성 요소입니다(연결된 속성 개요 참조).

다음 그림에서는 앞의 예제에 나오는 XAML 태그의 결과를 보여 줍니다.

자세한 내용은 레이아웃 시스템을 참조하십시오. 기본 샘플을 보려면 WPF Layout Gallery 샘플을 참조하십시오.

데이터 바인딩

대부분의 응용 프로그램은 사용자가 데이터를 보고 편집할 수 있는 방법을 제공하도록 만들어집니다. WPF 응용 프로그램의 경우 데이터 저장 및 액세스 방법이 Microsoft SQL Server 및 ADO.NET 같은 기술을 통해 이미 제공되어 있습니다. 데이터에 액세스한 다음 이를 응용 프로그램의 관리되는 개체로 로드한 후부터 WPF 응용 프로그램의 복잡한 작업이 시작됩니다. 기본적으로 여기에는 두 가지 작업이 포함됩니다.

1. 관리되는 개체에서 데이터를 표시 및 편집할 수 있는 컨트롤로 데이터 복사

2. 컨트롤을 사용하여 변경된 내용을 다시 관리되는 개체로 복사

응용 프로그램 개발을 단순화하기 위해 WPF에서는 이러한 단계를 자동으로 수행하는 데이터 바인딩 엔진을 제공합니다. 이 데이터 바인딩 엔진의 핵심 요소는 컨트롤(바인딩 대상)을 데이터 개체(바인딩 소스)에 바인딩하는 Binding 클래스입니다. 다음 다이어그램에서는 이 관계를 보여 줍니다.

다음 예제에서는 TextBox를 사용자 지정 Person 개체의 인스턴스에 바인딩하는 방법을 보여 줍니다. 다음 코드에서는 Person 구현을 보여 줍니다.

Namespace SDKSample

    Class Person

        Private _name As String = "No Name"

        Public Property Name() As String
            Get
                Return _name
            End Get
            Set(ByVal value As String)
                _name = value
            End Set
        End Property

    End Class

End Namespace

namespace SDKSample
{
    class Person
    {
        string name = "No Name";

        public string Name
        {
            get { return name; }
            set { name = value; }
        }
    }
}

다음 태그는 TextBox를 사용자 지정 Person 개체의 인스턴스에 바인딩합니다.

<Window
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.DataBindingWindow">


...


<!-- Bind the TextBox to the data source (TextBox.Text to Person.Name) -->
<TextBox Name="personNameTextBox" Text="{Binding Path=Name}" />


...


</Window>

Imports System.Windows ' Window

Namespace SDKSample

    Partial Public Class DataBindingWindow
        Inherits Window

        Public Sub New()
            InitializeComponent()

            ' Create Person data source
            Dim person As Person = New Person()

            ' Make data source available for binding
            Me.DataContext = person

        End Sub

    End Class

End Namespace

using System.Windows; // Window

namespace SDKSample
{
    public partial class DataBindingWindow : Window
    {
        public DataBindingWindow()
        {
            InitializeComponent();

            // Create Person data source
            Person person = new Person();

            // Make data source available for binding
            this.DataContext = person;
        }
    }
}

이 예제에서는 코드 숨김에서 Person 클래스가 인스턴스화되어 DataBindingWindow의 데이터 컨텍스트로 설정됩니다. 태그에서 TextBox의 Text 속성은 "{Binding ... }" XAML 구문을 사용하여 Person.Name 속성에 바인딩됩니다. 이 XAML은 TextBox 컨트롤을 창의 DataContext 속성에 저장된 Person 개체에 바인딩하도록 WPF에 알려 줍니다.

WPF 데이터 바인딩 엔진은 유효성 검사, 정렬, 필터링 및 그룹화 등의 추가 기능을 지원합니다. 또한 데이터 바인딩은 표준 WPF 컨트롤로 표시되는 UI가 적절하지 않은 경우 바인딩된 데이터에 대한 사용자 지정 UI를 만들 수 있도록 데이터 템플릿 사용을 지원합니다.

자세한 내용은 데이터 바인딩 개요를 참조하십시오. 기본 샘플을 보려면 Data Binding 데모를 참조하십시오.

그래픽

WPF에는 다음과 같은 장점을 제공하는 확장 가능하며 융통성이 뛰어난 광범위한 일련의 그래픽이 포함되어 있습니다.

• 해상도 및 장치 독립적인 그래픽. WPF 그래픽 시스템의 기본 측정 단위는 실제 화면 해상도에 관계없이 항상 1/96인치에 해당하는 장치 독립적 픽셀이며 이는 해상도 및 장치 독립적 렌더링을 위한 기반을 제공합니다. 각각의 장치 독립적 픽셀은 렌더링되는 시스템의 dpi 설정에 맞게 자동으로 크기가 조정됩니다.

• 향상된 정밀도. WPF 좌표계는 단정밀도가 아닌 배정밀도의 부동 소수점으로 측정됩니다. 변환 및 불투명도 값도 배정밀도를 사용하여 표현됩니다. WPF에서는 광범위한 색 영역(scRGB)을 지원하며 다른 색 공간으로부터의 입력을 관리하기 위한 통합 지원을 제공합니다.

• 고급 그래픽 및 애니메이션 지원. WPF에서는 애니메이션 장면을 자동으로 관리함으로써 그래픽 프로그래밍이 간편해지므로 장면 처리, 렌더링 루프 및 이중 선형 보간에 대해 걱정할 필요가 없습니다. 이 외에도 WPF에서는 적중 테스트를 지원하고 알파 합성을 완전하게 지원합니다.

• 하드웨어 가속. WPF 그래픽 시스템은 그래픽 하드웨어를 사용함으로써 CPU 사용률을 최소화합니다.

2차원 도형

WPF에서는 다음 그림에 나오는 사각형 및 타원처럼 일반적인 벡터 기반의 2-D 도형 라이브러리를 제공합니다.

흥미로운 점은 도형이 단순히 전시용으로만 사용되는 것이 아니라 키보드 및 마우스 입력을 비롯하여 컨트롤에서 얻을 수 있는 기능 중 대부분을 구현한다는 것입니다. 다음 예제에서는 처리 중인 Ellipse의 MouseUp 이벤트를 보여 줍니다.

<Window 
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.EllipseEventHandlingWindow"
    Title="Click the Ellipse">
    <Ellipse Name="clickableEllipse" Fill="Blue" MouseUp="clickableEllipse_MouseUp" />
</Window>

Imports System.Windows ' Window, MessageBox
Imports System.Windows.Input ' MouseButtonEventArgs

Namespace SDKSample

    Public Class EllipseEventHandlingWindow
        Inherits Window

        Public Sub New()
            InitializeComponent()
        End Sub

        Private Sub clickableEllipse_MouseUp(ByVal sender As Object, ByVal e As MouseButtonEventArgs)
            MessageBox.Show("You clicked the ellipse!")
        End Sub

    End Class

End Namespace

using System.Windows; // Window, MessageBox
using System.Windows.Input; // MouseButtonEventHandler

namespace SDKSample
{
    public partial class EllipseEventHandlingWindow : Window
    {
        public EllipseEventHandlingWindow()
        {
            InitializeComponent();
        }

        void clickableEllipse_MouseUp(object sender, MouseButtonEventArgs e)
        {
            // Display a message
            MessageBox.Show("You clicked the ellipse!");
        }
    }
}

다음 그림에서는 앞의 코드로 생성되는 결과를 보여 줍니다.

자세한 내용은 WPF에서 Shape 및 기본 그리기 개요를 참조하십시오. 기본 샘플을 보려면 Shape Elements 샘플을 참조하십시오.

2차원 기하 도형

WPF에서 제공하는 2-D 도형에는 기본적인 표준 도형 집합이 포함됩니다. 그러나 사용자 지정 UI를 디자인하려는 경우에는 사용자 지정 도형을 만들어야 합니다. 이를 위해 WPF에서는 기하 도형을 제공합니다. 다음 그림에서는 기하 도형을 사용하여 직접 그리거나, 브러시로 사용하거나, 다른 도형 및 컨트롤을 잘라내는 데 사용할 수 있는 사용자 지정 도형을 만드는 것을 보여 줍니다.

Path 개체를 사용하면 닫힌 도형이나 열린 도형, 여러 개의 도형은 물론 곡선 도형까지 그릴 수 있습니다.

Geometry 개체를 사용하면 2차원 그래픽 데이터를 잘라내거나 렌더링할 수 있으며 데이터에 대해 적중 테스트를 수행할 수 있습니다.

자세한 내용은 Geometry 개요를 참조하십시오. 기본 샘플을 보려면 Geometries 샘플을 참조하십시오.

2차원 효과

WPF 2-D 기능의 하위 집합에는 그라데이션, 비트맵, 그리기, 비디오로 그리기, 회전, 크기 조정, 기울이기 등의 시각적 효과가 포함됩니다. 이러한 시각적 효과는 모두 브러시를 사용하여 만들어낼 수 있습니다. 다음 그림에서는 몇 가지 예를 보여 줍니다.

자세한 내용은 WPF 브러시 개요를 참조하십시오. 기본 샘플을 보려면 Brushes 샘플을 참조하십시오.

3차원 렌더링

WPF에는 2-D 그래픽과 통합되어 보다 멋지고 세련된 UIs를 만들 수 있도록 하는 3-D 렌더링 기능도 포함되어 있습니다. 예를 들어 다음 그림에서는 3-D 도형에 렌더링된 2-D 이미지를 보여 줍니다.

자세한 내용은 3차원 그래픽 개요를 참조하십시오. 기본 샘플을 보려면 3-D Solids 샘플을 참조하십시오.

애니메이션

WPF의 애니메이션 지원 기능을 사용하면 컨트롤을 늘리거나 흔들거나 회전하거나 점점 흐리게 만들어 보다 효과적인 페이지 전달 효과를 줄 수 있습니다. 대부분의 WPF 클래스뿐 아니라 사용자 지정 클래스에도 애니메이션 효과를 적용할 수 있습니다. 다음 그림에서는 실행 중인 간단한 애니메이션을 보여 줍니다.

자세한 내용은 애니메이션 개요를 참조하십시오. 기본 샘플을 보려면 Animation Example Gallery를 참조하십시오.

미디어

풍부한 콘텐츠를 전달하는 한 가지 방법은 시청각 미디어를 사용하는 것입니다. WPF에서는 이미지, 비디오 및 오디오에 대한 특별한 지원을 제공합니다.

이미지

이미지는 대부분의 응용 프로그램에 일반적이며, WPF에서는 몇 가지 방법으로 이미지를 사용할 수 있습니다. 다음 그림에서는 축소판 그림 이미지가 포함된 목록 상자가 있는 UI를 보여 줍니다. 축소판 그림을 선택하면 이미지가 전체 크기로 표시됩니다.

자세한 내용은 이미징 개요를 참조하십시오.

비디오 및 오디오

MediaElement 컨트롤은 비디오와 오디오를 모두 재생할 수 있으며 융통성이 뛰어나 사용자 지정 미디어 플레이어의 기반으로 사용하기에 적합합니다. 다음 XAML 태그는 미디어 플레이어를 구현합니다.

<MediaElement 
  Name="myMediaElement" 
  Source="media/wpf.wmv" 
  LoadedBehavior="Manual" 
  Width="350" Height="250" />

다음 그림의 창은 실행 중인 MediaElement 컨트롤을 보여 줍니다.

자세한 내용은 그래픽 및 멀티미디어를 참조하십시오.

텍스트 및 입력 체계

높은 품질의 텍스트 렌더링을 위해 WPF에서는 다음과 같은 기능을 제공합니다.

• OpenType 글꼴 지원

• ClearType 향상 기능

• 하드웨어 가속을 이용한 고성능

• 텍스트와 미디어, 그래픽 및 애니메이션의 통합

• 국가별 글꼴 지원 및 글꼴 대체 메커니즘

다음 그림에서는 텍스트 장식이 적용된 예를 통해 텍스트와 그래픽이 통합된 모습을 보여 줍니다.

자세한 내용은 WPF의 입력 체계를 참조하십시오.

문서

WPF에서는 기본적으로 유동 문서, 고정 문서 및 XML Paper Specification (XPS) 문서라는 세 가지 종류의 문서를 사용할 수 있습니다. 또한 WPF에서는 문서를 만들고, 보고, 관리하고, 주석을 지정하고, 패키지하고, 인쇄할 수 있는 서비스도 제공합니다.

유동 문서

유동 문서는 창 크기와 디스플레이 설정이 변경되면 이에 따라 콘텐츠를 동적으로 조정하고 흐름을 바꿔 문서를 최적으로 표시하고 쉽게 이해할 수 있도록 디자인되었습니다. 다음 XAML 태그는 FlowDocument의 정의를 보여 줍니다.

<FlowDocument xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation">

  <Paragraph FontSize="18" FontWeight="Bold">Flow Document</Paragraph>

  <Paragraph>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
    enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
    nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure.
  </Paragraph>


...


</FlowDocument>

다음 예제에서는 FlowDocumentReader에 유동 문서를 로드하여 문서를 보고 검색하고 인쇄하는 방법을 보여 줍니다.

<Window
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.FlowDocumentReaderWindow"
    Title="Flow Document Reader">
  <FlowDocumentReader Name="flowDocumentReader" />
</Window>

Imports System.Windows 'Window
Imports System.Windows.Documents 'FlowDocument
Imports System.IO 'FileStream, FileMode
Imports System.Windows.Markup 'XamlReader

Namespace SDKSample

    Public Class FlowDocumentReaderWindow
        Inherits Window

        Public Sub New()
            Me.InitializeComponent()
            Using stream1 As FileStream = New FileStream("AFlowDocument.xaml", _
                FileMode.Open, FileAccess.Read)
                Dim document1 As FlowDocument = _
                    TryCast(XamlReader.Load(stream1), FlowDocument)
                Me.flowDocumentReader.Document = document1
            End Using
        End Sub

    End Class

End Namespace

using System.Windows; // Window
using System.Windows.Documents; // FlowDocument
using System.IO; // FileStream, FileMode
using System.Windows.Markup; // XamlReader

namespace SDKSample
{
    public partial class FlowDocumentReaderWindow : System.Windows.Window
    {
        public FlowDocumentReaderWindow()
        {
            InitializeComponent();

            // Open the file that contains the FlowDocument
            using (FileStream xamlFile = new FileStream("AFlowDocument.xaml", 
                FileMode.Open, FileAccess.Read))
            {
                // Parse the file with the XamlReader.Load method
                FlowDocument content = XamlReader.Load(xamlFile) as FlowDocument;

                // Set the Document property to the parsed FlowDocument object
                this.flowDocumentReader.Document = content;
            }
        }
    }
}

다음 예제에서는 앞 예제를 실행한 결과를 보여 줍니다.

자세한 내용은 유동 문서 개요를 참조하십시오.

고정 문서

고정된 문서는 특히 인쇄와 관련하여 정확한 WYSIWYG("What You See Is What You Get") 표현이 필요한 응용 프로그램에 적합합니다. 일반적으로 고정된 문서는 원래의 페이지 디자인을 반드시 유지해야 하는 DTP, 워드 프로세싱, 폼 레이아웃 등에 사용됩니다.

고정된 문서는 장치 독립적 방식으로 해당 콘텐츠의 배열 상태를 정확히 유지합니다. 예를 들어 96dpi 디스플레이로 표시되는 고정된 문서의 경우 600dpi의 레이저 프린터로 인쇄하거나 4800dpi의 식자공으로 인쇄해도 모양이 동일하게 나타납니다. 각 장치의 기능에 따라 문서의 품질은 달라지지만 어떤 경우든 레이아웃은 동일하게 유지됩니다.

자세한 내용은 WPF의 문서를 참조하십시오.

XPS 문서

XML Paper Specification (XPS) 문서는 WPF의 고정 문서를 기반으로 만들어집니다. XPS 문서는 기본적으로 전자 종이에 대한 페이지가 매겨진 표현인 XML 기반 스키마를 사용하여 정의됩니다. XPS는 페이지가 매겨진 문서의 작성, 공유, 인쇄 및 보관을 용이하게 하기 위해 디자인된 플랫폼 간 개방형 문서 형식입니다. XPS 기술의 중요한 기능에는 다음과 같은 것들이 있습니다.

• OPC(Open Packaging Conventions)를 따르는 ZipPackage 파일로 XPS 문서 패키지

• 독립 실행형 및 브라우저 기반 응용 프로그램 모두에서 호스팅

• WPF 응용 프로그램에서 수동으로 XPS 문서 생성 및 조작

• 출력 장치의 품질을 최대화하여 고품질 렌더링

• Windows Vista 인쇄 스풀링

• XPS 호환 프린터로 직접 문서 라우팅

• UI와 DocumentViewer의 통합

다음 그림에서는 DocumentViewer에서 표시되는 XPS 문서를 보여 줍니다.

DocumentViewer를 사용하면 사용자가 XPS 문서의 보기를 변경하고 문서를 검색 및 인쇄할 수 있습니다.

자세한 내용은 WPF의 문서를 참조하십시오.

주석

주석은 나중에 참조할 수 있도록 원하는 항목을 강조하거나 정보를 지정하기 위해 추가하는 메모나 설명입니다. 인쇄된 문서에 메모를 쓰는 것은 쉽지만 전자 문서에 메모를 "쓰는" 기능은 제한되거나 전혀 사용할 수 없는 경우가 많습니다. 그러나 WPF에서는 스티커 메모와 강조를 지원하는 주석 시스템을 제공합니다. 뿐만 아니라 다음 그림에서와 같이 DocumentViewer 컨트롤에서 호스팅되는 문서에 이러한 주석을 적용할 수도 있습니다.

자세한 내용은 주석 개요를 참조하십시오.

패키징

WPF System.IO.Packaging APIs를 통해 응용 프로그램에서는 문서, 콘텐츠 및 리소스를 이동이 가능하고 배포 및 액세스가 쉬운 단일 ZIP 문서로 구성할 수 있습니다. 디지털 서명을 포함하면 패키지에 포함된 항목을 인증하고 서명된 항목이 손상되거나 수정되지 않았는지 확인할 수 있습니다. 권한 관리를 통해 패키지를 암호화하여 보호된 정보에 대한 액세스를 제한할 수도 있습니다.

자세한 내용은 WPF의 문서를 참조하십시오.

인쇄

.NET Framework에는 WPF의 향상된 인쇄 시스템 제어를 위한 지원 기능으로 보완된 인쇄 하위 시스템이 포함되어 있습니다. 인쇄와 관련하여 향상된 기능은 다음과 같습니다.

• 원격 인쇄 서버 및 큐의 실시간 설치

• 프린터 기능 동적 검색

• 프린터 옵션 동적 설정

• 인쇄 작업 다시 라우팅 및 우선 순위 다시 지정

XPS 문서에서는 주요 성능도 향상되었습니다. 기존 Microsoft Windows Graphics Device Interface (GDI) 인쇄 경로의 경우 두 가지 변환이 수행되어야 합니다.

• 첫째는 문서를 Enhanced Metafile (EMF) 같은 인쇄 프로세서 형식으로 변환하는 것입니다.

• 둘째는 PCL(Printer Control Language)이나 PostScript와 같은 프린터 페이지 기술 언어로 변환하는 것입니다.

그러나 XPS 문서의 경우 XPS 파일 형식이라는 하나의 구성 요소가 프린터 프로세서 언어이자 페이지 기술 언어이므로 이러한 변환을 수행할 필요가 없습니다. 이러한 지원을 통해 스풀 파일의 크기와 네트워크 프린터의 로드가 동시에 줄어듭니다.

자세한 내용은 인쇄 개요를 참조하십시오.

WPF 응용 프로그램 사용자 지정

지금까지는 응용 프로그램 개발을 위한 WPF의 핵심 빌딩 블록에 대해 살펴보았습니다. 응용 프로그램 모델을 사용하면 주로 컨트롤로 구성되는 응용 프로그램 콘텐츠를 호스팅하고 전달할 수 있습니다. WPF 레이아웃 시스템을 사용하면 UI에서 컨트롤 배열을 단순화하고 창 크기와 디스플레이 설정의 변경에 관계없이 배열 상태를 유지할 수 있습니다. 대부분의 응용 프로그램에서는 사용자가 데이터와 상호 작용할 수 있으므로 UI를 데이터와 통합하는 데 필요한 작업을 데이터 바인딩을 통해 줄일 수 있습니다. 또한 WPF에서 제공하는 광범위한 그래픽, 애니메이션 및 미디어를 사용하여 응용 프로그램의 모양을 개선할 수 있습니다. 마지막으로, 텍스트 및 문서를 지원하는 응용 프로그램에서는 WPF 텍스트, 입력 체계, 문서, 주석, 패키징 및 인쇄 기능을 사용할 수 있습니다.

그런데 기본 개념만 안다고 해서 세련되고 눈에 잘 띄는 사용자 환경을 곧바로 만들고 관리할 수 있는 것은 아닙니다. 표준 WPF 컨트롤이 자신이 원하는 응용 프로그램 모양과 통합되지 않을 수도 있고, 데이터가 가장 효과적인 방식으로 표시되지 않을 수도 있습니다. 개발한 응용 프로그램의 전반적인 사용자 환경이 Windows 테마의 기본 모양과 어울리지 않을 수도 있습니다. 많은 경우에 한 가지 프레젠테이션 기술을 제대로 활용하려면 시각적 확장은 물론 다른 종류의 확장이 필요합니다.

WPF에서 컨트롤, 트리거, 컨트롤 템플릿과 데이터 템플릿, 스타일, UI 리소스, 테마 및 스킨에 사용할 수 있는 풍부한 콘텐츠 모델을 비롯하여 독창적인 사용자 환경을 만드는 데 사용할 수 있는 다양한 메커니즘을 제공하는 이유도 바로 여기에 있습니다.

콘텐츠 모델

WPF 컨트롤을 사용하는 주요 목적은 콘텐츠를 표시하는 데 있습니다. WPF에서 컨트롤의 콘텐츠를 구성할 수 있는 일련의 항목과 형식을 컨트롤의 콘텐츠 모델이라고 합니다. 일부 컨트롤은 단일 항목 및 콘텐츠 형식을 포함할 수 있습니다. 예를 들어 TextBox의 콘텐츠는 Text 속성에 할당된 문자열 값입니다. 다음 예제에서는 TextBox의 콘텐츠를 설정합니다.

<Window 
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.TextBoxContentWindow"
    Title="TextBox Content">


...


<TextBox Text="This is the content of a TextBox." />


...


</Window>

다음 그림에서는 앞의 예제를 실행한 결과를 보여 줍니다.

다른 일부 컨트롤은 다양한 콘텐츠 형식으로 된 여러 가지 항목을 포함할 수도 있습니다. 예를 들어 Content 속성으로 지정된 Button의 콘텐츠는 레이아웃 컨트롤, 텍스트, 이미지 및 도형을 비롯하여 다양한 항목을 포함할 수 있습니다. 다음 예제에서는 DockPanel, Label, Border 및 MediaElement가 포함된 콘텐츠가 있는 Button을 보여 줍니다.

<Window 
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.ButtonContentWindow"
    Title="Button Content">


...


<Button Margin="20">
  <!-- Button Content -->
  <DockPanel Width="200" Height="180">
    <Label DockPanel.Dock="Top" HorizontalAlignment="Center">Click Me!</Label>
    <Border Background="Black" BorderBrush="Yellow" BorderThickness="2" 
      CornerRadius="2" Margin="5">
      <MediaElement Source="media/wpf.wmv" Stretch="Fill" />
    </Border>
  </DockPanel>
</Button>


...


</Window>

다음 그림에서는 이 단추의 콘텐츠를 보여 줍니다.

다양한 컨트롤에서 지원하는 콘텐츠 유형에 대한 자세한 내용은 WPF 콘텐츠 모델을 참조하십시오.

트리거

XAML 태그는 주로 응용 프로그램의 모양을 구현하는 데 사용하지만 응용 프로그램 동작의 몇몇 측면을 구현하는 데 XAML을 사용할 수도 있습니다. 한 예로 트리거를 통해 사용자 상호 작용을 기반으로 응용 프로그램의 모양을 변경할 수 있습니다. 자세한 내용은 스타일 지정 및 템플릿의 "트리거"를 참조하십시오.

컨트롤 템플릿

WPF 컨트롤의 기본 UIs는 일반적으로 다른 컨트롤 및 도형을 기반으로 만들어집니다. 예를 들어 Button은 ButtonChrome 및 ContentPresenter라는 두 컨트롤로 만들어집니다. ButtonChrome은 표준 단추 모양을 제공하고 ContentPresenter는 Content 속성에 지정된 단추의 콘텐츠를 표시합니다.

컨트롤의 모양이 응용 프로그램의 전반적인 모양과 어울리지 않는 경우가 있습니다. 이 경우 ControlTemplate을 사용하면 컨트롤의 콘텐츠나 동작을 변경하지 않고 컨트롤 UI의 모양을 변경할 수 있습니다.

예를 들어 다음 예제에서는 ControlTemplate을 사용하여 Button의 모양을 변경하는 방법을 보여 줍니다.

<Window 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="SDKSample.ControlTemplateButtonWindow"
  Title="Button with Control Template" Height="158" Width="290">

  <!-- Button using an ellipse -->
  <Button Content="Click Me!" Click="button_Click">
    <Button.Template>
      <ControlTemplate TargetType="{x:Type Button}">
        <Grid Margin="5">
          <Ellipse Stroke="DarkBlue" StrokeThickness="2">
            <Ellipse.Fill>
              <RadialGradientBrush Center="0.3,0.2" RadiusX="0.5" RadiusY="0.5">
                <GradientStop Color="Azure" Offset="0.1" />
                <GradientStop Color="CornflowerBlue" Offset="1.1" />
              </RadialGradientBrush>
            </Ellipse.Fill>
          </Ellipse>
          <ContentPresenter Name="content" HorizontalAlignment="Center" 
            VerticalAlignment="Center"/>
        </Grid>
      </ControlTemplate>
    </Button.Template>

  </Button>

</Window>

Imports System.Windows ' Window, RoutedEventArgs, MessageBox

Namespace SDKSample

    Public Class ControlTemplateButtonWindow
        Inherits Window

        Public Sub New()

            InitializeComponent()

        End Sub

        Private Sub button_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
            MessageBox.Show("Hello, Windows Presentation Foundation!")
        End Sub

    End Class

End Namespace

using System.Windows; // Window, RoutedEventArgs, MessageBox

namespace SDKSample
{
    public partial class ControlTemplateButtonWindow : Window
    {
        public ControlTemplateButtonWindow()
        {
            InitializeComponent();
        }

        void button_Click(object sender, RoutedEventArgs e)
        {
            // Show message box when button is clicked
            MessageBox.Show("Hello, Windows Presentation Foundation!");
        }
    }
}

이 예제에서는 기본 단추 UI가 짙은 파란색 테두리가 있고 RadialGradientBrush를 사용하여 채워진 Ellipse로 바뀌었습니다. ContentPresenter 컨트롤은 Button의 콘텐츠인 "Click Me!"를 표시합니다. Button을 클릭하면 이전과 같이 Button 컨트롤 기본 동작의 일부로 Click 이벤트가 발생합니다. 다음 그림에서는 앞의 예제를 실행한 결과를 보여 줍니다.

자세한 내용은 ControlTemplate을 참조하십시오. 기본 샘플을 보려면 Styling with ControlTemplates 샘플을 참조하십시오.

데이터 템플릿

컨트롤 템플릿을 사용하면 컨트롤의 모양을 지정할 수 있는 반면 데이터 템플릿을 사용하면 컨트롤 콘텐츠의 모양을 지정할 수 있습니다. 데이터 템플릿은 주로 바인딩된 데이터의 모습을 보기 좋게 표시하기 위해 사용됩니다. 다음 그림에서는 Task 개체 컬렉션에 바인딩된 ListBox의 기본 모양을 보여 줍니다. 각 작업에는 이름, 설명 및 우선 순위가 있습니다.

기본 모양은 ListBox에서 제공하는 모양입니다. 그런데 각 작업의 기본 모양에는 작업 이름만 포함되어 있습니다. 작업 이름, 설명 및 우선 순위를 표시하려면 DataTemplate을 사용하여 ListBox 컨트롤에 바인딩된 목록 항목을 변경해야 합니다. 다음 XAML은 이러한 목적에 맞게 DataTemplate을 정의하며 이 템플릿은 ItemTemplate 특성을 사용하여 각 작업에 적용됩니다.

<Window
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="SDKSample.DataTemplateWindow"
  Title="With a Data Template">


...


<Window.Resources>
  <!-- Data Template (applied to each bound task item in the task collection) -->
  <DataTemplate x:Key="myTaskTemplate">
    <Border Name="border" BorderBrush="DarkSlateBlue" BorderThickness="2" 
      CornerRadius="2" Padding="5" Margin="5">
      <Grid>
        <Grid.RowDefinitions>
          <RowDefinition/>
          <RowDefinition/>
          <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="Auto" />
          <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Row="0" Grid.Column="0" Padding="0,0,5,0" Text="Task Name:"/>
        <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Path=TaskName}"/>
        <TextBlock Grid.Row="1" Grid.Column="0" Padding="0,0,5,0" Text="Description:"/>
        <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Path=Description}"/>
        <TextBlock Grid.Row="2" Grid.Column="0" Padding="0,0,5,0" Text="Priority:"/>
        <TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding Path=Priority}"/>
      </Grid>
    </Border>  
  </DataTemplate>
</Window.Resources>


...


<!-- UI -->
<DockPanel>
  <!-- Title -->
  <Label DockPanel.Dock="Top" FontSize="18" Margin="5" Content="My Task List:"/>

  <!-- Data template is specified by the ItemTemplate attribute -->
  <ListBox 
    ItemsSource="{Binding}" 
    ItemTemplate="{StaticResource myTaskTemplate}" 
    HorizontalContentAlignment="Stretch" 
    IsSynchronizedWithCurrentItem="True" 
    Margin="5,0,5,5" />

</DockPanel>


...


</Window>

다음 그림에서는 이 코드를 실행한 결과를 보여 줍니다.

ListBox의 동작과 전반적인 모양은 그대로 유지되고 목록 상자에 표시되는 콘텐츠의 모양만 변경되었습니다.

자세한 내용은 데이터 템플릿 개요를 참조하십시오. 기본 샘플을 보려면 Introduction to Data Templating 샘플을 참조하십시오.

스타일

스타일을 사용하면 개발자와 디자이너가 제품의 특정 모양을 표준화할 수 있습니다. WPF에서는 Style 요소를 근간으로 하는 강력한 스타일 모델을 제공합니다. 다음 예제에서는 창에 있는 모든 Button의 배경색을 Orange로 설정하는 스타일을 만듭니다.

<Window
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.StyleWindow"
    Title="Styles">


...


<!-- Style that will be applied to all buttons -->
<Style TargetType="{x:Type Button}">
  <Setter Property="Background" Value="Orange" />
  <Setter Property="BorderBrush" Value="Crimson" />
  <Setter Property="FontSize" Value="20" />
  <Setter Property="FontWeight" Value="Bold" />
  <Setter Property="Margin" Value="5" />
</Style>


...


<!-- This button will have the style applied to it -->
<Button>Click Me!</Button>

<!-- This label will not have the style applied to it -->
<Label>Don't Click Me!</Label>

<!-- This button will have the style applied to it -->
<Button>Click Me!</Button>


...


</Window>

이 스타일은 모든 Button 컨트롤을 대상으로 하므로 다음 그림에서와 같이 창의 모든 단추에 스타일이 자동으로 적용됩니다.

자세한 내용은 스타일 지정 및 템플릿을 참조하십시오. 기본 샘플을 보려면 Introduction to Styling and Templating 샘플을 참조하십시오.

리소스

응용 프로그램의 컨트롤은 글꼴 및 배경색에서 컨트롤 템플릿, 데이터 템플릿 및 스타일에 이르는 모든 부분에서 동일한 모양을 공유해야 합니다. user interface (UI) 리소스에 대한 WPF 지원 기능을 사용하여 나중에 다시 사용할 수 있도록 이러한 리소스를 단일 위치에 캡슐화할 수 있습니다.

다음 예제에서는 Button과 Label이 공유하는 공통 배경색을 정의합니다.

<Window
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.ResourcesWindow"
    Title="Resources Window">

  <!-- Define window-scoped background color resource -->
  <Window.Resources>
    <SolidColorBrush x:Key="defaultBackground" Color="Red" />
  </Window.Resources>


...


<!-- Button background is defined by window-scoped resource -->
<Button Background="{StaticResource defaultBackground}">One Button</Button>

<!-- Label background is defined by window-scoped resource -->
<Label Background="{StaticResource defaultBackground}">One Label</Label>


...


</Window>

이 예제에서는 Window.Resources 속성 요소를 사용하여 배경색 리소스를 구현합니다. 이 리소스는 Window의 모든 자식 항목에 사용할 수 있습니다. 아래에 나오는 리소스를 비롯하여 다양한 범위의 리소스가 있습니다. 아래에는 확인되는 순서대로 리소스가 나와 있습니다.

1. 개별 컨트롤(상속된 FrameworkElement.Resources 속성 사용)

2. Window 또는 Page(상속된 FrameworkElement.Resources 속성 사용)

3. Application(Application.Resources 속성 사용)

범위가 다양하므로 융통성 있게 리소스를 정의하고 공유할 수 있습니다.

리소스를 특정 범위에 직접 연결하는 방법 외에도 응용 프로그램의 다른 부분에서 참조될 수 있는 별도의 ResourceDictionary를 사용하여 하나 이상의 리소스를 패키지할 수 있습니다. 예를 들어 다음 예제에서는 리소스 사전에 기본 배경색을 정의합니다.

<ResourceDictionary 
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">

  <!-- Define background color resource -->
  <SolidColorBrush x:Key="defaultBackground" Color="Red" />

  <!-- Define other resources -->


...


</ResourceDictionary>

다음 예제에서는 앞의 예제에 정의된 리소스 사전을 참조하여 응용 프로그램 전체에서 공유되도록 합니다.

<Application
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.App">

  <Application.Resources>
    <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="BackgroundColorResources.xaml"/>
      </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
  </Application.Resources>


...


</Application>

리소스와 리소스 사전은 WPF의 테마 및 스킨 지원을 위한 기반이 됩니다.

자세한 내용은 리소스 개요를 참조하십시오.

테마 및 스킨

테마는 시각적인 면에서 Windows 및 여기에서 실행되는 응용 프로그램의 전반적인 모양을 정의합니다. Windows에는 여러 가지 테마가 함께 제공됩니다. 예를 들어 Microsoft Windows XP에는 Windows XP 및 Windows Classic 테마가 포함되고 Windows Vista에는 Windows Vista 및 Windows Classic 테마가 포함됩니다. 테마에 정의된 모양에 따라 WPF 응용 프로그램의 기본 모양이 정의됩니다. 그러나 WPF는 Windows 테마와 직접 통합되지 않습니다. WPF의 모양은 템플릿에 의해 정의되므로 WPF에는 Aero (Windows Vista), Classic (Microsoft Windows 2000), Luna (Microsoft Windows XP), Royale (Microsoft Windows XP Media Center Edition 2005) 등 잘 알려진 각 Windows 테마에 대한 템플릿이 하나씩 포함되어 있습니다. 이러한 테마는 응용 프로그램에 리소스가 없는 경우 확인하게 되는 리소스 사전에 패키지되어 있습니다. 대부분의 응용 프로그램은 이러한 테마를 통해 응용 프로그램의 시각적 모양을 정의합니다. 따라서 Windows 모양과 일관되어 사용자가 보다 많은 응용 프로그램에 쉽게 친숙해질 수 있습니다.

그러나 일부 응용 프로그램의 경우 해당 사용자 환경이 반드시 표준 테마에 기반을 둘 필요는 없습니다. 예를 들어 Microsoft Windows Media Player의 경우 오디오 및 비디오 데이터를 사용하므로 표준과는 다른 스타일의 사용자 환경이 더 적합합니다. 이러한 UIs는 대개 사용자 지정된 응용 프로그램 고유의 테마를 제공합니다. 이러한 테마를 스킨이라고 합니다. 스킨이 적용된 응용 프로그램은 일반적으로 사용자가 스킨의 다양한 측면을 사용자 지정하는 데 사용할 수 있는 방법을 제공합니다. Microsoft Windows Media Player에는 미리 만들어진 여러 가지 스킨과 많은 타사 스킨이 포함되어 있습니다.

WPF의 테마와 스킨 모두 리소스 사전을 사용하면 가장 쉽게 정의할 수 있습니다. 다음 예제에서는 샘플 스킨 정의를 보여 줍니다.

<!-- Blue Skin -->
<ResourceDictionary
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:SDKSample">
  <Style TargetType="{x:Type Button}">
    <Setter Property="Background" Value="Blue" />
  </Style>


...


</ResourceDictionary>

<!-- Yellow Skin -->
<ResourceDictionary
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:SDKSample">
  <Style TargetType="{x:Type Button}">
    <Setter Property="Background" Value="Yellow" />
  </Style>


...


</ResourceDictionary>

자세한 내용은 스타일 지정 및 템플릿의 "공유 리소스 및 테마"를 참조하십시오.

사용자 지정 컨트롤

WPF에서 다양한 사용자 지정 기능을 지원하기는 하지만 기존 WPF 컨트롤이 응용 프로그램이나 응용 프로그램 사용자의 필요에 맞지 않는 경우가 있을 수도 있습니다. 이러한 상황은 다음과 같은 경우에 발생할 수 있습니다.

• 기존 WPF 구현의 모양을 사용자 지정하여 필요한 UI를 만들 수 없는 경우

• 기존 WPF 구현에서 필요한 동작이 지원되지 않거나 쉽게 지원할 수 없는 경우

하지만 이러한 경우에는 세 가지 WPF 모델 중 하나를 사용하여 새 컨트롤을 만들 수 있습니다. 각 모델은 특정 시나리오를 대상으로 하므로 특정 WPF 기본 클래스에서 사용자 지정 컨트롤이 파생되어야 합니다. 세 가지 모델은 다음과 같습니다.

• 사용자 정의 컨트롤 모델. 사용자 지정 컨트롤이 UserControl에서 파생되며 하나 이상의 다른 컨트롤로 이루어집니다.

• 컨트롤 모델. 사용자 지정 컨트롤이 Control에서 파생되며, 대부분의 WPF 컨트롤과 마찬가지로 컨트롤의 동작과 모양을 분리하는 구현을 만드는 데 사용됩니다. Control에서 컨트롤을 파생하는 경우 사용자 정의 컨트롤을 만들 때보다 훨씬 융통성 있게 사용자 지정 UI를 만들 수 있습니다. 그러나 조금 더 많은 작업이 필요할 수는 있습니다.

• 프레임워크 요소 모델. 사용자 지정 컨트롤이 템플릿이 아니라 사용자 지정 렌더링 논리에 의해 모양이 정의되는 경우 FrameworkElement에서 파생됩니다.

다음 예제에서는 UserControl에서 파생되는 사용자 지정 숫자 up-down 컨트롤을 보여 줍니다.

<UserControl
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="SDKSample.NumericUpDown">

  <Grid>

    <Grid.RowDefinitions>
      <RowDefinition/>
      <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition/>
      <ColumnDefinition/>
    </Grid.ColumnDefinitions>

    <!-- Value text box -->
    <Border BorderThickness="1" BorderBrush="Gray" Margin="2" Grid.RowSpan="2" 
      VerticalAlignment="Center" HorizontalAlignment="Stretch">
      <TextBlock Name="valueText" Width="60" TextAlignment="Right" Padding="5"/>
    </Border>

    <!-- Up/Down buttons -->
    <RepeatButton Name="upButton" Click="upButton_Click" Grid.Column="1" 
      Grid.Row="0">Up</RepeatButton>
    <RepeatButton Name="downButton" Click="downButton_Click" Grid.Column="1" 
      Grid.Row="1">Down</RepeatButton>

  </Grid>

</UserControl>

imports System 'EventArgs
imports System.Windows 'DependencyObject, DependencyPropertyChangedEventArgs, 
                       ' FrameworkPropertyMetadata, PropertyChangedCallback, 
                       ' RoutedPropertyChangedEventArgs
imports System.Windows.Controls 'UserControl

Namespace SDKSample

    ' Interaction logic for NumericUpDown.xaml
    Partial Public Class NumericUpDown
        Inherits System.Windows.Controls.UserControl

        'NumericUpDown user control implementation


...



    End Class

End Namespace

using System; // EventArgs
using System.Windows; // DependencyObject, DependencyPropertyChangedEventArgs,
                      // FrameworkPropertyMetadata, PropertyChangedCallback, 
                      // RoutedPropertyChangedEventArgs
using System.Windows.Controls; // UserControl

namespace SDKSample
{
    public partial class NumericUpDown : UserControl
    {
        // NumericUpDown user control implementation


...


    }
}

다음 예제에서는 사용자 정의 컨트롤을 Window에 통합하는 데 필요한 XAML을 보여 줍니다.

<Window
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.UserControlWindow"
    xmlns:local="clr-namespace:SDKSample" 
    Title="User Control Window">


...


<!-- Numeric Up/Down user control -->
<local:NumericUpDown />


...


</Window>

다음 그림에서는 Window에서 호스팅되는 NumericUpDown 컨트롤을 보여 줍니다.

사용자 지정 컨트롤에 대한 자세한 내용은 컨트롤 제작 개요를 참조하십시오.

WPF를 사용하는 최선의 방법

모든 개발 플랫폼과 마찬가지로 WPF도 원하는 결과를 얻기 위해 다양한 방법으로 사용할 수 있습니다. 내게 필요한 옵션, 전역화 및 지역화, 성능을 위해 권장되는 최선의 방법을 함께 참조하면 필요한 사용자 환경을 제공하고 일반적인 사용자의 요구 사항을 만족하는 WPF 응용 프로그램을 만드는 데 도움이 됩니다. 자세한 내용은 다음 항목을 참조하십시오.

• 액세스 가능성에 대한 유용한 정보

• WPF 전역화 및 지역화 개요

• WPF 응용 프로그램 성능 최적화

• 보안(WPF)

요약

WPF는 시각적으로 뛰어난 다양한 클라이언트 응용 프로그램을 만드는 데 사용할 수 있는 포괄적인 프레젠테이션 기술입니다. 이 개요 문서에서는 WPF의 핵심 기능에 대해 살펴보았습니다.

이제 WPF 응용 프로그램을 만들어 보십시오.

응용 프로그램을 만드는 동안에도 궁금한 점이 있으면 이 개요 문서를 통해 핵심 기능에 대해 다시 한번 살펴볼 수 있으며 여기서 다루는 기능에 대해 보다 자세한 정보를 제공하는 참조 자료를 찾을 수도 있습니다.

권장 개요 및 샘플

이 개요 문서에서 제시하는 개요와 샘플은 다음과 같습니다.

개요

액세스 가능성에 대한 유용한 정보 응용 프로그램 관리 개요 명령 개요 컨트롤 데이터 바인딩 개요 종속성 속성 개요 WPF의 문서

입력 개요 레이아웃 시스템 탐색 개요 인쇄 개요 리소스 개요 라우트된 이벤트 개요 스타일 지정 및 템플릿 WPF의 입력 체계 보안(WPF) WPF 창 개요 WPF 콘텐츠 모델 WPF 전역화 및 지역화 개요 그래픽 및 멀티미디어

샘플

3-D Solids 샘플 Animation Example Gallery Brushes 샘플 Data Binding 데모 Geometries 샘플

Introduction to Data Templating 샘플 Introduction to Styling and Templating 샘플 Shape Elements 샘플 Styling with ControlTemplates 샘플 WPF Layout Gallery 샘플

참고 항목

개념

연습: WPF 시작

WPF 커뮤니티 사용자 의견