Windows Presentation Foundation 개요 – 번역

글쓴이 / / C#, WPF

Overview 개요

https://learn.microsoft.com/en-us/dotnet/desktop/wpf/overview/?view=netdesktop-8.0

Desktop Guide (WPF .NET)
(데스크톱 가이드)

Welcome to the Desktop Guide for Windows Presentation Foundation (WPF), a UI framework that is resolution-independent and uses a vector-based rendering engine, built to take advantage of modern graphics hardware.
(Windows Presentation Foundation (WPF) 데스크톱 가이드에 오신 것을 환영합니다. WPF는 해상도에 독립적인 UI 프레임워크로, 벡터 기반의 렌더링 엔진을 사용하여 현대적인 그래픽 하드웨어의 성능을 활용할 수 있도록 설계되었습니다.)

WPF provides a comprehensive set of application-development features that include Extensible Application Markup Language (XAML), controls, data binding, layout, 2D and 3D graphics, animation, styles, templates, documents, media, text, and typography.
(WPF는 Extensible Application Markup Language (XAML), 컨트롤, 데이터 바인딩, 레이아웃, 2D 및 3D 그래픽, 애니메이션, 스타일, 템플릿, 문서, 미디어, 텍스트 및 타이포그래피를 포함한 광범위한 애플리케이션 개발 기능을 제공합니다.)

WPF is part of .NET, so you can build applications that incorporate other elements of the .NET API.
(WPF는 .NET의 일부이므로, .NET API의 다른 요소들을 통합한 애플리케이션을 개발할 수 있습니다.)

There are two implementations of WPF:
(WPF에는 두 가지 구현 방식이 있습니다.)

  • NET version (this guide):
    (.NET 버전(이 가이드):)

An open-source implementation of WPF hosted on GitHub, which runs on .NET.
(GitHub에서 호스팅되는 WPF의 오픈 소스 구현 버전이며, .NET에서 실행됩니다.

The XAML designer requires, at a minimum, Visual Studio 2019 version 16.8. But depending on your version of .NET, you may be required to use a newer version of Visual Studio.
XAML 디자이너는 최소한 Visual Studio 2019 버전 16.8이 필요합니다. 그러나 사용 중인 .NET 버전에 따라 더 최신 버전의 Visual Studio가 필요할 수 있습니다.)

Even though .NET is a cross-platform technology, WPF only runs on Windows.
(.NET은 크로스 플랫폼 기술이지만, WPF는 Windows에서만 실행됩니다.)

  • .NET Framework 4 version:
    (.NET Framework 4 버전:)

The .NET Framework implementation of WPF that’s supported by Visual Studio 2019 and Visual Studio 2017.
(Visual Studio 2019 및 Visual Studio 2017에서 지원되는 .NET Framework 구현 버전의 WPF입니다.)

.NET Framework 4 is a Windows-only version of .NET and is considered a Windows Operating System component.
(.NET Framework 4는 Windows에서만 사용 가능한 .NET 버전이며, Windows 운영 체제의 구성 요소로 간주됩니다. )

This version of WPF is distributed with .NET Framework. For more information about the .NET Framework version of WPF, see Introduction to WPF for .NET Framework.
이 WPF 버전은 .NET Framework와 함께 배포됩니다. .NET Framework 버전의 WPF에 대한 자세한 내용은 “Introduction to WPF for .NET Framework”를 참조하십시오.)

This overview is intended for newcomers and covers the key capabilities and concepts of WPF. To learn how to create a WPF app, see Tutorial: Create a new WPF app.
(이 개요는 WPF에 처음 입문하는 사람들을 위한 것이며, WPF의 주요 기능과 개념을 다룹니다.)

To learn how to create a WPF app, see Tutorial: Create a new WPF app.
(WPF 앱을 만드는 방법을 배우려면 “Tutorial: Create a new WPF app“를 참조하십시오.)

Why upgrade from .NET Framework
(.NET Framework에서 업그레이드해야 하는 이유)

When you are upgrading your application from .NET Framework to .NET, you will benefit from:
(.NET Framework에서 .NET으로 애플리케이션을 업그레이드하면 다음과 같은 혜택을 얻을 수 있습니다:)

  • Better performance
    (더 나은 성능)
  • New .NET APIs
    (새로운 .NET API)
  • The latest language improvements
    (최신 언어 개선 사항)
  • Improved accessibility and reliability
    (향상된 접근성 및 안정성)
  • Updated tooling and more
    (업데이트된 도구 및 기타)

To learn how to upgrade your application, see How to upgrade a WPF desktop app to .NET 7.
(애플리케이션 업그레이드 방법을 알아보려면, “How to upgrade a WPF desktop app to .NET 7″을 참조하십시오.)

Program with WPF
(WPF로 프로그래밍하기)

WPF exists as a subset of .NET types that are, mostly located in the System.Windows namespace.
(WPF는 주로 System.Windows 네임스페이스에 위치한 .NET 타입의 subset으로 존재합니다.)

If you have previously built applications with .NET with frameworks like ASP.NET and Windows Forms, the fundamental WPF programming experience should be familiar, you:
(이전에 ASP.NET 또는 Windows Forms 같은 프레임워크로 .NET 애플리케이션을 만들어 본 경험이 있다면, 기본적인 WPF 프로그래밍 경험은 익숙할 것입니다. 예를 들어,)

  • Instantiate classes
    (클래스를 인스턴스화하고)
  • Set properties
    (속성을 설정하며)
  • Call methods
    (메서드를 호출하고)
  • Handle events
    (이벤트를 처리하는 방식입니다.)

