WPF 소개Introduction to WPF

WPF(Windows Presentation Foundation)를 사용하면 시각적으로 뛰어난 사용자 환경을 통해 Windows용 데스크톱 클라이언트 응용 프로그램을 만들 수 있습니다.Windows Presentation Foundation (WPF) lets you create desktop client applications for Windows with visually stunning user experiences.

Contoso Healthcare UI 샘플Contoso Healthcare UI sample

WPF의 핵심은 최신 그래픽 하드웨어를 활용하도록 작성된 해상도 독립적인 벡터 기반 렌더링 엔진입니다.The core of WPF is a resolution-independent and vector-based rendering engine that is built to take advantage of modern graphics hardware. WPF는 XAML(Extensible Application Markup Language), 컨트롤, 데이터 바인딩, 레이아웃, 2차원 및 3차원 그래픽, 애니메이션, 스타일, 템플릿, 문서, 미디어, 텍스트 및 입력 체계를 포함하는 포괄적인 응용 프로그램 개발 기능을 사용하여 핵심을 확장합니다.WPF extends the core with a comprehensive set of application-development features that include Extensible Application Markup Language (XAML), controls, data binding, layout, 2-D and 3-D graphics, animation, styles, templates, documents, media, text, and typography. WPF는 .NET Framework에 포함되어 있으므로 .NET Framework 클래스 라이브러리의 다른 요소를 통합하는 응용 프로그램을 빌드할 수 있습니다.WPF is included in the .NET Framework, so you can build applications that incorporate other elements of the .NET Framework class library.

이 개요는 초보자를 위한 것이며 WPF의 주요 기능 및 개념에 대해 설명합니다.This overview is intended for newcomers and covers the key capabilities and concepts of WPF.

WPF를 사용한 프로그래밍Programming with WPF

WPF는 대부분 System.Windows 네임스페이스에 있는 .NET Framework 형식의 하위 집합으로 존재합니다.WPF exists as a subset of .NET Framework types that are for the most part located in the System.Windows namespace. 이전에 ASP.NET 및 Windows Forms와 같은 관리되는 기술을 사용하여 .NET Framework로 응용 프로그램을 빌드한 적이 있는 경우 기본적인 WPF 프로그래밍 환경이 친숙할 것입니다. 모두 C# 또는 Visual Basic과 같은 원하는 .NET 프로그래밍 언어를 사용하여 클래스를 인스턴스화하고, 속성을 설정하고, 메서드를 호출하고, 이벤트를 처리합니다.If you have previously built applications with .NET Framework using managed technologies like ASP.NET and Windows Forms, the fundamental WPF programming experience should be familiar; you instantiate classes, set properties, call methods, and handle events, all using your favorite .NET programming language, such as C# or Visual Basic.

WPF에는 속성 및 이벤트를 향상시키는 종속성 속성라우트된 이벤트와 같은 추가 프로그래밍 구문이 포함되어 있습니다.WPF includes additional programming constructs that enhance properties and events: dependency properties and routed events.

태그 및 코드 숨김Markup and Code-Behind

WPF를 사용하면 ASP.NET 개발자에게 익숙한 환경인 태그코드 숨김둘 다를 통해 응용 프로그램을 개발할 수 있습니다.WPF lets you develop an application using both markup and code-behind, an experience that ASP.NET developers should be familiar with. 일반적으로 XAML 태그를 사용하여 응용 프로그램의 모양을 구현하고 관리되는 프로그래밍 언어(코드 숨김)를 사용하여 해당 동작을 구현합니다.You generally use XAML markup to implement the appearance of an application while using managed programming languages (code-behind) to implement its behavior. 모양 및 동작의 이러한 분리는 다음과 같은 이점이 있습니다.This separation of appearance and behavior has the following benefits:

  • 모양 관련 태그가 동작 관련 코드와 밀접하게 결합되지 않으므로 개발 및 유지 관리 비용이 줄어듭니다.Development and maintenance costs are reduced because appearance-specific markup is not tightly coupled with behavior-specific code.

  • 디자이너가 응용 프로그램의 동작을 구현하는 개발자와 동시에 응용 프로그램의 모양을 구현할 수 있으므로 개발이 보다 효율적입니다.Development is more efficient because designers can implement an application's appearance simultaneously with developers who are implementing the application's behavior.

  • WPF 응용 프로그램에 대한전역화 및 지역화 가 간소화됩니다.Globalization and localization for WPF applications is simplified.

    다음은 WPF 태그 및 코드 숨김에 대한 간략한 소개입니다.The following is a brief introduction to WPF markup and code-behind.

태그Markup

XAML은 선언적으로 응용 프로그램의 모양을 구현하는 데 사용되는 XML 기반 태그 언어입니다.XAML is an XML-based markup language that is used to implement an application's appearance declaratively. 일반적으로 창, 대화 상자, 페이지 및 사용자 정의 컨트롤을 만들고 컨트롤, 도형 및 그래픽으로 채우는 데 사용됩니다.It is typically used to create windows, dialog boxes, pages, and user controls, and to fill them with controls, shapes, and graphics.

다음 예제에서는 XAML을 사용하여 단일 단추가 포함된 창의 모양을 구현합니다.The following example uses XAML to implement the appearance of a window that contains a single button.

<Window  
    xmlns="http://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은 각각 WindowButton 요소를 사용하여 창과 단추를 정의합니다.Specifically, this XAML defines a window and a button by using the Window and Button elements, respectively. 각 요소는 창의 제목 표시줄 텍스트를 지정하는 Window 요소의 Title 특성과 같은 특성으로 구성됩니다.Each element is configured with attributes, such as the Window element's Title attribute to specify the window's title-bar text. 런타임에 WPF는 태그에 정의된 요소와 특성을 WPF 클래스 인스턴스로 변환합니다.At run time, WPF converts the elements and attributes that are defined in markup to instances of WPF classes. 예를 들어 Window 요소는 Window 속성이 Title 특성의 값인 Title 클래스 인스턴스로 변환됩니다.For example, the Window element is converted to an instance of the Window class whose Title property is the value of the Title attribute.

