<4D F736F F D20C1A4BAB8B0FAC7D0C8B85F FC7CFB0E85F446F63>

Size: px

Start display at page:

Download "<4D F736F F D20C1A4BAB8B0FAC7D0C8B85F FC7CFB0E85F446F63>"

화령 탄
5 years ago
Views:

WPF 의상호운용성렌더링문제를해결하기위한라이브러리 김태경 O, 전현상, 유혁 고려대학교컴퓨터학과 건국대학교전자공학과 고려대학교컴퓨터학과 tkkim@os.korea.ac.

1 WPF 의상호운용성렌더링문제를해결하기위한라이브러리 김태경 O, 전현상, 유혁 고려대학교컴퓨터학과 건국대학교전자공학과 고려대학교컴퓨터학과 Library to solve rendering problem of WPF interoperability Tae-Kyung Kim O, Hyun-Sang Jeon, Chuck Yoo Dept. of Computer Science, Korea University Dept. of Electronic Engineering, KonKuk University Dept. of Computer Science, Korea University 요약 Microsoft의.NET Framework 버전 3.0 부터는 WPF(Windows Presentation Foundation) 라는기능을통해다양한시각효과를 Widows의어플리케이션에서제공할수있도록도와준다. 그리고 WPF에서는 WPF에서제공하는기본컨트롤이외에기존에사용하던컨트롤들을사용할수있도록해주기위해상호운용성 (interoperability) 라는기능을제공해준다. 하지만상호운용성을이용할경우 WPF의효과적인렌더링기능을사용하지못하고이전기술의렌더링기술을사용하게되어다양한시각효과의제공을할수없게된다는한계점이있다. 본논문에서는상호운용성을사용할경우생기는렌더링문제를해결하고상호운용성을쉽고효율적으로사용할수있는라이브러리를제안한다. 1. 서론 RIA, UX 등의개념으로화려한, 편리한 UI 의제공은소프트웨어개발시매우중요한요소가되었다. 그러한시대의변화에발맞추어 Microsoft.Net Framework 3.0 부터는 Windows Vista 의화면을표시하기위한프레임워크의일부로 WPF 라는부분을아래의그림 1. 과같이포함시켰다. Windows Presentation Foundation(WPF) 은 Windows Vista 에서컴퓨터의기능을최대한활용하면서응용프로그램 UI, 문서및미디어콘텐츠를통합하여응용프로그램과고급환경을작성하는데사용할수있는 Microsoft 의기술이다.[1] 그림 1. Microsoft.NET Framework 3.5 그리고 Microsoft 는개발자에게 UI 의개발을쉽게할수있는환경을제공하자는목표를갖고 WPF 의 SDK 를출시하였다. 덕분에 WPF 에서제공하는애니메이션, 비하인드코드, 데이터바인딩등의개념들은개발자에게편안한환경을제공할수있었다. WPF는강력한어플리케이션개발환경을제공한다. 하지만 WPF는아직도개발중인프레임워크이기때문에새롭고기존기술들이갖고있던장점들을모두흡수할수는없었다. 그래서많은개발자들은 WPF 기반의사용자인터페이스를만들어도기존기술의장점들은계속살리길원했다. 예를들어, 현재 WPF 3.0의표준컨트롤에서는윈폼의 DateTimePicker와같은많은컨트롤들이빠져있다. 그러한부분을지원해주기위해서 Microsoft에서는 WPF의상호운용성이라는부분을고려하여개발하였다.[2] 아래그림 2에서의 interop라는부분이 WPF의상호운용성 (interoperability) 에대한부분이다. 하지만근본적으로 WPF 이전방식의 GDI/GDI+ 를사용하는렌더링방식과 WPF의 DirectX를사용하는렌더링방식의차이로인하여상호운용성을사용할경우에는 WPF의장점인다양한그래픽, 애니메이션의적용이불가능하게된다.[3] 그리하여본논문에서는이러한문제를해결할수있는구조를제시하고쉽게개발에사용할수있는라이브러리를구현한다.

2.2 렌더링모델의차이점으로인하여생기는문제점 그림 2. Widows Presentation Foundation Architecture(1) 2. WPF 의상호운용성의한계점 2.1 기존 Win32 렌더링모델과 WPF 렌더링모델의차이점 WPF에서의모든디스플레이는 DirectX 엔진을통해수행되므로효율적인하드웨어및소프트웨어렌더링을허용한다.