WPF includes more programming constructs that enhance properties and events: dependency properties and routed events.
(WPF는 속성과 이벤트를 확장하는 추가적인 프로그래밍 구조를 포함합니다: 의존성 속성과 라우팅된 이벤트.)

Markup and code-behind
(마크업과 코드 비하인드)

WPF lets you develop an application using both markup and code-behind, an experience with which ASP.NET developers should be familiar.
(WPF는 마크업과 코드 비하인드를 사용하여 애플리케이션을 개발할 수 있게 해줍니다. 이는 ASP.NET 개발자들에게 친숙한 방식입니다.)

You generally use XAML markup to implement the appearance of an application while using managed programming languages (code-behind) to implement its behavior.
(일반적으로 XAML 마크업을 사용하여 애플리케이션의 외관을 구현하고, 관리되는 프로그래밍 언어(코드 비하인드)를 사용하여 애플리케이션의 동작을 구현합니다.)

This separation of appearance and behavior has the following benefits:
(이러한 외관과 동작의 분리는 다음과 같은 이점이 있습니다:)

  • Development and maintenance costs are reduced because appearance-specific markup isn’t 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.
    (디자이너가 애플리케이션의 외관을 구현하는 동안 개발자가 동작을 구현할 수 있어 개발 효율성이 높아집니다.)
  • Globalization and localization for WPF applications is simplified.
    (WPF 애플리케이션의 글로벌화 및 현지화가 간소화됩니다.)
Markup (마크업)

XAML is an XML-based markup language that implements an application’s appearance declaratively.
(XAML은 XML 기반의 마크업 언어로, 애플리케이션의 외관을 선언적으로 구현합니다.) [XAML (Extensible Application Markup Language]

You typically use it to define windows, dialog boxes, pages, and user controls, and to fill them with controls, shapes, and graphics.
(일반적으로 창, 대화 상자, 페이지, 사용자 컨트롤을 정의하고, 이를 컨트롤, 도형, 그래픽으로 채우는 데 사용됩니다.)

The following example uses XAML to implement the appearance of a window that contains a single button:
(다음 예제는 XAML을 사용하여 단일 버튼이 포함된 창의 외관을 구현한 것입니다:)

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    <!-- XAML 문서의 기본 네임스페이스를 정의, "xmlns"는 "XML Namespace"의 약자-->
    Title="Window with button"
    Width="250" Height="100">

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

</Window>

Specifically, this XAML defines a window and a button by using the Window and Button elements.
(구체적으로, 이 XAML은 Window 및 Button 요소를 사용하여 창과 버튼을 정의합니다.)

Each element is configured with attributes, such as the Window element’s Title attribute to specify the window’s title-bar text.
(각 요소는 속성으로 구성되어 있으며, 예를 들어 Window 요소의 Title 속성을 사용하여 창의 제목 표시줄 텍스트를 지정합니다.)

At run time, WPF converts the elements and attributes that are defined in markup to instances of WPF classes.
(실행 시간에 WPF는 마크업에서 정의된 요소와 속성을 WPF 클래스의 인스턴스로 변환합니다.)

For example, the Window element is converted to an instance of the Window class whose Title property is the value of the Title attribute.
(예를 들어, Window 요소는 Title 속성이 Title 속성의 값인 Window 클래스의 인스턴스로 변환됩니다.)

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

Since XAML is XML-based, the UI that you compose with it is assembled in a hierarchy of nested elements that is known as an element tree.
(XAML이 XML 기반이기 때문에, 이를 사용하여 구성한 UI는 요소 트리라고 알려진 중첩 요소의 계층 구조로 조립됩니다.)

The element tree provides a logical and intuitive way to create and manage UIs.
(요소 트리는 UI를 생성하고 관리하는 논리적이고 직관적인 방법을 제공합니다.)

Code-behind
(코드 비하인드)

The main behavior of an application is to implement the functionality that responds to user interactions.
(애플리케이션의 주요 동작은 사용자 상호작용에 응답하는 기능을 구현하는 것입니다.)

For example clicking a menu or button, and calling business logic and data access logic in response.
(예를 들어, 메뉴나 버튼을 클릭하고 이에 응답하여 비즈니스 로직 및 데이터 접근 로직을 호출하는 것입니다.)

In WPF, this behavior is implemented in code that is associated with markup.
(WPF에서는 이러한 동작이 마크업과 연관된 코드로 구현됩니다.)

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"  <!-- XAML의 기본 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>

The updated markup defines the xmlnsnamespace and maps it to the schema that adds support for the code-behind types.
(업데이트된 마크업은 xmlns네임스페이스를 정의하고 이를 코드 비하인드 유형에 대한 지원을 추가하는 스키마에 매핑합니다.)

The xattribute is used to associate a code-behind class to this specific XAML markup.
(x속성은 이 특정 XAML 마크업과 코드 비하인드 클래스를 연관시키는 데 사용됩니다.)

Considering this attribute is declared on the <Window> element, the code-behind class must inherit from the Window class.
(이 속성이 <Window> 요소에 선언되었기 때문에, 코드 비하인드 클래스는 Window 클래스에서 상속해야 합니다.)

using System.Windows;  // WPF의 기본 네임스페이스를 사용합니다.

namespace SDKSample  // SDKSample 네임스페이스를 정의합니다.
{
    public partial class AWindow : Window  // AWindow 클래스는 Window 클래스를 상속합니다.
    {
        public AWindow()  // AWindow 생성자
        {
            // InitializeComponent 호출은 마크업에서 정의된 UI와 이 클래스와 병합하는 데 필요합니다. 
            // 여기에는 속성 설정과 이벤트 핸들러 등록이 포함됩니다.
            InitializeComponent();
        }

        // 버튼 클릭 이벤트 핸들러
        void button_Click(object sender, RoutedEventArgs e)  
        {
            // 버튼이 클릭되면 메시지 박스를 표시합니다.
            MessageBox.Show("Hello, Windows Presentation Foundation!");  
        }
    }
}

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는 코드 비하인드 클래스의 생성자에서 호출되어 마크업에서 정의된 UI와 코드 비하인드 클래스를 병합합니다.)

