Microsoft MVP성태의 닷넷 이야기
.NET Framework: 1102. .NET Conf Mini 21.08 - WinUI 3 따라해 보기 [링크 복사], [링크+제목 복사]
조회: 1361
글쓴 사람
정성태 (techsharer at outlook.com)
홈페이지
첨부 파일
 

.NET Conf Mini 21.08 - WinUI 3 따라해 보기

마침 .NET Conf에서 정세일 님의 강좌도 있고 하니, ^^

.NET Conf Mini 21.08 - WinUI 3 소개
; https://www.youtube.com/watch?v=i9zw6x6zQLI&t=205s

자, 그럼 따라 해 봅시다. ^^

우선, Microsoft Store에서 여러 가지 컨트롤 사용 예제를 제공하므로 다운로드하고,

Micorosoft Store - WinUI 3 Controls Gallery
; https://www.microsoft.com/en-us/p/winui-3-controls-gallery/9p3jfpwwdzrc

그다음, Visual Studio 2019의 "Extensions" / "Manage Extensions" 메뉴를 선택해 다음의 2가지 확장을 추가합니다.

  • Project Reunion
  • Windows Template Studio

전자의 것만 추가하면 새 프로젝트에 "Blank App, Packaged (WinUI 3 in Desktop)" 템플릿이 보이고, 후자의 것도 함께 추가하면 "App, Packaged (WinUI 3 in Desktop)" 템플릿까지 보일 것입니다.

강의에서는 "App (WinUI 3 in Desktop)" 템플릿으로 다음의 설정과 함께 시작하는데,

프로젝트 유형: MenuBar
Design Pattern: MVVM Toolkit
페이지: Settings, WebView, Content Grid
기능: MSIX Packaging

저는 그냥 "Blank App, Packaged (WinUI 3 in Desktop)" 템플릿을 선택하겠습니다. 아래 화면은, 기본 구조의 솔루션 탐색기 상태와 실행 모습을 보여줍니다.

winui3_app_1.png

특이한 것은, "시작 프로젝트" 설정이 "App1"이 아니라 "App1 (Package)"라는 점인데요, 만약 "Set as Startup Project" 메뉴를 이용해 "App1" 프로젝트로 설정을 바꾸면 다음과 같은 예외가 발생합니다.

System.DllNotFoundException: 'Unable to load DLL 'Microsoft.UI.Xaml.dll' or one of its dependencies: The specified module could not be found. (0x8007007E)'

그러니까, 꼭 "... (Package)" 프로젝트로 Run/Debug 실행을 해야 합니다.




이 상태에서 App.xaml과 MainWindow.xaml을 보면 WPF 응용 프로그램과 거의 다를 바가 없습니다.

<Application
    x:Class="App1.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
                <!-- Other merged dictionaries here -->
            </ResourceDictionary.MergedDictionaries>
            <!-- Other app resources here -->
        </ResourceDictionary>
    </Application.Resources>
</Application>

<Window
    x:Class="App1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Button x:Name="myButton" Click="myButton_Click">Click Me</Button>
    </StackPanel>
</Window>

단지, 이렇게 만든 WinUI 앱은 Windows 10 1809 이상의 버전에서만 동작한다는 차이가 있습니다. 자, 그럼 강의에서처럼 "Microsoft.Graphics.Win2D" 라이브러리를 설치해 주고,

Install-Package Microsoft.Graphics.Win2D

도움말에 따라,

Introduction
; https://microsoft.github.io/Win2D/WinUI3/html/Introduction.htm

CanvasControl Class
; https://microsoft.github.io/Win2D/WinUI3/html/T_Microsoft_Graphics_Canvas_UI_Xaml_CanvasControl.htm

CanvasControl과 함께,

<Window
    x:Class="App1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:canvas="using:Microsoft.Graphics.Canvas.UI.Xaml"
    mc:Ignorable="d">

    <!--<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Button x:Name="myButton" Click="myButton_Click">Click Me</Button>
    </StackPanel>-->
    
    <Grid>
        <canvas:CanvasControl x:Name="canvas" Draw="canvas_Draw" ClearColor="CornflowerBlue"  />
    </Grid>