다음 그림은 이전 예제에서 XAML로 정의된 UI(사용자 인터페이스)를 보여 줍니다.The following figure shows the user interface (UI) that is defined by the XAML in the previous example.

단추가 있는 창A window that contains a button

XAML은 XML 기반이기 때문에 XAML로 작성한 UI는 요소 트리라고 하는 중첩된 요소 계층 구조로 어셈블됩니다.Since XAML is XML-based, the UI that you compose with it is assembled in a hierarchy of nested elements known as an element tree. 요소 트리는 UI를 만들고 관리하는 논리적이고 직관적인 방법을 제공합니다.The element tree provides a logical and intuitive way to create and manage UIs.

코드 숨김Code-Behind

응용 프로그램의 기본 동작은 이벤트 처리(예: 메뉴, 도구 모음 또는 단추 클릭) 및 응답으로 비즈니스 논리 및 데이터 액세스 논리 호출을 포함하여 사용자 조작에 응답하는 기능을 구현하는 것입니다.The main behavior of an application is to implement the functionality that responds to user interactions, including handling events (for example, clicking a menu, tool bar, or button) and calling business logic and data access logic in response. WPF에서 이 동작은 일반적으로 태그와 연결된 코드에서 구현됩니다.In WPF, this behavior is generally implemented in code that is associated with markup. 이러한 종류의 코드를 코드 숨김이라고 합니다.This type of code is known as code-behind. 다음 예제에서는 이전 예제의 업데이트된 태그 및 코드 숨김을 보여 줍니다.The following example shows the updated markup from the previous example and the code-behind.

<Window  
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
    xmlns:x="http://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>  
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!");  
        }  
    }  
}  
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  

이 예제에서 코드 숨김은 Window 클래스에서 파생된 클래스를 구현합니다.In this example, the code-behind implements a class that derives from the Window class. x:Class 특성은 태그를 코드 숨김 클래스와 연결하는 데 사용됩니다.The x:Class attribute is used to associate the markup with the code-behind class. InitializeComponent는 코드 숨김 클래스를 사용하여 태그에서 정의된 UI를 병합하기 위해 코드 숨김 클래스의 생성자에서 호출됩니다.InitializeComponent is called from the code-behind class's constructor to merge the UI that is defined in markup with the code-behind class. InitializeComponent는 응용 프로그램을 빌드할 때 자동으로 생성되므로 직접 구현할 필요가 없습니다. x:ClassInitializeComponent를 조합하면 구현을 만들 때마다 올바르게 초기화됩니다.(InitializeComponent is generated for you when your application is built, which is why you don't need to implement it manually.) The combination of x:Class and InitializeComponent ensure that your implementation is correctly initialized whenever it is created. 코드 숨김 클래스는 단추의 Click 이벤트에 대한 이벤트 처리기도 구현합니다.The code-behind class also implements an event handler for the button's Click event. 단추를 클릭하면 이벤트 처리기가 System.Windows.MessageBox.Show 메서드를 호출하여 메시지 상자를 표시합니다.When the button is clicked, the event handler shows a message box by calling the System.Windows.MessageBox.Show method.

다음 그림은 단추를 클릭할 때의 결과를 보여 줍니다.The following figure shows the result when the button is clicked.

MessageBoxA MessageBox

컨트롤Controls

응용 프로그램 모델에서 제공하는 사용자 환경은 생성된 컨트롤입니다.The user experiences that are delivered by the application model are constructed controls. WPF에서 "컨트롤"은 창이나 페이지에서 호스트되고 사용자 인터페이스가 있으며 일부 동작을 구현하는 WPF 클래스의 한 범주에 적용되는 포괄적인 용어입니다.In WPF, "control" is an umbrella term that applies to a category of WPF classes that are hosted in either a window or a page, have a user interface, and implement some behavior.

자세한 내용은 컨트롤을 참조하세요.For more information, see Controls.

기능별 WPF 컨트롤WPF Controls by Function

기본 제공 WPF 컨트롤은 다음과 같습니다.The built-in WPF controls are listed here.

입력 및 명령Input and Commanding

컨트롤은 대체로 사용자 입력을 감지하고 응답합니다.Controls most often detect and respond to user input. WPF 입력 시스템 은 직접 및 라우트된 이벤트를 사용하여 텍스트 입력, 포커스 관리 및 마우스 위치 지정을 지원합니다.The WPF input system uses both direct and routed events to support text input, focus management, and mouse positioning.

응용 프로그램에 복잡한 입력 요구 사항이 있는 경우가 많습니다.Applications often have complex input requirements. WPF는 사용자 입력 작업을 이러한 작업에 응답하는 코드에서 분리하는 명령 시스템 을 제공합니다.WPF provides a command system that separates user input actions from the code that responds to those actions.

레이아웃Layout

사용자 인터페이스를 만들 때 위치 및 크기별로 컨트롤을 정렬하여 레이아웃을 구성합니다.When you create a user interface, you arrange your controls by location and size to form a layout. 모든 레이아웃의 주요 요구 사항은 창 크기와 표시 설정의 변경 내용에 맞게 조정되는 것입니다.A key requirement of any layout is to adapt to changes in window size and display settings. 이러한 상황에서 레이아웃을 조정하는 코드를 작성하도록 요구하는 대신 WPF는 확장 가능한 뛰어난 레이아웃 시스템을 제공합니다.Rather than forcing you to write the code to adapt a layout in these circumstances, WPF provides a first-class, extensible layout system for you.

이 레이아웃 시스템의 토대는 상대 위치 지정으로, 변화하는 창과 표시 조건에 맞게 조정하는 기능을 향상시킵니다.The cornerstone of the layout system is relative positioning, which increases the ability to adapt to changing window and display conditions. 또한 이 레이아웃 시스템은 레이아웃을 결정하기 위한 컨트롤 간의 협상을 관리합니다.In addition, the layout system manages the negotiation between controls to determine the layout. 협상은 2단계 프로세스입니다. 첫 번째로, 컨트롤이 필요한 위치 및 크기를 부모에게 알립니다. 두 번째로, 부모가 사용할 수 있는 공간을 컨트롤에 알립니다.The negotiation is a two-step process: first, a control tells its parent what location and size it requires; second, the parent tells the control what space it can have.