(InitializeComponent is generated for you when your application is built, which is why you don’t need to implement it manually.)
(InitializeComponent는 애플리케이션이 빌드될 때 자동으로 생성되므로 수동으로 구현할 필요가 없습니다.)

The combination of xand InitializeComponent ensure that your implementation is correctly initialized whenever it’s created.
(x와 InitializeComponent의 조합은 클래스가 생성될 때마다 구현이 올바르게 초기화되도록 보장합니다.)

Notice that in the markup the <Button> element defined a value of button_Click for the Click attribute.
(마크업에서 <Button> 요소가 Click 속성에 button_Click 값을 정의한 것을 주목하십시오.)

With the markup and code-behind initialized and working together, the Click event for the button is automatically mapped to the button_Click method.
(마크업과 코드 비하인드가 초기화되고 함께 작동하면 버튼의 Click 이벤트가 자동으로 button_Click 메서드에 매핑됩니다.)

When the button is clicked, the event handler is invoked and a message box is displayed by calling the System.Windows.MessageBox.Show method.
(버튼이 클릭되면 이벤트 핸들러가 호출되고 System.Windows.MessageBox.Show 메서드를 호출하여 메시지 박스가 표시됩니다.)

The following figure shows the result when the button is clicked:
(다음 그림은 버튼이 클릭되었을 때의 결과를 보여줍니다:)

Input and commands (입력 및 명령)

Controls most often detect and respond to user input.
(컨트롤은 주로 사용자 입력을 감지하고 이에 응답합니다.)

The WPF input system uses both direct and routed events to support text input, focus management, and mouse positioning.
(WPF 입력 시스템은 텍스트 입력, 포커스 관리 및 마우스 위치 지정을 지원하기 위해 직접 이벤트와 라우팅 이벤트를 모두 사용합니다.)

Applications often have complex input requirements.
(애플리케이션은 종종 복잡한 입력 요구 사항을 가지고 있습니다.)

WPF provides a command system that separates user-input actions from the code that responds to those actions.
(WPF는 사용자 입력 작업과 이러한 작업에 응답하는 코드를 분리하는 명령 시스템을 제공합니다.)

The command system allows for multiple sources to invoke the same command logic.
(명령 시스템은 여러 소스가 동일한 명령 논리를 호출할 수 있도록 허용합니다.)

For example, take the common editing operations used by different applications: Copy, Cut, and Paste.
(예를 들어, 다양한 애플리케이션에서 사용되는 일반적인 편집 작업인 복사(Copy), 잘라내기(Cut) 및 붙여넣기(Paste)를 고려해 보십시오.)

These operations can be invoked by using different user actions if they’re implemented by using commands.
(이 작업은 명령을 사용하여 구현된다면 서로 다른 사용자 작업을 통해 호출될 수 있습니다.)

Controls (컨트롤)

The user experiences that are delivered by the application model are constructed controls.
(애플리케이션 모델을 통해 제공되는 사용자 경험은 구성된 컨트롤입니다.)

In WPF, control is an umbrella term that applies to a category of WPF classes that have the following characteristics:
(WPF에서 ‘컨트롤’은 다음과 같은 특성을 가진 WPF 클래스의 범주에 적용되는 포괄적인 용어입니다.)

  • Hosted in either a window or a page.
    (창 또는 페이지에 호스팅됩니다.)
  • Have a user interface.
    (사용자 인터페이스를 가지고 있습니다.)
  • Implement some behavior.
    (일부 동작을 구현합니다.)

For more information, see Controls.
(자세한 내용은 Controls를 참조하십시오.)

WPF controls by function (WPF 컨트롤 기능별)

The built-in WPF controls are listed here:
(내장 WPF 컨트롤은 다음과 같습니다:)

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.
(모든 레이아웃의 주요 요구 사항은 창 크기 및 표시 설정의 변경에 적응하는 것입니다.)

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.
(이러한 상황에서 레이아웃을 조정하기 위한 코드를 작성하도록 강요하는 대신, WPF는 우수하고 확장 가능한 레이아웃 시스템을 제공합니다.)

The cornerstone of the layout system is relative positioning, which increases the ability to adapt to changing window and display conditions.
(레이아웃 시스템의 초석은 상대 위치 지정으로, 이는 변화하는 창 및 표시 조건에 적응할 수 있는 능력을 증가시킵니다.)

