Microsoft MVP성태의 닷넷 이야기
글쓴 사람
홈페이지
첨부 파일

WPF(또는 WinForm)에서 UWP UI 구성 요소 사용하는 방법

이전에 데스크톱 응용 프로그램에서 UWP 구성 요소를 사용하는 방법을 설명했었습니다.

데스크톱 윈도우 응용 프로그램에서 UWP 라이브러리를 이용한 비디오 장치 열람하는 방법
; https://www.sysnet.pe.kr/2/0/11284

윈도우 데스크톱 응용 프로그램(예: Console)에서 알림 메시지(Toast notifications) 띄우기
; https://www.sysnet.pe.kr/2/0/11073

이번에는 아래의 질문 글에 따라,

안녕하세요. WPF에서 UWP Control을 참조하려고 합니다.
; https://www.sysnet.pe.kr/3/0/5099

UWP UI 컨트롤을 WPF에 포함하는 방법을 알아보겠습니다. 사실 방법은, 위의 질문자가 써놓았던 다음의 자료에서 잘 설명하고 있습니다.

WindowsXamlHost control for Windows Forms and WPF
; https://docs.microsoft.com/en-us/windows/communitytoolkit/controls/wpf-winforms/windowsxamlhost

그래도 ^^ 한번 직접 따라 해 보겠습니다. 우선, .NET Framework 4.6.2 이상의 WPF 프로젝트(WinForm의 경우에는 이 글에서 예제로 실습하진 않지만 방식은 유사하므로 이 글을 읽고 나서 위의 문서를 보시면 바로 알 수 있습니다.)를 하나 만들고 NuGet 패키지 참조를 추가합니다.

Install-Package Microsoft.Toolkit.Wpf.UI.XamlHost 

그다음 아래의 외부 모듈을 참조 추가하고,

C:\Program Files (x86)\Windows Kits\10\UnionMetadata\Windows.winmd

"View" / "Toolbox (Ctrl + Alt + X)"를 열면 "Windows Community Toolkit" 범주에 "WindowsXamlHost" 컨트롤을 WPF XAML Form에 끌어다 놓습니다. 그럼 XAML에 WindowsXamlHost 마크업이 추가되는데 기본 추가된 속성을 대충 정리하면 다음과 같이 XAML이 구성될 것입니다.

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        xmlns:XamlHost="clr-namespace:Microsoft.Toolkit.Wpf.UI.XamlHost;assembly=Microsoft.Toolkit.Wpf.UI.XamlHost" x:Class="WpfApp1.MainWindow"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>

        <XamlHost:WindowsXamlHost />

    </Grid>
</Window>

이제 원하는 UWP 컨트롤을 WindowsXamlHost의 InitialTypeName 속성으로 지정하면 됩니다. 질문 글에 포함된 예제에서는 UWP Button 컨트롤을 지정하고 있습니다.

<XamlHost:WindowsXamlHost x:Name="btnTest" InitialTypeName="Windows.UI.Xaml.Controls.Button" />

이후, UWP 래퍼 컨트롤 내에서 InitialTypeName에 지정한 컨트롤을 생성할 텐데 이 컨트롤은 다음과 같이 Child 속성으로 접근할 수 있습니다.

using System.Windows;

namespace WpfApp1
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            Windows.UI.Xaml.Controls.Button button = btnTest.Child as Windows.UI.Xaml.Controls.Button;
            button.Content = "TEST";
            button.Click += Button_Click;
        }

        private void Button_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
        {
            MessageBox.Show("TestButton Clicked");
        }
    }
}

하지만 실제로 실행해 보면 위의 코드는 TargetInvocationException / NullReferenceException 오류가 발생합니다.

System.Reflection.TargetInvocationException
  HResult=0x80131604
  Message=Exception has been thrown by the target of an invocation.
  Source=mscorlib
  StackTrace:
   at System.RuntimeTypeHandle.CreateInstance(RuntimeType type, Boolean publicOnly, Boolean noCheck, Boolean& canBeCached, RuntimeMethodHandleInternal& ctor, Boolean& bNeedSecurityCheck)
   at System.RuntimeType.CreateInstanceSlow(Boolean publicOnly, Boolean skipCheckThis, Boolean fillCache, StackCrawlMark& stackMark)
   at System.Activator.CreateInstance(Type type, Boolean nonPublic)
   at System.RuntimeType.CreateInstanceImpl(BindingFlags bindingAttr, Binder binder, Object[] args, CultureInfo culture, Object[] activationAttributes, StackCrawlMark& stackMark)
   at System.Activator.CreateInstance(Type type, BindingFlags bindingAttr, Binder binder, Object[] args, CultureInfo culture, Object[] activationAttributes)