따라서 GDI 로렌더링되는영역에는크게 2 가지의문제가발생한다. 첫번째는 WPF 만이가능한 Skew, Scale, Transfrom, Opacity 등의효과들을적용할수없는문제이다. 아래의 XAML 마크업은파란색을갖는 Canvas 의인스턴스가젤하위에있고, 그위영역을핑크색을갖는캔버스의인스턴스와.NET 3.

net Margin= 0,68,33,70 HorizontalAlignment= Right /> <Canvas Background= CornflowerBlue Name= cv1 Margin= 131,30,142,108 /> <Canvas Background= HotPink Name= cv2 Margin= 31,68,0,70 Opacity= 0.

2 2.2 렌더링모델의차이점으로인하여생기는문제점 그림 2. Widows Presentation Foundation Architecture(1) 2. WPF 의상호운용성의한계점 2.1 기존 Win32 렌더링모델과 WPF 렌더링모델의차이점 WPF에서의모든디스플레이는 DirectX 엔진을통해수행되므로효율적인하드웨어및소프트웨어렌더링을허용한다. WPF는 milcore를통해 DirectX와의긴밀한협업을한다.[4] 아래그림은 WPF 주요구성요소의모습을나타내기위해 Microsoft에서제공하는 WPF의구조도이다. WPF Application 안에서상호운용성을통해 WPF 이전의컨트롤들이동작을하더라도 GDI 로렌더링되는영역과 WPF 로렌더링되는영역은완벽하게분리된다. 따라서 GDI 로렌더링되는영역에는크게 2 가지의문제가발생한다. 첫번째는 WPF 만이가능한 Skew, Scale, Transfrom, Opacity 등의효과들을적용할수없는문제이다. 아래의 XAML 마크업은파란색을갖는 Canvas 의인스턴스가젤하위에있고, 그위영역을핑크색을갖는캔버스의인스턴스와.NET 3.5 의 WebBrowser 클래스의인스턴스에 Opacity 프로퍼티를 50% 로설정하여쌓아올리는작업을하는마크업이다. <Grid Background= Black > <WebBrowser Opacity = 0.5 Name = wb1 Source= Margin= 0,68,33,70 HorizontalAlignment= Right /> <Canvas Background= CornflowerBlue Name= cv1 Margin= 131,30,142,108 /> <Canvas Background= HotPink Name= cv2 Margin= 31,68,0,70 Opacity= 0.5 HorizontalAlignment= Left /> </Grid> 개발자는위의 XAML 마크업을통해 WebBrowser 클래스의인스턴스에도 Opacity 프로퍼티가적용되기를원할것이다. 하지만결과는아래그림 4 와같이 WebBrowser 클래스의인스턴스에는특수효과가적용되지않는것을볼수있을것이다..NET 3.5 의 WebBrowser 클래스는내부적으로는 WindowsFormsHost 클래스의인스턴스로랩핑되어있기때문에 GDI 로렌더링하는방식을사용하기때문이다. 그림 3. Widows Presentation Foundation Architecture(2) WPF 가다양한장점들을제공하지만어플리케이션개발시갖는가장큰장점은위에서설명한효율적인렌더링효과를쉽게접근하여애니메이션등의시각효과를만들수있다는것이다. 하지만기존의 Win32 모델은각컨트롤이나도형이 GDI ( 혹은 GDI+) 와 user32.dll 영역을통해서윈도우에표현되고그려지도록되어있다. 그러므로상호운용성을이용하여 WPF 이전에개발된컨트롤들을사용할때는컨트롤에직접애니메이션등의효과를적용할수없다는문제가발생한다. 그렇게되면 WPF 를사용하는이점중에하나가사라지게되는것이다. 그림 4. WPF 상호운용성의렌더링문제 (2)

두번째는 GDI 로렌더링되는영역은항상최상위의 Priority 를가지게되어 WPF 렌더링영역위에겹쳐져서항상가장위에올라오는문제이다. 아래의 XAML 마크업은생성순서에따라 WebBrowser 클래스의인스턴스가 Canvas 클래스의인스턴스들사이에겹쳐서쌓여있도록시도한 XAML 마크업이다.

5 Name = wb1 Source= http://www.daum.net Margin= 129,93,133,70 /> <Canvas Background= CornflowerBlue Name= cv2 Margin= 0,0,12,29 HorizontalAlignment= Right VerticalAlignment = Bottom Opacity= 0.