The layout system also manages the negotiation between controls to determine the layout.
(레이아웃 시스템은 또한 레이아웃을 결정하기 위해 컨트롤 간의 협상을 관리합니다.)

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.
(두 번째로, 부모가 컨트롤이 가질 수 있는 공간을 알려줍니다.)

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:
(그리드, 스택 및 도킹과 같은 일반적인 레이아웃을 위해 WPF는 여러 레이아웃 컨트롤을 포함합니다:)

  • Canvas: Child controls provide their own layout.
    (Canvas: 자식 컨트롤이 자체 레이아웃을 제공합니다.)
  • DockPanel: Child controls are aligned to the edges of the panel.
    (DockPanel: 자식 컨트롤이 패널의 가장자리에 정렬됩니다.)
  • Grid: Child controls are positioned by rows and columns.
    (Grid: 자식 컨트롤이 행과 열에 따라 위치 지정됩니다.)
  • StackPanel: Child controls are stacked either vertically or horizontally.
    (StackPanel: 자식 컨트롤이 수직 또는 수평으로 쌓입니다.)
  • VirtualizingStackPanel: Child controls are virtualized and arranged on a single line that is either horizontally or vertically oriented.
    (VirtualizingStackPanel: 자식 컨트롤이 가상화되어 수평 또는 수직 방향의 단일 줄에 배치됩니다.)
  • WrapPanel: Child controls are positioned in left-to-right order and wrapped to the next line when there isn’t enough space on the current line.
    (WrapPanel: 자식 컨트롤이 왼쪽에서 오른쪽으로 배치되고, 현재 줄에 충분한 공간이 없으면 다음 줄로 감싸집니다.)

The following example uses a DockPanel to lay out several TextBox controls:
(다음 예제에서는 DockPanel을 사용하여 여러 TextBox 컨트롤을 배치합니다:)

<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을 사용하여 4개의 텍스트 박스를 배치 -->
  <DockPanel>
    <!-- 이 TextBox는 DockPanel의 상단에 배치됨 -->
    <TextBox DockPanel.Dock="Top">Dock = "Top"</TextBox>

    <!-- 이 TextBox는 DockPanel의 하단에 배치됨 -->
    <TextBox DockPanel.Dock="Bottom">Dock = "Bottom"</TextBox>

    <!-- 이 TextBox는 DockPanel의 왼쪽에 배치됨 -->
    <TextBox DockPanel.Dock="Left">Dock = "Left"</TextBox>

    <!-- 이 TextBox는 DockPanel에서 남은 공간을 채움 -->
    <TextBox Background="White">이 TextBox는 남은 공간을 채웁니다.</TextBox>
  </DockPanel>

</Window>

The DockPanel allows the child TextBox controls to tell it how to arrange them.
(DockPanel은 자식 TextBox 컨트롤들이 자신을 어떻게 배치할지 지정할 수 있도록 합니다.)

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.
(이를 위해 DockPanel은 Dock 연결 속성을 구현하여 자식 컨트롤들이 각각 자신만의 Dock 스타일을 지정할 수 있게 합니다.)

Note

A property that’s implemented by a parent control for use by child controls is a WPF construct called an attached property.
(부모 컨트롤에 의해 구현되어 자식 컨트롤에서 사용되는 속성은 WPF 구조에서 “attached property”이라고 불립니다.)

The following figure shows the result of the XAML markup in the preceding example:
(다음 그림은 이전 예제의 XAML 마크업 결과를 보여줍니다.)

Data binding (데이터 바인딩)

Most applications are created to provide users with the means to view and edit data.
(대부분의 애플리케이션은 사용자에게 데이터를 보고 수정할 수 있는 수단을 제공하기 위해 만들어집니다.)

For WPF applications, the work of storing and accessing data is already provided for by many different .NET data access libraries such as SQL and Entity Framework Core.
(WPF 애플리케이션의 경우, SQL이나 Entity Framework Core와 같은 다양한 .NET 데이터 액세스 라이브러리를 통해 데이터 저장 및 액세스 작업이 이미 제공됩니다.)

After the data is accessed and loaded into an application’s managed objects, the hard work for WPF applications begins.
(데이터가 애플리케이션의 관리 객체에 액세스되고 로드된 후, WPF 애플리케이션의 주요 작업이 시작됩니다.)

Essentially, this involves two things:
(본질적으로 두 가지 작업이 필요합니다:)

Copying the data from the managed objects into controls, where the data can be displayed and edited.
(관리 객체에서 데이터를 컨트롤로 복사하여 데이터를 표시하고 수정할 수 있도록 합니다.)

Ensuring that changes made to data by using controls are copied back to the managed objects.
(컨트롤을 사용하여 데이터에 가해진 변경 사항이 다시 관리 객체로 복사되도록 합니다.)

To simplify application development, WPF provides a powerful data binding engine to automatically handle these steps.
(애플리케이션 개발을 단순화하기 위해 WPF는 이러한 단계를 자동으로 처리하는 강력한 데이터 바인딩 엔진을 제공합니다.)

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).
(데이터 바인딩 엔진의 핵심 단위는 Binding 클래스이며, 이 클래스는 컨트롤(바인딩 대상)과 데이터 객체(바인딩 소스)를 바인딩하는 역할을 합니다.)

This relationship is illustrated by the following figure:
(이 관계는 아래 그림에서 설명됩니다.)

WPF supports declaring bindings in the XAML markup directly.
(WPF는 XAML 마크업에서 직접 바인딩을 선언하는 것을 지원합니다.)

For example, the following XAML code binds the Text property of the TextBox to the Name property of an object using the “{Binding … }” XAML syntax.
(예를 들어, 아래 XAML 코드는 {Binding ... } XAML 구문을 사용하여 TextBox의 Text 속성을 객체의 Name 속성에 바인딩합니다.)