...[생략]...
   at MS.Win32.HwndSubclass.SubclassWndProc(IntPtr hwnd, Int32 msg, IntPtr wParam, IntPtr lParam)
   at MS.Win32.UnsafeNativeMethods.DispatchMessage(MSG& msg)
   at System.Windows.Threading.Dispatcher.PushFrameImpl(DispatcherFrame frame)
   at System.Windows.Application.RunDispatcher(Object ignore)
   at System.Windows.Application.RunInternal(Window window)
   at WpfApp1.App.Main()

Inner Exception 1:
NullReferenceException: Object reference not set to an instance of an object.

왜냐하면 UWP 래퍼 컨트롤 내에서 내부 컨트롤을 생성할 시간이 필요한데, 위의 코드는 생성되기도 전에 Child 속성에 접근했기 때문입니다. 다행히 UWP 래퍼 컨트롤은 내부 컨트롤을 생성한 시점을 이벤트로 알려주는데요, 그래서 대개의 경우 다음과 같이 XAML 코드를 만들어 주면 됩니다.

<XamlHost:WindowsXamlHost x:Name="btnTest" InitialTypeName="Windows.UI.Xaml.Controls.Button" 
                            ChildChanged="ChildControlCreated" />

그리고 저 이벤트 핸들러 이후의 시점부터 Child 속성을 안전하게 접근할 수 있습니다.

using System;
using System.Windows;

namespace WpfApp1
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void ChildControlCreated(object sender, EventArgs e)
        {
            Windows.UI.Xaml.Controls.Button button = btnTest.Child as Windows.UI.Xaml.Controls.Button;
            button.Content = "TEST";
            button.Click += Button_Click;
        }

        private void Button_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
        {
            MessageBox.Show("TestButton Clicked");
        }
    }
}

(첨부 파일은 이 글의 예제 코드를 포함합니다.)

질문 글 덕분에 저도 이렇게 실습을 해보는군요. ^^




참고로, 이 기능은 12월에 릴리스된 Windows 1809 업데이트부터 사용할 수 있다고 문서에 명시되어 있습니다.

Starting in Windows 10 Insider Preview SDK build 17709

현재(2018-12-19 기준) 일반 사용자들에게 배포된 Windows 10은 Version 1803에 OS Build 번호가 17134입니다. 만약, 1803 이하의 윈도우 10에서 위의 예제 코드를 실행한다면 MainWindow 로드 시에 다음과 같은 예외가 발생합니다.

System.Windows.Markup.XamlParseException
  HResult=0x80131501
  Message='The invocation of the constructor on type 'Microsoft.Toolkit.Wpf.UI.XamlHost.WindowsXamlHost' that matches the specified binding constraints threw an exception.' Line number '12' and line position '10'.
  Source=PresentationFramework
  StackTrace:
   at System.Windows.Markup.XamlReader.RewrapException(Exception e, IXamlLineInfo lineInfo, Uri baseUri)

Inner Exception 1:
TypeLoadException: Could not find Windows Runtime type 'Windows.UI.Xaml.Hosting.DesktopWindowXamlSource'.




[이 글에 대해서 여러분들과 의견을 공유하고 싶습니다. 틀리거나 미흡한 부분 또는 의문 사항이 있으시면 언제든 댓글 남겨주십시오.]





[최초 등록일: ]
[최종 수정일: 12/19/2018 ]

Creative Commons License
이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.
by SeongTae Jeong, mailto:techsharer@outlook.com

비밀번호

댓글 쓴 사람
 



2018-12-31 10시07분
[WPF] 정말 감사합니다. 그런데 XamlHost로 만든 UWP Control은 WPF Control 보다 항상 위에 있고, WPF Canvas 위에 올려놓고 해당 Canvas를 Storyboard로 애니메이션을 줘도 먹질 않던데 이건 해결 방법이 없을까요?

사실 제가 원하는건 Win2D를 WPF에서 쓰는건데 .NET Core 3.0에선 가능하다고 합니다. 그런데 문제는 제가 Win2D CanvasAnimatedControl을 바닥에 깔아놓고 그 위에 몇가지 Button, DataGrid 등을 놓을 예정이라서요...
[손님]
2018-12-31 11시59분
XamlHost를 자세히는 안 봤지만, 아마도 "Window"를 가진 유형일 것이므로 그런 문제가 발생할 것입니다. 유사하게 WPF에서 Window Forms으로 만든 컨트롤을 가져와 사용할 때도 마찬가지의 문제가 발생하는 것입니다. Button이나 DataGrid를 얹고 싶다면 그것들도 역시 XamlHost로 엮어서 Window 위에 얹어지도록 해야 합니다.
정성태
2019-04-30 07시57분
[Taylor] Thank you! I just spent a day trying to understand why I couldn't get the XAML Hosting to work -- you're the only person on the internet who explained it was because I wasn't on Windows 1809
[손님]