</Window>

코드도 함께 추가합니다.

private void myButton_Click(object sender, RoutedEventArgs e)
{
    // myButton.Content = "Clicked";
}

private void canvas_Draw(Microsoft.Graphics.Canvas.UI.Xaml.CanvasControl sender, Microsoft.Graphics.Canvas.UI.Xaml.CanvasDrawEventArgs args)
{
    var g = args.DrawingSession;

    g.DrawEllipse(155, 115, 80, 30, Colors.Black, 3);
    g.DrawText("Hello, world!", 100, 100, Colors.Yellow);
}

이후 실행하면 다음과 같은 화면을 볼 수 있습니다.

winui3_app_2.png

거의 WPF 경험을 유사하게 가져갈 수가 있군요. ^^




Microsoft.Graphics.Win2D 참조 추가 후 실행 시 다음과 같은 오류가 발생한다면?

System.DllNotFoundException
  HResult=0x80131524
  Message=Unable to load DLL 'Microsoft.Graphics.Canvas.UI.Xaml.dll' or one of its dependencies: The specified module could not be found. (0x8007007E)
  Source=<Cannot evaluate the exception source>
  StackTrace:
<Cannot evaluate the exception stack trace>

이유는 알 수 없지만 그냥 무시하고 계속 실행하면 됩니다. 하지만, 번번이 뜨는 것이 귀찮으므로 다음 화면처럼 "Break when this exception type is user-unhandled" 옵션을 끄면 됩니다.

winui3_app_3.png

이후로 계속 다음의 오류도 뜰 수 있는데 역시 무시하시면 결국 실행까지 됩니다.

System.Runtime.InteropServices.COMException
  HResult=0x80070000
  Message=The operation completed successfully. (0x80070000)
  Source=System.Private.CoreLib
  StackTrace:
   at System.Runtime.InteropServices.Marshal.ThrowExceptionForHR(Int32 errorCode) in /_/src/libraries/System.Private.CoreLib/src/System/Runtime/InteropServices/Marshal.cs:line 601
   at WinRT.DllModule..ctor(String fileName)
   at WinRT.DllModule.Load(String fileName)
   at WinRT.BaseActivationFactory..ctor(String typeNamespace, String typeFullName)

System.IO.FileNotFoundException
  HResult=0x8007007E
  Message=The specified module could not be found. (0x8007007E)
  Source=System.Private.CoreLib
  StackTrace:
   at System.Runtime.InteropServices.Marshal.ThrowExceptionForHR(Int32 errorCode) in /_/src/libraries/System.Private.CoreLib/src/System/Runtime/InteropServices/Marshal.cs:line 601
   at WinRT.DllModule..ctor(String fileName)
   at WinRT.DllModule.Load(String fileName)
   at WinRT.BaseActivationFactory..ctor(String typeNamespace, String typeFullName)




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







[최초 등록일: ]
[최종 수정일: 8/23/2021]

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

비밀번호

댓글 작성자
 