This assumes there’s a data object set to the DataContext property of the Window with a Name property.
(이는 Name 속성을 가진 데이터 객체가 Window의 DataContext 속성에 설정되어 있다고 가정합니다.)

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

   <!-- 이 Window 요소는 XAML에서 WPF 응용 프로그램의 창을 정의합니다.
        xmlns는 해당 네임스페이스를 지정하여 WPF가 해당 요소를 식별하고 구문을 처리할 수 있도록 해줍니다.
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"는 WPF 프레젠테이션의 기본 네임스페이스를 나타냅니다.
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"는 XAML의 확장 기능을 포함하는 네임스페이스입니다.
        x:Class="SDKSample.DataBindingWindow"는 이 XAML 파일이 연결될 코드 비하인드 클래스의 이름을 지정합니다. -->

   <!-- TextBox 요소를 정의하며, 여기서 Text 속성은 데이터 바인딩을 통해 외부 데이터 소스에 연결됩니다.
        Name 속성을 "personNameTextBox"로 지정하여 코드 비하인드에서 이 TextBox를 참조할 수 있게 합니다.
        Text="{Binding Path=Name}"는 데이터 바인딩 구문으로, 데이터 소스 객체의 Name 속성과 TextBox의 Text 속성을 연결합니다.
        이 데이터 소스는 Window의 DataContext에 설정된 객체여야 하며, 그 객체는 Name이라는 속성을 가지고 있어야 합니다. -->
   
   <TextBox Name="personNameTextBox" Text="{Binding Path=Name}" />

</Window>

The WPF data binding engine provides more than just binding, it provides validation, sorting, filtering, and grouping.
(WPF 데이터 바인딩 엔진은 단순한 바인딩만 제공하는 것이 아니라, 유효성 검사, 정렬, 필터링, 그룹화도 제공합니다.)

Furthermore, data binding supports the use of data templates to create custom user interface for bound data.
(더 나아가, 데이터 바인딩은 데이터 템플릿을 사용하여 바인딩된 데이터에 맞는 사용자 정의 인터페이스를 만들 수 있도록 지원합니다.)

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

Graphics & animation

WPF provides an extensive and flexible set of graphics features that have the following benefits:
(WPF는 다음과 같은 이점을 가진 광범위하고 유연한 그래픽 기능 세트를 제공합니다:)

  • Resolution-independent and device-independent graphics (해상도 독립적이고 장치 독립적인 그래픽)
    The basic unit of measurement in the WPF graphics system is the device-independent pixel, which is 1/96th of an inch, and provides the foundation for resolution-independent and device-independent rendering.
    ( WPF 그래픽 시스템의 기본 측정 단위는 장치 독립적인 픽셀로, 이는 1/96 인치이며 해상도 독립적이고 장치 독립적인 렌더링의 기초를 제공합니다.)
    Each device-independent pixel automatically scales to match the dots-per-inch (dpi) setting of the system it renders on.
    (각 장치 독립적인 픽셀은 자동으로 렌더링하는 시스템의 도트 퍼 인치(dpi) 설정에 맞춰 크기가 조정됩니다.)
  • Improved precision (정밀도 향상)
    The WPF coordinate system is measured with double-precision floating-point numbers rather than single-precision.
    (WPF 좌표 시스템은 단일 정밀도 대신 이중 정밀도 부동 소수점 숫자로 측정됩니다.)
    Transformations and opacity values are also expressed as double-precision.
    (변환 및 불투명도 값도 이중 정밀도로 표현됩니다. )
    WPF also supports a wide color gamut (scRGB) and provides integrated support for managing inputs from different color spaces.
    (WPF는 또한 넓은 색 영역(scRGB)을 지원하며 다양한 색 공간에서 입력을 관리하기 위한 통합 지원을 제공합니다.)
  • Advanced graphics and animation support (고급 그래픽 및 애니메이션 지원)
    WPF simplifies graphics programming by managing animation scenes for you; there’s no need to worry about scene processing, rendering loops, and bilinear interpolation.
    (WPF는 애니메이션 장면을 관리하여 그래픽 프로그래밍을 간소화합니다. 장면 처리, 렌더링 루프 및 양선형 보간에 대해 걱정할 필요가 없습니다.)
    Additionally, WPF provides hit-testing support and full alpha-compositing support.
    (또한 WPF는 히트 테스트 지원 및 전체 알파 합성 지원을 제공합니다.)
  • Hardware acceleration (하드웨어 가속)
    The WPF graphics system takes advantage of graphics hardware to minimize CPU usage.
    (WPF 그래픽 시스템은 그래픽 하드웨어를 활용하여 CPU 사용을 최소화합니다.)

2D graphics

WPF provides a library of common vector-drawn 2D shapes, such as the rectangles and ellipses.
(WPF는 사각형 및 타원과 같은 일반적인 벡터로 그려진 2D 도형의 라이브러리를 제공합니다.)

The shapes aren’t just for display; shapes implement many of the features that you expect from controls, including keyboard and mouse input.
(이 도형들은 단순히 표시용이 아니며, 키보드 및 마우스 입력을 포함하여 컨트롤에서 기대할 수 있는 많은 기능을 구현합니다.)

The 2D shapes provided by WPF cover the standard set of basic shapes.
(WPF에서 제공하는 2D 도형은 기본 도형의 표준 세트를 포함합니다.)

However, you may need to create custom shapes to help the design of a customized user interface.
(하지만 맞춤형 사용자 인터페이스 설계를 위해 사용자 정의 도형을 생성해야 할 수도 있습니다.)

WPF provides geometries to create a custom shape that can be drawn directly, used as a brush, or used to clip other shapes and controls.
(WPF는 직접 그릴 수 있거나 브러시로 사용되거나 다른 도형 및 컨트롤을 자르는 데 사용할 수 있는 사용자 정의 도형을 만들기 위한 기하학을 제공합니다.)