이 레이아웃 시스템은 기본 WPF 클래스를 통해 자식 컨트롤에 노출됩니다.The layout system is exposed to child controls through base WPF classes. 그리드, 스택 및 도킹과 같은 일반적인 레이아웃을 위해 WPF는 여러 레이아웃 컨트롤을 포함합니다.For common layouts such as grids, stacking, and docking, WPF includes several layout controls:

  • Canvas: 자식 컨트롤이 자체 레이아웃을 제공합니다.Canvas: Child controls provide their own layout.

  • DockPanel: 자식 컨트롤이 패널 가장자리에 맞춰집니다.DockPanel: Child controls are aligned to the edges of the panel.

  • Grid: 자식 컨트롤이 행 및 열별로 배치됩니다.Grid: Child controls are positioned by rows and columns.

  • StackPanel: 자식 컨트롤이 가로 또는 세로로 포개집니다.StackPanel: Child controls are stacked either vertically or horizontally.

  • VirtualizingStackPanel: 자식 컨트롤이 가상화되고 가로 또는 세로 방향인 한 줄에 정렬됩니다.VirtualizingStackPanel: Child controls are virtualized and arranged on a single line that is either horizontally or vertically oriented.

  • WrapPanel: 자식 컨트롤이 왼쪽에서 오른쪽 순서로 배치되고 공간에 허용되는 것보다 더 많은 컨트롤이 현재 줄에 있는 경우 다음 줄로 줄 바꿈됩니다.WrapPanel: Child controls are positioned in left-to-right order and wrapped to the next line when there are more controls on the current line than space allows.

    다음 예제에서는 DockPanel 하나를 사용하여 여러 TextBox 컨트롤을 레이아웃합니다.The following example uses a DockPanel to lay out several TextBox controls.

    <Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://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 컨트롤이 정렬 방법을 알려줄 수 있습니다.The DockPanel allows the child TextBox controls to tell it how to arrange them. 이렇게 하려면 DockPanel은 각각 도킹 스타일을 지정할 수 있도록 자식 컨트롤에 노출되는 Dock 속성을 구현합니다.To do this, the DockPanel implements a Dock attached property that is exposed to the child controls to allow each of them to specify a dock style.

참고

자식 컨트롤에서 사용할 수 있도록 부모 컨트롤이 구현하는 속성은 연결된 속성이라는 WPF 구문입니다.A property that is implemented by a parent control for use by child controls is a WPF construct called an attached property.

다음 그림에서는 이전 예제의 XAML 태그 결과를 보여 줍니다.The following figure shows the result of the XAML markup in the preceding example.

DockPanel 페이지DockPanel page

데이터 바인딩Data Binding

대부분의 응용 프로그램은 데이터를 보고 편집할 수 있는 수단을 사용자에게 제공하기 위해 생성됩니다.Most applications are created to provide users with the means to view and edit data. WPF 응용 프로그램의 경우 데이터를 저장 및 액세스하는 작업이 SQL Server 및 ADO .NET과 같은 기술에 의해 이미 제공됩니다.For WPF applications, the work of storing and accessing data is already provided for by technologies such as SQL Server and ADO .NET. 데이터에 액세스하고 응용 프로그램의 관리되는 개체에 로드한 후 WPF 응용 프로그램에 대한 힘든 작업이 시작됩니다.After the data is accessed and loaded into an application's managed objects, the hard work for WPF applications begins. 기본적으로 다음 두 가지가 포함됩니다.Essentially, this involves two things:

  1. 관리되는 개체에서 데이터를 표시 및 편집할 수 있는 컨트롤로 데이터 복사Copying the data from the managed objects into controls, where the data can be displayed and edited.

  2. 컨트롤을 사용한 데이터 변경 내용이 관리되는 개체에 다시 복사되는지 확인Ensuring that changes made to data by using controls are copied back to the managed objects.

    응용 프로그램 개발을 간소화하기 위해 WPF는 이러한 단계를 자동으로 수행하는 데이터 바인딩 엔진을 제공합니다.To simplify application development, WPF provides a data binding engine to automatically perform these steps. 데이터 바인딩 엔진의 핵심 단위는 Binding 클래스로, 컨트롤(바인딩 대상)을 데이터 개체(바인딩 소스)에 바인딩하는 작업을 수행합니다.The core unit of the data binding engine is the Binding class, whose job is to bind a control (the binding target) to a data object (the binding source). 이 관계는 다음 그림에 나와 있습니다.This relationship is illustrated by the following figure.

    기본 데이터 바인딩 다이어그램Basic data binding diagram

    다음 예제에서는 TextBox를 사용자 지정 Person 개체의 인스턴스에 바인딩하는 방법을 보여 줍니다.The following example demonstrates how to bind a TextBox to an instance of a custom Person object. Person 구현은 다음 코드에 나와 있습니다.The Person implementation is shown in the following code.

    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 개체의 인스턴스에 바인딩합니다.The following markup binds the TextBox to an instance of a custom Person object.

    <Window
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://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에 대한 데이터 컨텍스트로 설정됩니다.In this example, the Person class is instantiated in code-behind and is set as the data context for the DataBindingWindow. 태그에서 TextTextBox 속성은 " Person.Name " XAML 구문을 사용하여{Binding ... }속성에 바인딩됩니다.In markup, the Text property of the TextBox is bound to the Person.Name property (using the "{Binding ... }" XAML syntax). 이 XAML은 창의 TextBox 속성에 저장된 Person 개체에 DataContext 컨트롤을 바인딩하도록 WPF에 알립니다.This XAML tells WPF to bind the TextBox control to the Person object that is stored in the DataContext property of the window.

    WPF 데이터 바인딩 엔진은 유효성 검사, 정렬, 필터링 및 그룹화를 포함하는 추가 지원을 제공합니다.The WPF data binding engine provides additional support that includes validation, sorting, filtering, and grouping. 또한 데이터 바인딩은 표준 WPF 컨트롤에 의해 표시되는 사용자 인터페이스가 적절하지 않은 경우 데이터 템플릿을 사용하여 바인딩된 데이터에 대한 사용자 지정 사용자 인터페이스를 만들 수 있도록 지원합니다.Furthermore, data binding supports the use of data templates to create custom user interface for bound data when the user interface displayed by the standard WPF controls is not appropriate.

    자세한 내용은 데이터 바인딩 개요를 참조하세요.For more information, see Data Binding Overview.

