그래픽 및 멀티미디어

아티클
08/10/2011

업데이트: 2010년 12월

Windows Presentation Foundation (WPF)에서는 멀티미디어, 벡터 그래픽, 애니메이션 및 콘텐츠 컴퍼지션에 대한 지원을 제공하므로 개발자가 원하는 사용자 인터페이스 및 콘텐츠를 작성할 수 있습니다. Microsoft Visual Studio을 사용하여 벡터 그래픽이나 복잡한 애니메이션을 만들고 미디어를 응용 프로그램에 통합할 수 있습니다.

이 항목에서는 그래픽, 전환 효과, 사운드 및 비디오를 응용 프로그램에 추가할 수 있게 하는 WPF의 그래픽, 애니메이션 및 미디어 기능을 소개합니다.

참고
Windows 서비스에서 WPF 형식을 사용하지 않는 것이 좋습니다.Windows 서비스에서 WPF 형식을 사용하려고 하면 서비스가 예상대로 작동하지 않을 수 있습니다.

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

WPF 4.0의 새로운 그래픽 및 멀티미디어 기능
그래픽 및 렌더링
3차원 렌더링
애니메이션
미디어
관련 항목

WPF 4.0의 새로운 그래픽 및 멀티미디어 기능

그래픽 및 애니메이션과 관련하여 몇 가지 사항이 변경되었습니다.

레이아웃 반올림

개체 가장자리가 픽셀 장치의 가운데 놓이면 DPI 독립 그래픽 시스템에서 흐리거나 반투명한 가장자리와 같은 렌더링 아티팩트를 만들 수 있습니다. 이전 버전의 WPF에는 이러한 경우를 처리하는 데 도움이 되는 픽셀 맞추기 기능이 있습니다. Silverlight 2에서는 가장자리가 전체 픽셀 경계에 포함되도록 요소를 이동하는 다른 방법인 레이아웃 반올림 기능을 도입했습니다. WPF는 이제 FrameworkElement의 UseLayoutRounding 연결된 속성을 사용하여 레이아웃 반올림을 지원합니다.
캐시된 컴퍼지션

새 BitmapCache 및 BitmapCacheBrush 클래스를 사용하여 시각적 트리의 복잡한 부분을 비트맵으로 캐시하여 렌더링 시간을 크게 단축할 수 있습니다. 비트맵은 마우스 클릭과 같은 사용자 입력에 계속 반응하므로 브러시와 같은 다른 요소에 비트맵을 채울 수 있습니다.
픽셀 셰이더 3 지원

WPF 4는 응용 프로그램에서 PS(Pixel Shader) 버전 3.0을 사용하여 효과를 작성할 있도록 허용하여 WPF 3.5 SP1에 도입된 ShaderEffect 지원을 기반으로 빌드됩니다. PS 3.0 셰이더 모델은 PS 2.0보다 더 정교하여 지원되는 하드웨어에 훨씬 큰 효과를 줄 수 있습니다.
감속/가속 함수

애니메이션 동작을 세부적으로 제어할 수 있는 감속/가속 함수를 사용하여 애니메이션을 개선할 수 있습니다. 예를 들어 ElasticEase를 애니메이션에 적용하여 애니메이션에 용수철 동작을 부여할 수 있습니다. 자세한 내용은 System.Windows.Media.Animation 네임스페이스에서 감속/가속 형식을 참조하십시오.

그래픽 및 렌더링

WPF에는 고품질의 2-D 그래픽에 대한 지원이 포함되어 있습니다. 이 기능에는 브러시, 기하 도형, 이미지, 도형 및 변환이 포함됩니다. 자세한 내용은 그래픽을 참조하십시오. 그래픽 요소의 렌더링은 Visual 클래스를 기반으로 합니다. 화면에 나타나는 시각적 개체의 구조는 시각적 트리를 통해 설명됩니다. 자세한 내용은 WPF 그래픽 렌더링 개요를 참조하십시오.

2차원 도형

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

타원 및 사각형

이러한 내장 WPF 도형은 단순한 도형이 아닙니다. 이러한 도형은 키보드 및 마우스 입력을 포함한 대부분의 일반 컨트롤에서 사용자가 예상하는 대부분의 기능을 구현하는 프로그래밍 가능한 요소입니다. 다음 예제에서는 Ellipse 요소를 클릭하여 발생한 MouseUp 이벤트를 처리하는 방법을 보여 줍니다.