For more information, see Geometry overview.
(자세한 내용은 기하학 개요를 참조하세요.)

A subset of WPF 2D capabilities includes visual effects, such as gradients, bitmaps, drawings, painting with videos, rotation, scaling, and skewing.
(WPF 2D 기능의 하위 집합에는 그라디언트, 비트맵, 드로잉, 비디오로 그리기, 회전, 스케일링 및 왜곡과 같은 시각 효과가 포함됩니다.)

These effects are all achieved with brushes.
(이러한 효과는 모두 브러시를 사용하여 얻을 수 있습니다.)

The following figure shows some examples:
(다음 그림은 몇 가지 예를 보여줍니다:)

For more information, see WPF brushes overview.
(자세한 내용은 WPF 브러시 개요를 참조하세요.)

3D rendering

WPF also includes 3D rendering capabilities that integrate with 2D graphics to allow the creation of more exciting and interesting user interfaces.
(WPF는 2D 그래픽과 통합된 3D 렌더링 기능을 포함하여 보다 흥미롭고 매력적인 사용자 인터페이스를 생성할 수 있게 합니다.)

For example, the following figure shows 2D images rendered onto 3D shapes:
(예를 들어, 다음 그림은 3D 도형에 렌더링된 2D 이미지를 보여줍니다.)

For more information, see 3D graphics overview.
(자세한 내용은 3D 그래픽 개요를 참조하세요.)

Animation

WPF animation support lets you make controls grow, shake, spin, and fade, to create interesting page transitions, and more. You can animate most WPF classes, even custom classes.
(WPF 애니메이션 지원을 통해 컨트롤을 성장, 흔들기, 회전, 페이드하여 흥미로운 페이지 전환 등을 만들 수 있습니다. 대부분의 WPF 클래스, 심지어 사용자 지정 클래스도 애니메이션화할 수 있습니다.)

The following figure shows a simple animation in action:
(다음 그림은 간단한 애니메이션이 실제로 작동하는 모습을 보여줍니다:)

For more information, see Animation overview.

(자세한 내용은 Animation 개요를 참조하세요.)

Text and typography

To provide high-quality text rendering, WPF offers the following features:
(고품질 텍스트 렌더링을 제공하기 위해 WPF는 다음과 같은 기능을 제공합니다:)

  • OpenType font support.
    (OpenType 글꼴 지원)
  • ClearType enhancements.
    (ClearType 향상)
  • High performance that takes advantage of hardware acceleration.
    (하드웨어 가속을 활용한 높은 성능)
  • Integration of text with media, graphics, and animation.
    (미디어, 그래픽 및 애니메이션과의 텍스트 통합)
  • International font support and fallback mechanisms.
    (다국적 글꼴 지원 및 대체 메커니즘)

As a demonstration of text integration with graphics, the following figure shows the application of text decorations:
(그래픽과의 텍스트 통합을 보여주는 예로, 다음 그림은 텍스트 장식의 적용을 보여줍니다.)

For more information, see Typography in Windows Presentation Foundation.
(자세한 내용은 Typography in Windows Presentation Foundation를 참조하십시오.)

Customize WPF apps (기본 WPF 앱 사용자 정의)

Up to this point, you’ve seen the core WPF building blocks for developing applications:
(지금까지 WPF 애플리케이션 개발을 위한 핵심 구성 요소를 살펴보았습니다:)

  • You use the application model to host and deliver application content, which consists mainly of controls.
    (주로 컨트롤로 구성된 애플리케이션 콘텐츠를 호스팅하고 제공하기 위해 애플리케이션 모델을 사용합니다.)
  • To simplify the arrangement of controls in a user interface, you use the WPF layout system.
    (사용자 인터페이스에서 컨트롤의 배치를 단순화하기 위해 WPF 레이아웃 시스템을 사용합니다.)
  • You use data binding to reduce the work of integrating your user interface with data.
    (데이터와 사용자 인터페이스의 통합 작업을 줄이기 위해 데이터 바인딩을 사용합니다.)
  • To enhance the visual appearance of your application, you use the comprehensive range of graphics, animation, and media support provided by WPF.
    (애플리케이션의 시각적 외관을 향상시키기 위해 WPF에서 제공하는 다양한 그래픽, 애니메이션 및 미디어 지원을 사용합니다.)

Often, though, the basics aren’t enough for creating and managing a truly distinct and visually stunning user experience.
(그러나 기본 사항만으로는 진정으로 독특하고 시각적으로 뛰어난 사용자 경험을 만들고 관리하기에 충분하지 않습니다.)

The standard WPF controls might not integrate with the desired appearance of your application.
(표준 WPF 컨트롤은 애플리케이션의 원하는 외관과 통합되지 않을 수 있습니다.)

Data might not be displayed in the most effective way.
(데이터가 가장 효과적인 방식으로 표시되지 않을 수 있습니다.)

Your application’s overall user experience may not be suited to the default look and feel of Windows themes.
(애플리케이션의 전반적인 사용자 경험이 Windows 테마의 기본적인 모습과 느낌에 맞지 않을 수 있습니다.)

For this reason, WPF provides various mechanisms for creating unique user experiences.
(이런 이유로 WPF는 독특한 사용자 경험을 생성하기 위한 다양한 메커니즘을 제공합니다.)

Content Model (콘텐츠 모델)