그래픽Graphics

WPF는 다음과 같은 이점이 있는 광범위하고 확장 가능하며 유연한 그래픽 집합을 도입합니다.WPF introduces an extensive, scalable, and flexible set of graphics features that have the following benefits:

  • 해상도 및 장치 독립적인 그래픽.Resolution-independent and device-independent graphics. WPF 그래픽 시스템의 기본 측정 단위는 실제 화면 해상도에 관계없이 1/96인치인 장치 독립적 픽셀이며, 해상도 및 장치 독립적인 렌더링을 위한 토대를 제공합니다.The basic unit of measurement in the WPF graphics system is the device independent pixel, which is 1/96th of an inch, regardless of actual screen resolution, and provides the foundation for resolution-independent and device-independent rendering. 각 장치 독립적 픽셀은 렌더링되는 시스템의 dpi(인치당 도트 수) 설정에 맞게 자동으로 확장됩니다.Each device-independent pixel automatically scales to match the dots-per-inch (dpi) setting of the system it renders on.

  • 향상된 정밀도.Improved precision. WPF 좌표계는 단정밀도 대신 배정밀도 부동 소수점 숫자로 측정됩니다.The WPF coordinate system is measured with double-precision floating-point numbers rather than single-precision. 변환 및 불투명도 값도 배정밀도로 표현됩니다.Transformations and opacity values are also expressed as double-precision. 또한 WPF는 광범위한 색 영역(scRGB)을 지원하며 여러 색 공간의 입력을 관리하기 위한 통합 지원을 제공합니다.WPF also supports a wide color gamut (scRGB) and provides integrated support for managing inputs from different color spaces.

  • 고급 그래픽 및 애니메이션 지원.Advanced graphics and animation support. WPF는 애니메이션 장면을 관리하여 그래픽 프로그래밍을 간소화합니다. 장면 처리, 렌더링 루프 및 쌍선형 보간에 대해 걱정할 필요가 없습니다.WPF simplifies graphics programming by managing animation scenes for you; there is no need to worry about scene processing, rendering loops, and bilinear interpolation. 또한 WPF는 적중 테스트 및 전체 알파 합치기를 지원합니다.Additionally, WPF provides hit-testing support and full alpha-compositing support.

  • 하드웨어 가속.Hardware acceleration. WPF 그래픽 시스템은 그래픽 하드웨어를 활용하여 CPU 사용량을 최소화합니다.The WPF graphics system takes advantage of graphics hardware to minimize CPU usage.

2차원 도형2-D Shapes

WPF는 다음 그림에 표시된 사각형 및 타원과 같은 일반적인 벡터 기반의 2차원 도형 라이브러리를 제공합니다.WPF provides a library of common vector-drawn 2-D shapes, such as the rectangles and ellipses that are shown in the following illustration.

타원 및 사각형Ellipses and rectangles

도형의 흥미로운 기능은 표시에 사용되는 것뿐 아니라 키보드 및 마우스 입력을 비롯하여 컨트롤에서 기대하는 기능을 대부분 구현한다는 것입니다.An interesting capability of shapes is that they are not just for display; shapes implement many of the features that you expect from controls, including keyboard and mouse input. 다음 예제에서는 MouseUpEllipse 이벤트가 처리되는 과정을 보여 줍니다.The following example shows the MouseUp event of an Ellipse being handled.

<Window 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://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!");
        }
    }
}

다음 그림은 위의 코드에서 생성되는 내용을 보여 줍니다.The following figure shows what is produced by the preceding code.

"you clicked the ellipse!" 텍스트가 있는 창A window with the text "you clicked the ellipse!"

자세한 내용은 WPF에서 Shape 및 기본 그리기 개요를 참조하세요.For more information, see Shapes and Basic Drawing in WPF Overview.

2차원 기하 도형2-D Geometries

WPF에서 제공하는 2차원 도형은 기본 도형의 표준 집합을 다룹니다.The 2-D shapes provided by WPF cover the standard set of basic shapes. 그러나 사용자 지정 사용자 인터페이스의 디자인이 용이하도록 사용자 지정 도형을 만들어야 할 수도 있습니다.However, you may need to create custom shapes to facilitate the design of a customized user interface. 이 용도로 WPF는 기하 도형을 제공합니다.For this purpose, WPF provides geometries. 다음 그림은 기하 도형을 사용하여 직접 그리거나, 브러시로 사용하거나, 다른 도형 및 컨트롤을 자르는 데 사용할 수 있는 사용자 지정 도형을 만드는 과정을 보여 줍니다.The following figure demonstrates the use of geometries to create a custom shape that can be drawn directly, used as a brush, or used to clip other shapes and controls.

Path 개체는 닫혔거나 열린 도형, 여러 도형 및 곡선 도형을 그리는 데 사용할 수 있습니다.Path objects can be used to draw closed or open shapes, multiple shapes, and even curved shapes.

Geometry 개체는 자르기, 적중 테스트 및 2차원 그래픽 데이터 렌더링에 사용할 수 있습니다.Geometry objects can be used for clipping, hit-testing, and rendering 2-D graphic data.

Path의 다양한 용도Various uses of a Path

자세한 내용은 기하 도형 개요를 참조하세요.For more information, see Geometry Overview

2차원 효과2-D Effects