<Window
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="Window1" >
  <Ellipse Fill="LightBlue" MouseUp="ellipseButton_MouseUp" />
</Window>

public partial class Window1  : Window
{
    void ellipseButton_MouseUp(object sender, MouseButtonEventArgs e)
    {
        MessageBox.Show("You clicked the ellipse!");
    }
}

Partial Public Class Window1
    Inherits Window
    Private Sub ellipseButton_MouseUp(ByVal sender As Object, ByVal e As MouseButtonEventArgs)
        MessageBox.Show("You clicked the ellipse!")
    End Sub
End Class

다음 그림에서는 위의 XAML 태그 및 코드 숨김에 대한 출력을 보여 줍니다.

"you clicked the ellipse!" 텍스트가 있는 창

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

2차원 기하 도형

WPF가 제공하는 2-D 도형이 충분하지 않은 경우 기하 도형 및 경로에 대한 WPF 지원을 사용하여 고유한 도형을 만들 수 있습니다. 다음 그림은 기하 도형을 사용하여 도형을 그리기 브러시로 만들고 다른 WPF 요소를 클리핑하는 방법을 보여 줍니다.

Path의 다양한 용도

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

2차원 효과

WPF에서는 다양한 효과를 만들기 위해 사용할 수 있는 2-D 클래스 라이브러리가 제공됩니다. WPF의 2-D 렌더링 기능은 그라데이션, 비트맵, 그림 및 비디오가 있는 UI 요소를 그리는 기능과 회전, 배율 조정 및 기울이기를 사용하여 이러한 요소를 조작하는 기능을 제공합니다. 다음 그림은 WPF 브러시를 사용하여 실현할 수 있는 많은 효과의 예제를 보여 줍니다.

여러 브러시의 설명

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

3차원 렌더링

WPF는 더 흥미로운 레이아웃, UI 및 데이터 시각화를 만들 수 있도록 WPF의 2-D 그래픽 지원과 통합되는 3-D 렌더링 기능 집합을 제공합니다. 다음 그림에 나온 것처럼 스펙트럼의 한 쪽 끝에서 WPF를 사용하면 2-D 이미지를 3-D 도형의 표면 위에 렌더링할 수 있습니다.

Visual3D 샘플 스크린 샷

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

애니메이션

애니메이션을 사용하면 컨트롤과 요소를 늘리거나 흔들거나 회전하거나 점점 흐리게 만들어 보다 효과적인 페이지 전달 효과를 줄 수 있습니다. WPF에서는 대부분의 속성에 애니메이션 효과를 줄 수 있으므로 대부분의 WPF 개체 뿐만 아니라 직접 만든 사용자 지정 개체에 WPF를 통해 애니메이션 효과를 줄 수 있습니다.

애니메이션 효과가 적용된 큐브의 이미지

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

미디어

이미지, 비디오 및 오디오는 정보와 사용자 경험을 전달하기 위한 풍부한 미디어 방법입니다.

Images

아이콘, 배경 및 심지어 애니메이션의 일부를 포함하는 이미지는 대부분의 응용 프로그램에서 핵심 부분입니다. 이미지를 자주 사용해야 하므로 WPF에서는 다양한 방법으로 이미지를 작업할 수 있는 기능이 제공됩니다. 다음 그림에서는 이러한 방법 중 하나를 보여 줍니다.

스타일 샘플 스크린 샷

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

비디오 및 오디오

WPF의 그래픽 기능 중 핵심 기능은 비디오 및 오디오를 비롯한 멀티미디어 작업을 위한 기본 지원을 제공하는 것입니다. 다음 예제에서는 미디어 플레이어를 응용 프로그램에 삽입하는 방법을 보여 줍니다.

<MediaElement Source="media\numbers.wmv" Width="450" Height="250" />

MediaElement는 비디오와 오디오를 모두 재생할 수 있으며 사용자 지정 UIs를 쉽게 만들 수 있는 충분한 확장성을 갖고 있습니다.

자세한 내용은 멀티미디어 개요을 참조하십시오.

참고 항목

변경 기록

날짜	변경 내용	이유
2010년 12월	누락되었던 Visual Basic 예제가 추가되었습니다.	콘텐츠 버그 수정

2010년 12월

누락되었던 Visual Basic 예제가 추가되었습니다.

콘텐츠 버그 수정

다음을 통해 공유