1  2  3  4  5  6  7  [8]  9  10  11  12  13  14  15  ...
NoWriterDateCnt.TitleFile(s)
11833정성태5/14/2019507개발 환경 구성: 431. Visual Studio 2019 - CMake를 이용한 공유/실행(so/out) 리눅스 프로젝트 설정파일 다운로드1
11832정성태3/4/2019496오류 유형: 524. Visual Studio CMake - rsync: connection unexpectedly closed
11831정성태3/4/2019393오류 유형: 523. Visual Studio 2019 - 새 창으로 뜬 윈도우를 닫을 때 비정상 종료
11830정성태2/26/2019405오류 유형: 522. 이벤트 로그 - Error opening event log file State. Log will not be processed. Return code from OpenEventLog is 87.
11829정성태2/26/2019530개발 환경 구성: 430. 마이크로소프트의 CoreCLR 프로파일러 예제 빌드 방법 - 리눅스 환경 [1]
11828정성태2/26/2019735개발 환경 구성: 429. Component Services 관리자의 RuntimeBroker 설정이 2개 있는 경우
11827정성태2/26/2019573오류 유형: 521. Visual Studio - Could not start the 'rsync' command on the remote host, please install it using your system package manager.
11826정성태2/26/2019477오류 유형: 520. 우분투에 .NET Core SDK 설치 시 패키지 의존성 오류
11825정성태2/25/2019980개발 환경 구성: 428. Visual Studio 2019 - CMake를 이용한 리눅스 빌드 환경 설정
11824정성태2/25/2019726오류 유형: 519. The SNMP Service encountered an error while accessing the registry key SYSTEM\CurrentControlSet\Services\SNMP\Parameters\TrapConfiguration. [1]
11823정성태2/21/2019433오류 유형: 518. IIS 관리 콘솔이 뜨지 않는 문제
11822정성태2/20/2019522오류 유형: 517. docker에 설치한 MongoDB 서버로 연결이 안 되는 경우
11821정성태2/20/2019521오류 유형: 516. Visual Studio 2019 - This extension uses deprecated APIs and is at risk of not functioning in a future VS update. [1]
11820정성태2/20/20191491오류 유형: 515. 윈도우 10 1809 업데이트 후 "User Profiles Service" 1534 경고 발생
11819정성태2/20/2019557Windows: 158. 컴퓨터와 사용자의 SID(security identifier) 확인 방법
11818정성태2/20/2019770VS.NET IDE: 131. Visual Studio 2019 Preview의 닷넷 프로젝트 빌드가 20초 이상 걸리는 경우 [2]
11817정성태2/17/2019693오류 유형: 514. WinDbg Preview 실행 오류 - Error : DbgX.dll : WindowsDebugger.WindowsDebuggerException: Could not load dbgeng.dll
11816정성태2/17/2019558Windows: 157. 윈도우 스토어 앱(Microsoft Store App)을 명령행에서 직접 실행하는 방법
11815정성태2/14/2019804오류 유형: 513. Visual Studio 2019 - VSIX 설치 시 "The extension cannot be installed to this product due to prerequisites that cannot be resolved." 오류 발생
11814정성태2/12/2019516오류 유형: 512. VM(가상 머신)의 NT 서비스들이 자동 시작되지 않는 문제
11813정성태2/12/2019573.NET Framework: 809. C# - ("Save File Dialog" 등의) 대화 창에 확장 속성을 보이는 방법
11812정성태2/11/2019481오류 유형: 511. Windows Server 2003 VM 부팅 후 로그인 시점에 0xC0000005 BSOD 발생
11811정성태2/11/2019616오류 유형: 510. 서버 운영체제에 NVIDIA GeForce Experience 실행 시 wlanapi.dll 누락 문제
11810정성태2/11/2019461.NET Framework: 808. .NET Profiler - GAC 모듈에서 GAC 비-등록 모듈을 참조하는 경우의 문제
11809정성태2/11/2019603.NET Framework: 807. ClrMD를 이용해 메모리 덤프 파일로부터 특정 인스턴스를 참조하고 있는 소유자 확인
11808정성태2/8/20191013디버깅 기술: 123. windbg - 닷넷 응용 프로그램의 메모리 누수 분석
1  2  3  4  5  6  7  [8]  9  10  11  12  13  14  15  ...