WPF 2차원 기능의 하위 집합에는 그라데이션, 비트맵, 그리기, 비디오로 그리기, 회전, 크기 조정 및 기울이기와 같은 시각 효과가 포함됩니다.A subset of WPF 2-D capabilities includes visual effects, such as gradients, bitmaps, drawings, painting with videos, rotation, scaling, and skewing. 브러시를 통해 이러한 모든 효과를 얻을 수 있습니다. 다음 그림에서는 몇 가지 예를 보여 줍니다.These are all achieved with brushes; the following figure shows some examples.

여러 브러시의 설명Illustration of different brushes

자세한 내용은 WPF 브러시 개요를 참조하세요.For more information, see WPF Brushes Overview.

3차원 렌더링3-D Rendering

WPF에는 더 흥미로운 사용자 인터페이스를 만들 수 있도록 2차원 그래픽을 통합하는 3차원 렌더링 기능도 포함되어 있습니다.WPF also includes 3-D rendering capabilities that integrate with 2-d graphics to allow the creation of more exciting and interesting user interfaces. 예를 들어 다음 그림에서는 3차원 도형에 렌더링된 2차원 이미지를 보여 줍니다.For example, the following figure shows 2-D images rendered onto 3-D shapes.

Visual3D 샘플 스크린샷Visual3D sample screen shot

자세한 내용은 3차원 그래픽 개요를 참조하세요.For more information, see 3-D Graphics Overview.

애니메이션Animation

WPF 애니메이션 지원을 사용하면 컨트롤이 커지거나, 흔들리거나, 회전하거나, 사라지도록 하여 흥미로운 페이지 전환 등을 만들 수 있습니다.WPF animation support lets you make controls grow, shake, spin, and fade, to create interesting page transitions, and more. 사용자 지정 클래스를 비롯한 대부분의 WPF 클래스에 애니메이션 효과를 줄 수 있습니다.You can animate most WPF classes, even custom classes. 다음 그림에서는 간단한 애니메이션의 작동을 보여 줍니다.The following figure shows a simple animation in action.

애니메이션 효과가 적용된 큐브의 이미지Images of an animated cube

자세한 내용은 애니메이션 개요를 참조하세요.For more information, see Animation Overview.

미디어Media

풍부한 콘텐츠를 전달하는 한 가지 방법은 시청각 미디어를 사용하는 것입니다.One way to convey rich content is through the use of audiovisual media. WPF는 이미지, 비디오 및 오디오에 대한 특별한 지원을 제공합니다.WPF provides special support for images, video, and audio.

이미지Images

이미지는 대부분의 응용 프로그램에서 공통적으로 사용되며 WPF는 이미지를 사용하는 여러 방법을 제공합니다.Images are common to most applications, and WPF provides several ways to use them. 다음 그림에서는 미리 보기 이미지를 포함하는 목록 상자가 있는 사용자 인터페이스를 보여 줍니다.The following figure shows a user interface with a list box that contains thumbnail images. 미리 보기를 선택하면 이미지가 전체 크기로 표시됩니다.When a thumbnail is selected, the image is shown full-size.

축소판 이미지 및 전체 크기 이미지Thumbnail images and a full-size image

자세한 내용은 이미징 개요를 참조하세요.For more information, see Imaging Overview.

비디오 및 오디오Video and Audio

MediaElement 컨트롤은 비디오와 오디오를 둘 다 재생할 수 있으며 사용자 지정 미디어 플레이어의 토대가 될 수 있을 정도로 유연합니다.The MediaElement control is capable of playing both video and audio, and it is flexible enough to be the basis for a custom media player. 다음 XAML 태그는 미디어 플레이어를 구현합니다.The following XAML markup implements a media player.

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

다음 그림의 창에서는 MediaElement 컨트롤의 작동을 보여 줍니다.The window in the following figure shows the MediaElement control in action.

오디오와 비디오가 있는 MediaElement 컨트롤A MediaElement control with audio and video

자세한 내용은 WPF 그래픽, 애니메이션 및 미디어 개요를 참조하세요.For more information, see WPF Graphics, Animation, and Media Overview.

텍스트 및 입력 체계Text and Typography

고품질 텍스트 렌더링이 용이하도록 WPF는 다음 기능을 제공합니다.To facilitate high-quality text rendering, WPF offers the following features:

  • OpenType 글꼴 지원OpenType font support.

  • ClearType 향상ClearType enhancements.

  • 하드웨어 가속을 활용하는 고성능High performance that takes advantage of hardware acceleration.

  • 미디어, 그래픽 및 애니메이션과 텍스트 통합Integration of text with media, graphics, and animation.

  • 국가별 글꼴 지원 및 대체(fallback) 메커니즘International font support and fallback mechanisms.

    텍스트와 그래픽 통합의 데모로, 다음 그림에서는 텍스트 장식의 응용을 보여 줍니다.As a demonstration of text integration with graphics, the following figure shows the application of text decorations.

    다양한 텍스트 장식이 적용된 텍스트Text with various text decorations

    자세한 내용은 Windows Presentation Foundation의 입력 체계를 참조하세요.For more information, see Typography in Windows Presentation Foundation.

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

지금까지 응용 프로그램을 개발하기 위한 핵심 WPF 구성 요소를 살펴봤습니다.Up to this point, you've seen the core WPF building blocks for developing applications. 응용 프로그램 모델을 사용하여 주로 컨트롤로 구성된 응용 프로그램 콘텐츠를 호스트 및 제공합니다.You use the application model to host and deliver application content, which consists mainly of controls. 사용자 인터페이스에서 컨트롤 정렬을 간소화하고 창 크기 및 디스플레이 설정이 변경되어도 정렬이 유지되도록 하기 위해 WPF 레이아웃 시스템을 사용합니다.To simplify the arrangement of controls in a user interface, and to ensure the arrangement is maintained in the face of changes to window size and display settings, you use the WPF layout system. 대부분의 응용 프로그램은 사용자의 데이터 조작을 허용하므로 데이터 바인딩을 사용하여 사용자 인터페이스와 데이터 통합 작업을 줄입니다.Because most applications allow users to interact with data, you use data binding to reduce the work of integrating your user interface with data. 응용 프로그램의 시각적 모양을 개선하려면 WPF에서 제공하는 광범위한 그래픽, 애니메이션 및 미디어 지원을 사용합니다.To enhance the visual appearance of your application, you use the comprehensive range of graphics, animation, and media support provided by WPF.