3 두번째는 GDI 로렌더링되는영역은항상최상위의 Priority 를가지게되어 WPF 렌더링영역위에겹쳐져서항상가장위에올라오는문제이다. 아래의 XAML 마크업은생성순서에따라 WebBrowser 클래스의인스턴스가 Canvas 클래스의인스턴스들사이에겹쳐서쌓여있도록시도한 XAML 마크업이다. <Grid Background= Black > <Canvas Background= CornflowerBlue Name= cv1 Margin= 131,30,142,108 HorizontalAlignment = Left VerticalAlignment= Top /> <WebBrowser Opacity = 0.5 Name = wb1 Source= Margin= 129,93,133,70 /> <Canvas Background= CornflowerBlue Name= cv2 Margin= 0,0,12,29 HorizontalAlignment= Right VerticalAlignment = Bottom Opacity= 0.5 /> </Grid> 하지만결과는아래의그림 5. 와같이생성순서를 통해 생기는 z-order(z축 순서값 ) 를 무시하고 WebBrower 클래스의인스턴스가화면에서가장위에 쌓여있게 된다. 이 역시 WebBrowser 클래스의 인스턴스가 GDI로 렌더링 하는 방식을 사용하기 때문이다. 그림 6. 시스템구조 구현한각블록의기능들은아래와같다. WindowsFormshostEX 개선된 Win32 상호운용성을위해 WPF 측에서사용하게될컨트롤이다. 기존의 WindowsFormshost 와마찬가지로 Winform, OCX, COM 객체들을호스팅하고사용할수있는기능을제공한다. 그리고추가적으로내부적으로는이미지버퍼의이미지를실시간으로받아와출력해주는역할을한다. 구현된라이브러리는 XAML 마크업과 C#,VB.NET 코드모두에서사용할수있도록제공된다. 아래는우리의라이브러리를사용한 XAML 마크업의모습이다. <interop:windowsformshostex x:name= WebBrowserhost > < interop:windowsformshostex.contentcontrol> <forms:webbrowser Uri = Width= 200 Height= 200 /> </interop:windowsformshostex.contentcontrol> </interop:windowsformshostex> 그림 5. WPF 상호운용성의 z-order 문제 아래는우리의라이브러리를사용한 C# 의환경에서의코드의모습이다. 3. 시스템디자인및구현 3.1 시스템디자인본논문에서제안하는시스템의구조는아래의그림 6 과같다. DirectX, milcore, User32, GDI+ 영역은 Native 로작성되어기존의 WPF 시스템에서동작하고있는부분이다. 실제라이브러리를개발하는부분은 WindowsFromsHostEx, HwndHostEx, Mouse Hooker Class, Keyboard Hooker Class, Hwnd Buffering Engine, Hwnd Host Dialog 이다. WindowsFormshostEx hostex = new WindowsFormsHostEx(); System.Windows.Forms.WebBrowser wb = new System.Windows.Forms.WebBrowser(); hostex.contentcontrol = wb; webbrowser.navigaet( ); HwndHostEx WindowsFormsHostEx 와유사한역할을하지만 Win32 네이티브객체를 hwnd 단위에서핸들링하여호스팅한다는점이차이점이다. 우선구현매커니즘상

HwndHostEx 에한해서는 XAML 을지원하지는않고대신에비하인드코드부에서 Background 에서동작하는 Win32 Native Code 의 HWND 객체를바로받아서처리해주는호스팅을지원한다. Hwnd Host Dialog win32 객체를좀더편하게핸들링하기위한클래스로내부적으로는그래픽처리가되지만밖으로는표시되지않는다. 기본적으로.NET 2.

라이브러리인 WindowsFormsHostEx, HwndHostEx 를통해서상호운용하고자하는 Win32 객체를호스팅하면라이브러리의코어부분인 4 가지모듈들이데이터를분석하여 User32, GDI+ 과통신한다. 이런과정을통해서 Win32 객체의순수한이미지를가져오기위해이미지버퍼의내용을가져와그림 7 과같이 WPF 쪽으로전송시켜보여줄수있다.