The main purpose of most 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.
(WPF에서는 컨트롤의 콘텐츠를 구성할 수 있는 항목의 종류와 수를 컨트롤의 콘텐츠 모델이라고 합니다.)

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의 콘텐츠는 Text 속성에 할당된 문자열 값입니다.)

Other controls, however, can contain multiple items of different types of content;
(그러나 다른 컨트롤은 다양한 유형의 콘텐츠를 포함할 수 있습니다.)

the content of a Button, specified by the Content property, can contain various items including layout controls, text, images, and shapes.
(Content 속성에 의해 지정된 Button의 콘텐츠는 레이아웃 컨트롤, 텍스트, 이미지 및 도형을 포함하는 다양한 항목을 포함할 수 있습니다.)

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

Triggers (트리거)

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.
(XAML 마크업의 주요 목적은 애플리케이션의 외관을 구현하는 것이지만, XAML을 사용하여 애플리케이션의 동작의 일부 측면을 구현할 수도 있습니다.)

One example is the use of triggers to change an application’s appearance based on user interactions.
(한 가지 예로, 사용자 상호 작용에 따라 애플리케이션의 외관을 변경하는 트리거의 사용이 있습니다.)

For more information, see Styles and templates.
(자세한 내용은 스타일 및 템플릿을 참조하십시오.)

Templates (템플릿)

The default user interfaces for WPF controls are typically constructed from other controls and shapes.
(WPF 컨트롤의 기본 사용자 인터페이스는 일반적으로 다른 컨트롤과 도형으로 구성됩니다.)

For example, a Button is composed of both ButtonChrome and ContentPresenter controls.
(예를 들어, Button은 ButtonChrome과 ContentPresenter 컨트롤로 구성됩니다.)

The ButtonChrome provides the standard button appearance, while the ContentPresenter displays the button’s content, as specified by the Content property.
(ButtonChrome은 표준 버튼 외관을 제공하고, ContentPresenter는 Content 속성에 의해 지정된 버튼의 콘텐츠를 표시합니다.)

Sometimes the default appearance of a control may conflict with the overall appearance of an application.
(때때로, 컨트롤의 기본 외관이 애플리케이션의 전반적인 외관과 충돌할 수 있습니다.)

In this case, you can use a ControlTemplate to change the appearance of the control’s user interface without changing its content and behavior.
(이 경우 ControlTemplate을 사용하여 컨트롤의 콘텐츠와 동작을 변경하지 않고 사용자 인터페이스의 외관을 변경할 수 있습니다.)

For example, a Button raises the Click event when it’s clicked.
(예를 들어, Button은 클릭되면 Click 이벤트를 발생시킵니다.)

By changing the template of a button to display an Ellipse shape, the visual of the aspect of the control has changed, but the functionality hasn’t.
(버튼의 템플릿을 Ellipse 모양으로 변경하면 컨트롤의 시각적 요소는 변경되지만 기능은 변경되지 않습니다.)

You can still click on the visual aspect of the control and the Click event is raised as expected.
(여전히 컨트롤의 시각적 요소를 클릭할 수 있으며, Click 이벤트가 예상대로 발생합니다.)

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.
(데이터 템플릿은 바인딩된 데이터가 표시되는 방식을 향상시키기 위해 자주 사용됩니다.)

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:
(다음 그림은 이름, 설명 및 우선 순위를 가진 Task 객체의 컬렉션에 바인딩된 ListBox의 기본 모양을 보여줍니다:)

The default appearance is what you would expect from a ListBox.
(기본 모양은 ListBox에서 예상할 수 있는 것입니다.)

However, the default appearance of each task contains only the task name.
(그러나 각 작업의 기본 모양은 작업 이름만 포함되어 있습니다.)

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.
(작업 이름, 설명 및 우선 순위를 표시하려면 ListBox 컨트롤의 바인딩된 리스트 항목의 기본 모양을 DataTemplate을 사용하여 변경해야 합니다.)

Here is an example of applying a data template that was created for the Task object.
(다음은 Task 객체를 위해 생성된 데이터 템플릿을 적용한 예입니다.)

The ListBox retains its behavior and overall appearance and only the appearance of the content being displayed by the list box has changed.
(ListBox는 동작과 전체 외관을 유지하며, 리스트 박스에 의해 표시되는 콘텐츠의 외관만 변경되었습니다.)

For more information, see Data templating overview.
(자세한 내용은 데이터 템플릿 개요를 참조하십시오.)

Styles

Styles enable developers and designers to standardize on a particular appearance for their product.
(스타일은 개발자와 디자이너가 제품의 특정 외관을 표준화할 수 있도록 합니다.)

WPF provides a strong style model, the foundation of which is the Style element.
(WPF는 강력한 스타일 모델을 제공하며, 그 기반이 되는 요소는 Style 요소입니다.)

Styles can apply property values to types.
(스타일은 속성 값을 유형에 적용할 수 있습니다.)

They can be applied automatically to everything according to the type or individual objects when referenced.
(스타일은 유형에 따라 자동으로 모든 것에 적용되거나 참조할 때 개별 객체에 적용될 수 있습니다.)

The following example creates a style that sets the background color for every Button on the window to Orange:
(다음 예제는 창에 있는 모든 Button의 배경 색상을 오렌지색으로 설정하는 스타일을 생성합니다:)