하지만 기본 사항이 고유하고 시각적으로 멋진 사용자 환경을 만들고 관리하는 데 충분하지 않은 경우도 많습니다.Often, though, the basics are not enough for creating and managing a truly distinct and visually stunning user experience. 표준 WPF 컨트롤이 원하는 응용 프로그램 모양과 통합되지 않을 수 있습니다.The standard WPF controls may not integrate with the desired appearance of your application. 데이터가 가장 효율적인 방식으로 표시되지 않을 수도 있습니다.Data may not be displayed in the most effective way. 응용 프로그램의 전반적인 사용자 환경이 Windows 테마의 기본 모양과 느낌에 적합하지 않을 수 있습니다.Your application's overall user experience may not be suited to the default look and feel of Windows themes. 여러 측면에서 프레젠테이션 기술은 다른 종류의 확장성만큼 시각적 확장성을 필요로 합니다.In many ways, a presentation technology needs visual extensibility as much as any other kind of extensibility.

이런 이유로 WPF는 컨트롤, 트리거, 컨트롤 및 데이터 템플릿, 스타일, 사용자 인터페이스 리소스, 테마 및 스킨에 대한 풍부한 콘텐츠 모델을 포함하여 고유한 사용자 환경을 만들기 위한 다양한 메커니즘을 제공합니다.For this reason, WPF provides a variety of mechanisms for creating unique user experiences, including a rich content model for controls, triggers, control and data templates, styles, user interface resources, and themes and skins.

콘텐츠 모델Content Model

대부분의 WPF 컨트롤은 주로 콘텐츠를 표시하는 데 사용됩니다.The main purpose of a majority of the WPF controls is to display content. WPF에서 컨트롤의 콘텐츠를 구성할 수 있는 항목의 유형과 개수를 컨트롤의 콘텐츠 모델이라고 합니다.In WPF, the type and number of items that can constitute the content of a control is referred to as the control's content model. 일부 컨트롤은 단일 항목 및 유형의 콘텐츠를 포함할 수 있습니다. 예를 들어 TextBox 의 콘텐츠는 Text 속성에 할당되는 문자열 값입니다.Some controls can contain a single item and type of content; for example, the content of a TextBox is a string value that is assigned to the Text property. 다음 예제에서는 TextBox의 콘텐츠를 설정합니다.The following example sets the content of a TextBox.

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

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

다음 그림에서는 결과를 보여 줍니다.The following figure shows the result.

텍스트가 포함된 TextBox 컨트롤A TextBox control that contains text

그러나 다른 컨트롤은 다양한 콘텐츠 형식의 여러 항목을 포함할 수 있습니다. Content 속성으로 지정된 Button의 콘텐츠에는 레이아웃 컨트롤, 텍스트, 이미지 및 도형을 포함하여 다양한 항목이 포함될 수 있습니다.Other controls, however, can contain multiple items of different types of content; the content of a Button, specified by the Content property, can contain a variety of items including layout controls, text, images, and shapes. 다음 예제에서는 Button , DockPanel, LabelBorder를 포함하는 콘텐츠가 있는 MediaElement을 보여 줍니다.The following example shows a Button with content that includes a DockPanel, a Label, a Border, and a MediaElement.

<Window 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://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>  

다음 그림에서는 이 단추의 콘텐츠를 보여 줍니다.The following figure shows the content of this button.

여러 형식의 콘텐츠가 포함된 단추A button that contains multiple types of content

다양한 컨트롤에서 지원하는 콘텐츠 종류에 대한 자세한 내용은 WPF 콘텐츠 모델을 참조하세요.For more information on the kinds of content that is supported by various controls, see WPF Content Model.

트리거Triggers

XAML 태그의 주요 용도는 응용 프로그램의 모양을 구현하는 것이지만 XAML을 사용하여 응용 프로그램 동작의 일부 측면을 구현할 수도 있습니다.Although the main purpose of XAML markup is to implement an application's appearance, you can also use XAML to implement some aspects of an application's behavior. 한 가지 예는 트리거를 사용하여 사용자 조작에 따라 응용 프로그램의 모양을 변경하는 것입니다.One example is the use of triggers to change an application's appearance based on user interactions. 자세한 내용은 스타일 지정 및 템플릿을 참조하세요.For more information, see Styling and Templating.

컨트롤 템플릿Control Templates

WPF 컨트롤의 기본 사용자 인터페이스는 일반적으로 다른 컨트롤 및 도형에서 구성됩니다.The default user interfaces for WPF controls are typically constructed from other controls and shapes. 예를 들어 ButtonButtonChromeContentPresenter 컨트롤 둘 다로 구성됩니다.For example, a Button is composed of both ButtonChrome and ContentPresenter controls. ButtonChrome 은 표준 단추 모양을 제공하는 반면, ContentPresenterContent 속성에 지정된 대로 단추의 콘텐츠를 표시합니다.The ButtonChrome provides the standard button appearance, while the ContentPresenter displays the button's content, as specified by the Content property.

컨트롤의 기본 모양이 응용 프로그램의 전반적인 모양에 맞지 않을 수도 있습니다.Sometimes the default appearance of a control may be incongruent with the overall appearance of an application. 이 경우 ControlTemplate 을 사용하여 해당 콘텐츠 및 동작을 변경하지 않고 컨트롤의 사용자 인터페이스 모양을 변경할 수 있습니다.In this case, you can use a ControlTemplate to change the appearance of the control's user interface without changing its content and behavior.

예를 들어 다음 예제에서는 Button 을 사용하여 ControlTemplate의 모양을 변경하는 방법을 보여 줍니다.For example, the following example shows how to change the appearance of a Button by using a ControlTemplate.

<Window 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://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>
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!");
        }
    }
}
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