4 HwndHostEx 에한해서는 XAML 을지원하지는않고대신에비하인드코드부에서 Background 에서동작하는 Win32 Native Code 의 HWND 객체를바로받아서처리해주는호스팅을지원한다. Hwnd Host Dialog win32 객체를좀더편하게핸들링하기위한클래스로내부적으로는그래픽처리가되지만밖으로는표시되지않는다. 기본적으로.NET 2.0 winform 객체로구성되며기본적으로 WindowsFormHost 와같은 WPF 기본상호운용컨트롤을사용하지않으면화면에표시되지않기때문에화면출력과관련될문제가발생할가능성은 0% 이다. 좀더내부적인처리로는키보드, 마우스이벤트 hooking class 에정보를제공하는것과 User32 와 GDI 를핸들링하는처리가이루어진다. 라이브러리인 WindowsFormsHostEx, HwndHostEx 를통해서상호운용하고자하는 Win32 객체를호스팅하면라이브러리의코어부분인 4 가지모듈들이데이터를분석하여 User32, GDI+ 과통신한다. 이런과정을통해서 Win32 객체의순수한이미지를가져오기위해이미지버퍼의내용을가져와그림 7 과같이 WPF 쪽으로전송시켜보여줄수있다. 따라서 WPF 쪽에서는이미지가뿌려지게되는형식을취하기때문에각종 WPF 의이벤트를적용할수있게되는것이다. 또한 WPF 쪽으로전송된화면이어떤상태로변환되어서보이는지에상관없이마우스키보드이벤트를정상적으로받게하기위해 Mouse, Keyboard Hooker 가 3 차원의좌표를 2 차원화시켜가져올수있도록한다. 아래그림 8 은시스템의데이터흐름을보여준다. Hwnd Buffering Engine Hwnd Host Dialog Class 에서요청한현재화면의이미지를버퍼링하여 WPF 측으로넘겨주기위한클래스이다. MouseHooker Class, KeyboardHooker Class 사용자의입력을받아상호운용성을통해호스팅된객체에입력을전달해주는기능을한다. 별도의마우스, 키보드의입력을처리하는클래스가필요한이유는다음과같다. 그림 7 과같이 WPF 에서는컨트롤에다양한효과를줄수있기때문에호스팅된컨트롤의좌표는 3 차원의좌표를갖을것이다. 그렇기때문에 WPF 에서얻은 3 차원의좌표를 2 차원으로변환하여 Native 이벤트로적용하는기능이포함된 MouseHooker, KeyboardHooker 클래스가필요하다. 4. 결론 그림 8. 데이터플로우다이어그램 그림 7. WPF 의효과적용모습 3.2 시스템데이터플로우라이브러리를포함한전체시스템에서의데이터교환과정은다음과같이발생할수있다. 우선기존의 WindowsFormsHost, HwndHost 컨트롤을대신하여우리가구현한기능을사용할수있는 본논문에서우리는 Microsoft.Net Framework 3.0 의 Windows Presentation Foundation 의상호운용성에서발생하는그래픽문제를발견하였다. 그리고문제를해결하기위한새로운라이브러리를제안하였다. 새로운라이브러리는상호운용성을이용하여호스팅한객체를화면에보이기위해이미지버퍼에올라가있는정보를얻어와이미지컨트롤을통해이미지로보이는방식을이용하여화면에출력되는그래픽문제를해결하였다. 또한그래픽의다양한효과에알맞은키보드, 마우스입력처리를위하여키보드와마우스를후킹하는클래스를구현하여입력문제를해결할수있었다. 그리고우리의라이브러리를이용하여아래의그림 9 와같은예제어플리케이션을제작할수있었다.

그림 9. 예제어플리케이션 참고문헌 [1].NET Framework Developer Center, Microsoft Developer Network, http://msdn.microsoft.com/ko-kr/netframework/default.

5 그림 9. 예제어플리케이션 참고문헌 [1].NET Framework Developer Center, Microsoft Developer Network, [2] Adam Nathan 저, 한용희역, 애덤네이선의 WPF 언리쉬드, ISBN : [3] WPF Interoperation: "Airspace" and Window Regions Overview, Microsoft Developer Network, [4] WPF Architecture, Microsoft Developer Network,

MVVM 패턴의 이해

MVVM 패턴의 이해 Seo Hero 요약 joshua227.tistory. 2014 년 5 월 13 일 이문서는 WPF 어플리케이션개발에필요한 MVVM 패턴에대한내용을담고있다. 1. Model-View-ViewModel 1.1 기본개념 MVVM 모델은 MVC(Model-View-Contorl) 패턴에서출발했다. MVC 패턴은전체 project 를 model, view 로나누어