1  2  3  4  [5]  6  7  8  9  10  11  12  13  14  15  ...
NoWriterDateCnt.TitleFile(s)
12966정성태2/13/2022452.NET Framework: 1155. C# - ffmpeg(FFmpeg.AutoGen): Bitmap으로부터 yuv420p + rawvideo 형식의 파일로 쓰기파일 다운로드1
12965정성태2/13/2022624.NET Framework: 1154. "Hanja Hangul Project v1.01 (파이썬)"의 C# 버전
12964정성태2/11/2022509.NET Framework: 1153. C# - ffmpeg(FFmpeg.AutoGen)를 이용한 avio_reading.c 예제 포팅파일 다운로드1
12963정성태2/11/2022513.NET Framework: 1152. C# - 화면 캡처한 이미지를 ffmpeg(FFmpeg.AutoGen)로 동영상 처리 (저해상도 현상 해결)파일 다운로드1
12962정성태2/9/2022431오류 유형: 793. 마이크로소프트 스토어 - 제품이 존재하지 않습니다. 재고가 없는 것일 수 있습니다.
12961정성태2/8/2022616.NET Framework: 1151. C# - ffmpeg(FFmpeg.AutoGen)를 이용한 비디오 프레임의 크기 및 포맷 변경 예제(scaling_video.c) [7]파일 다운로드1
12960정성태2/8/2022593개발 환경 구성: 637. ffmpeg(FFmpeg.AutoGen)를 이용한 비디오 디코딩 예제(decode_video.c) - 세 번째 이야기
12959정성태2/7/2022773.NET Framework: 1150. C# - ffmpeg(FFmpeg.AutoGen)를 이용한 비디오 디코딩 예제(decode_video.c) - 두 번째 이야기 [2]파일 다운로드1
12958정성태2/6/2022626.NET Framework: 1149. C# - ffmpeg(FFmpeg.AutoGen) - 비디오 프레임 디코딩 [2]파일 다운로드1
12957정성태2/6/2022565개발 환경 구성: 636. ffmpeg.exe를 이용해 planar 포맷의 데이터를 packed 형식으로 변환하는 방법? [2]
12956정성태2/4/2022530.NET Framework: 1148. C# - ffmpeg(FFmpeg.AutoGen) - decoding 과정 [2]파일 다운로드1
12955정성태2/4/2022529개발 환경 구성: 635. 비주얼 스튜디오에서 실행하던 ASP.NET Core (.NET Framework) 응용 프로그램을 명령행에서 실행하는 방법 (2)
12954정성태2/4/2022357VS.NET IDE: 173. 비주얼 스튜디오 - Output 창에 색상이 지정된 출력 결과가 "[39m[22m" 식의 문자로 나오는 문제
12953정성태2/2/2022544Linux: 48. Windows 11 + WSL 우분투 GUI 환경에서 한글 출력
12952정성태2/2/2022409.NET Framework: 1148. C# - ffmpeg(FFmpeg.AutoGen)를 이용한 오디오 필터 예제(filter_audio.c)파일 다운로드1
12951정성태2/2/2022419.NET Framework: 1147. C# - ffmpeg(FFmpeg.AutoGen)를 이용한 오디오 필터링 예제(filtering_audio.c)파일 다운로드1
12950정성태2/1/2022468.NET Framework: 1146. .NET 6에 추가되지 않은 Generic Math (예: INumber<T>)
12949정성태2/1/2022399.NET Framework: 1145. C# - ffmpeg(FFmpeg.AutoGen) - Codec 정보 열람 및 사용 준비파일 다운로드1
12948정성태1/30/2022501.NET Framework: 1144. C# - ffmpeg(FFmpeg.AutoGen) AVFormatContext를 이용해 ffprobe처럼 정보 출력파일 다운로드1
12947정성태1/30/2022375개발 환경 구성: 634. ffmpeg.exe - 기존 동영상 컨테이너에 다중 스트림을 추가하는 방법
12946정성태1/28/2022428오류 유형: 792. .NET Core - 로컬 개발 중에 docker 호스팅으로 바꾸는 경우 SQL 서버 접근 방법
12945정성태1/28/2022470오류 유형: 791. SQL 서버 로그인 시 localhost는 되고, 127.0.0.1로는 안 되는 문제
12944정성태1/28/2022706.NET Framework: 1143. C# - Entity Framework Core 6 개요
12943정성태1/27/2022448.NET Framework: 1142. .NET 5+로 포팅 시 플랫폼 호환성 경고 메시지(SYSLIB0006, SYSLIB0011, CA1416)파일 다운로드1
12942정성태1/27/2022505.NET Framework: 1141. XmlSerializer와 Dictionary 타입파일 다운로드1
12941정성태1/26/2022358오류 유형: 790. AKS/k8s - pod 상태가 Pending으로 지속되는 경우
1  2  3  4  [5]  6  7  8  9  10  11  12  13  14  15  ...