이 예제에서는 기본 단추 사용자 인터페이스가 진한 파란색 테두리가 있는 Ellipse 로 대체되고 RadialGradientBrush를 사용하여 채워집니다.In this example, the default button user interface has been replaced with an Ellipse that has a dark blue border and is filled using a RadialGradientBrush. ContentPresenter 컨트롤은 Button의 콘텐츠인 "Click Me!"를 표시합니다.The ContentPresenter control displays the content of the Button, "Click Me!" Button 을 클릭하면 Click 이벤트가 Button 컨트롤의 기본 동작의 일부로 여전히 발생합니다.When the Button is clicked, the Click event is still raised as part of the Button control's default behavior. 결과는 다음 그림에 나와 있습니다.The result is shown in the following figure.

타원형 단추 및 두 번째 창An elliptical button and a second window

데이터 템플릿Data Templates

컨트롤 템플릿을 사용하면 컨트롤의 모양을 지정할 수 있는 반면 데이터 템플릿을 사용하면 컨트롤 콘텐츠의 모양을 지정할 수 있습니다.Whereas a control template lets you specify the appearance of a control, a data template lets you specify the appearance of a control's content. 데이터 템플릿은 바인딩된 데이터가 표시되는 방식을 개선하는 데 자주 사용됩니다.Data templates are frequently used to enhance how bound data is displayed. 다음 그림은 각 작업에 이름, 설명 및 우선 순위가 있는 Task 개체의 컬렉션에 바인딩된 ListBox의 기본 모양을 보여 줍니다.The following figure shows the default appearance for a ListBox that is bound to a collection of Task objects, where each task has a name, description, and priority.

기본 모양의 목록 상자A list box with the default appearance

기본 모양은 ListBox에서 예상되는 모양입니다.The default appearance is what you would expect from a ListBox. 그러나 각 작업의 기본 모양은 작업 이름만 포함합니다.However, the default appearance of each task contains only the task name. 작업 이름, 설명 및 우선 순위를 표시하려면 ListBox 을 사용하여 DataTemplate컨트롤의 바인딩된 목록 항목에 대한 기본 모양을 변경해야 합니다.To show the task name, description, and priority, the default appearance of the ListBox control's bound list items must be changed by using a DataTemplate. 다음 XAML은 DataTemplate특성을 사용하여 각 작업에 적용되는 이러한 ItemTemplate 을 정의합니다.The following XAML defines such a DataTemplate, which is applied to each task by using the ItemTemplate attribute.

<Window
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://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>

다음 그림에서는 이 코드의 영향을 보여 줍니다.The following figure shows the effect of this code.

데이터 템플릿을 사용하는 목록 상자Llist box that uses a data template

ListBox의 동작과 전반적인 모양은 유지되고 목록 상자에 표시되는 콘텐츠의 모양만 변경되었습니다.Note that the ListBox has retained its behavior and overall appearance; only the appearance of the content being displayed by the list box has changed.

자세한 내용은 데이터 템플릿 개요를 참조하세요.For more information, see Data Templating Overview.

스타일Styles

스타일을 사용하면 개발자와 디자이너가 해당 제품에 대해 특정 모양을 표준화할 수 있습니다.Styles enable developers and designers to standardize on a particular appearance for their product. WPF는 Style 요소를 기반으로 하는 강력한 스타일 모델을 제공합니다.WPF provides a strong style model, the foundation of which is the Style element. 다음 예제에서는 창에 있는 모든 Button 의 배경색을 Orange로 설정하는 스타일을 만듭니다.The following example creates a style that sets the background color for every Button on a window to Orange.

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://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 컨트롤을 대상으로 하기 때문에 다음 그림과 같이 창에 있는 모든 단추에 스타일이 자동으로 적용됩니다.Because this style targets all Button controls, the style is automatically applied to all the buttons in the window, as shown in the following figure.

두 개의 주황색 단추Two orange buttons

자세한 내용은 스타일 지정 및 템플릿을 참조하세요.For more information, see Styling and Templating.

리소스Resources

응용 프로그램의 컨트롤은 글꼴 및 배경색부터 컨트롤 템플릿, 데이터 템플릿 및 스타일까지 모든 항목을 포함할 수 있는 동일한 모양을 공유해야 합니다.Controls in an application should share the same appearance, which can include anything from fonts and background colors to control templates, data templates, and styles. 사용자 인터페이스 리소스에 대한 WPF 지원을 사용하여 재사용을 위해 이러한 리소스를 단일 위치에 캡슐화할 수 있습니다.You can use WPF's support for user interface resources to encapsulate these resources in a single location for reuse.

다음 예제에서는 ButtonLabel에서 공유하는 공통 배경색을 정의합니다.The following example defines a common background color that is shared by a Button and a Label.

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://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 속성 요소를 사용하여 배경색 리소스를 구현합니다.This example implements a background color resource by using the Window.Resources property element. 이 리소스는 Window의 모든 자식에서 사용할 수 있습니다.This resource is available to all children of the Window. 다음을 포함하여 다양한 리소스 범위가 있습니다(확인되는 순서대로 나열됨).There are a variety of resource scopes, including the following, listed in the order in which they are resolved:

  1. 개별 컨트롤(상속된 System.Windows.FrameworkElement.Resources 속성 사용)An individual control (using the inherited System.Windows.FrameworkElement.Resources property).

  2. Window 또는 Page (또한 상속된 System.Windows.FrameworkElement.Resources 속성 사용)A Window or a Page (also using the inherited System.Windows.FrameworkElement.Resources property).

  3. Application ( System.Windows.Application.Resources 속성 사용)An Application (using the System.Windows.Application.Resources property).

    다양한 범위는 리소스를 정의 및 공유하는 방법과 관련해서 유연성을 제공합니다.The variety of scopes gives you flexibility with respect to the way in which you define and share your resources.

    리소스를 특정 범위에 직접 연결하는 대신, 응용 프로그램의 다른 부분에서 참조할 수 있는 별도 ResourceDictionary 를 사용하여 하나 이상의 리소스를 패키지할 수 있습니다.As an alternative to directly associating your resources with a particular scope, you can package one or more resources by using a separate ResourceDictionary that can be referenced in other parts of an application. 예를 들어 다음 예제에서는 리소스 사전의 기본 배경색을 정의합니다.For example, the following example defines a default background color in a resource dictionary.

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

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

  <!-- Define other resources -->