<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"> <!-- 창의 제목을 "Styles"로 설정 -->

    <Window.Resources>
        <!-- 이 창의 모든 버튼에 적용될 스타일 정의 -->
        <Style TargetType="{x:Type Button}"> <!-- 버튼 유형을 대상으로 하는 스타일 -->
            <Setter Property="Background" Value="Orange" /> <!-- 배경색을 오렌지색으로 설정 -->
            <Setter Property="BorderBrush" Value="Crimson" /> <!-- 테두리 색상을 크림슨으로 설정 -->
            <Setter Property="FontSize" Value="20" /> <!-- 글자 크기를 20으로 설정 -->
            <Setter Property="FontWeight" Value="Bold" /> <!-- 글자 굵기를 Bold로 설정 -->
            <Setter Property="Margin" Value="5" /> <!-- 버튼의 외부 여백을 5로 설정 -->
        </Style>
    </Window.Resources> <!-- 스타일 정의 끝 -->

    <StackPanel> <!-- 수직으로 자식 요소를 쌓아 나가는 StackPanel -->

        <!-- 이 버튼에는 위에서 정의한 스타일이 적용됨 -->
        <Button>Click Me!</Button>

        <!-- 이 레이블은 스타일이 적용되지 않음 -->
        <Label>Don't Click Me!</Label>

        <!-- 이 버튼에도 위에서 정의한 스타일이 적용됨 -->
        <Button>Click Me!</Button>
        
    </StackPanel> <!-- StackPanel 끝 -->
</Window>

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:
(이 스타일은 모든 버튼 컨트롤을 대상으로 하므로 다음 그림과 같이 창의 모든 버튼에 스타일이 자동으로 적용됩니다)

For more information, see Styles and templates.
(자세한 내용은 스타일 및 템플릿을 참조하세요.)

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.
(응용 프로그램의 컨트롤은 동일한 모양을 공유해야 하며, 이는 글꼴, 배경 색상, 컨트롤 템플릿, 데이터 템플릿 및 스타일 등 다양한 요소를 포함할 수 있습니다.)

You can use WPF’s support for user interface resources to encapsulate these resources in a single location for reuse.
(WPF의 사용자 인터페이스 리소스 지원을 사용하여 이러한 리소스를 하나의 위치에 캡슐화하고 재사용할 수 있습니다.)

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">

  <!-- 
    Window.Resources 섹션에서 배경 색상 리소스를 정의합니다. 
    SolidColorBrush 객체는 x:Key 속성을 통해 리소스의 이름을 지정합니다. 
    여기서 "defaultBackground"라는 키를 가진 빨간색(SolidColorBrush) 브러시를 생성합니다.
  -->
  <Window.Resources>
    <SolidColorBrush x:Key="defaultBackground" Color="Red" />
  </Window.Resources>

  <!-- 
    버튼의 배경 색상은 window-scoped 리소스에 의해 정의됩니다. 
    StaticResource를 사용하여 "defaultBackground" 리소스를 참조합니다.
    이 버튼은 빨간색 배경을 가지게 됩니다.
  -->
  <Button Background="{StaticResource defaultBackground}">One Button</Button>

  <!-- 
    레이블의 배경 색상도 window-scoped 리소스에 의해 정의됩니다. 
    StaticResource를 사용하여 "defaultBackground" 리소스를 참조합니다.
    이 레이블 또한 빨간색 배경을 가지게 됩니다.
  -->
  <Label Background="{StaticResource defaultBackground}">One Label</Label>
</Window>

For more information, see How to define and reference a WPF resource.
(자세한 내용은 WPF 리소스를 정의하고 참조하는 방법을 참조하십시오.)

Custom controls (사용자 정의 컨트롤)

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.
(WPF는 많은 사용자 정의 지원을 제공하지만, 기존 WPF 컨트롤이 애플리케이션이나 사용자의 요구를 충족하지 못하는 상황에 직면할 수 있습니다.)

This can occur when:
(이는 다음과 같은 경우에 발생할 수 있습니다:)

  • 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 isn’t 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.
(각 모델은 특정 시나리오를 목표로 하며, 사용자 정의 컨트롤이 특정 WPF 기본 클래스에서 파생되도록 요구합니다.)

The three models are listed here:
(세 가지 모델은 다음과 같습니다:)

  • User Control Model (사용자 컨트롤 모델)
    A custom control derives from UserControl and is composed of one or more other controls.
    (사용자 정의 컨트롤은 UserControl에서 파생되며, 하나 이상의 다른 컨트롤로 구성됩니다.)
  • Control Model (컨트롤 모델)
    A custom control derives from Control and is used to build implementations that separate their behavior from their appearance using templates, much like most WPF controls.
    (사용자 정의 컨트롤은 Control에서 파생되며, 대부분의 WPF 컨트롤처럼 동작과 외관을 템플릿을 사용하여 분리하는 구현을 만드는 데 사용됩니다.)
    Deriving from Control allows you more freedom for creating a custom user interface than user controls, but it may require more effort.
    (Control에서 파생되면 사용자 컨트롤보다 사용자 정의 사용자 인터페이스를 생성할 수 있는 더 많은 자유를 제공하지만, 더 많은 노력이 필요할 수 있습니다.)
  • Framework Element Model (프레임워크 요소 모델)
    A custom control derives from FrameworkElement when its appearance is defined by custom rendering logic (not templates).
    (사용자 정의 컨트롤은 외관이 사용자 정의 렌더링 논리(템플릿이 아님)로 정의될 때 FrameworkElement에서 파생됩니다.)

For more information on custom controls, see Control authoring overview.
(사용자 정의 컨트롤에 대한 자세한 내용은 컨트롤 작성 개요를 참조하세요.)

See also (참조)

댓글 달기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

관련 게시물

위로 스크롤