</ResourceDictionary>

다음 예제에서는 응용 프로그램 간에 공유되도록 이전 예제에서 정의된 리소스 사전을 참조합니다.The following example references the resource dictionary defined in the previous example so that it is shared across an application.

<Application
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://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 지원의 기반이 됩니다.Resources and resource dictionaries are the foundation of WPF support for themes and skins.

자세한 내용은 리소스 개요를 참조하세요.For more information, see Resources Overview.

사용자 지정 컨트롤Custom Controls

WPF는 다양한 사용자 지정 지원을 제공하지만 기존 WPF 컨트롤이 응용 프로그램 또는 해당 사용자의 요구를 충족하지 않는 경우가 발생할 수 있습니다.Although WPF provides a host of customization support, you may encounter situations where existing WPF controls do not meet the needs of either your application or its users. 이 오류는 다음과 같은 경우에 발생할 수 있습니다.This can occur when:

  • 기존 WPF 구현의 모양과 느낌을 사용자 지정하여 필요한 사용자 인터페이스를 만들 수 없는 경우The user interface that you require cannot be created by customizing the look and feel of existing WPF implementations.

  • 필요한 동작이 기존 WPF 구현에서 지원되지 않는 경우(또는 쉽게 지원되지 않는 경우)The behavior that you require is not supported (or not easily supported) by existing WPF implementations.

    그러나 이제 세 가지 WPF 모델 중 하나를 활용하여 새 컨트롤을 만들 수 있습니다.At this point, however, you can take advantage of one of three WPF models to create a new control. 각 모델은 특정 시나리오를 대상으로 하며, 특정 WPF 기본 클래스에서 사용자 지정 컨트롤을 파생시켜야 합니다.Each model targets a specific scenario and requires your custom control to derive from a particular WPF base class. 세 가지 모델은 다음과 같습니다.The three models are listed here:

  • 사용자 정의 컨트롤 모델.User Control Model. 사용자 지정 컨트롤은 UserControl 에서 파생되며 하나 이상의 다른 컨트롤로 구성됩니다.A custom control derives from UserControl and is composed of one or more other controls.

  • 컨트롤 모델.Control Model. 사용자 지정 컨트롤은 Control 에서 파생되며 대부분의 WPF 컨트롤과 마찬가지로 템플릿을 사용하여 모양과 동작을 구분하는 구현을 작성하는 데 사용됩니다.A custom control derives from Control and is used to build implementations that separate their behavior from their appearance using templates, much like the majority of WPF controls. Control 에서 파생시키는 경우 사용자 정의 컨트롤보다 더 자유롭게 사용자 지정 사용자 인터페이스를 만들 수 있지만 더 많은 노력이 필요할 수 있습니다.Deriving from Control allows you more freedom for creating a custom user interface than user controls, but it may require more effort.

  • 프레임워크 요소 모델.Framework Element Model. 사용자 지정 컨트롤은 모양이 사용자 지정 렌더링 논리(템플릿 아님)에 의해 정의되는 경우 FrameworkElement 에서 파생됩니다.A custom control derives from FrameworkElement when its appearance is defined by custom rendering logic (not templates).

    다음 예제에서는 UserControl에서 파생되는 사용자 지정 숫자 위로/아래로 컨트롤을 보여 줍니다.The following example shows a custom numeric up/down control that derives from UserControl.

    <UserControl
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://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>
    
    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
        }
    }
    
    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
    

    다음 예제에서는 사용자 정의 컨트롤을 Window에 통합하는 데 필요한 XAML을 보여 줍니다.The next example illustrates the XAML that is required to incorporate the user control into a Window.

    <Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://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 컨트롤을 보여 줍니다.The following figure shows the NumericUpDown control hosted in a Window.

    사용자 지정 UserControlA custom UserControl

    사용자 지정 컨트롤에 대한 자세한 내용은 컨트롤 제작 개요를 참조하세요.For more information on custom controls, see Control Authoring Overview.

WPF 모범 사례WPF Best Practices

모든 개발 플랫폼과 마찬가지로 WPF를 다양한 방법으로 사용하여 원하는 결과를 얻을 수 있습니다.As with any development platform, WPF can be used in a variety of ways to achieve the desired result. WPF 응용 프로그램이 필요한 사용자 환경을 제공하고 일반적인 사용자 요구를 충족하도록 하는 한 가지 방법으로 접근성, 전역화 및 지역화, 성능에 대한 권장 모범 사례가 있습니다.As a way of ensuring that your WPF applications provide the required user experience and meet the demands of the audience in general, there are recommended best practices for accessibility, globalization and localization, and performance. 자세한 내용은 다음을 참조하세요.See the following for more information:

요약Summary

WPF는 시각적으로 멋진 다양한 클라이언트 응용 프로그램을 빌드하기 위한 포괄적인 프레젠테이션 기술입니다.WPF is a comprehensive presentation technology for building a wide variety of visually stunning client applications. 이 소개에서는 WPF의 주요 기능을 살펴봤습니다.This introduction has provided a look at the key features of WPF.

다음 단계는 WPF 응용 프로그램을 빌드하는 것입니다.The next step is to build WPF applications!

빌드하는 동안 이 소개로 돌아와서 주요 기능을 복습하고 이 소개에 포함된 기능의 자세한 설명에 대한 참조를 찾을 수 있습니다.As you build them, you can come back to this introduction for a refresher on the key features and to find references to more detailed coverage of the features covered in this introduction.

참고 항목See Also

WPF 시작 Getting Started with WPF
Windows Presentation Foundation으로 최신 데스크톱 응용 프로그램 만들기 Create Modern Desktop Applications with Windows Presentation Foundation
Windows Presentation FoundationWindows Presentation Foundation