Microsoft MVP성태의 닷넷 이야기
.NET Framework: 1102. .NET Conf Mini 21.08 - WinUI 3 따라해 보기 [링크 복사], [링크+제목 복사]
조회: 826
글쓴 사람
정성태 (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)




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



donaricano-btn



[최초 등록일: ]
[최종 수정일: 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)
12884정성태12/20/2021211개발 환경 구성: 620. Windows 10+에서 WMI root/Microsoft/Windows/WindowsUpdate 네임스페이스 제거
12883정성태12/19/2021141오류 유형: 775. uwsgi-plugin-python3 환경에서 "ModuleNotFoundError: No module named 'django'" 오류 발생
12882정성태12/18/2021252개발 환경 구성: 619. Windows Server에서 WSL을 위한 리눅스 배포본을 설치하는 방법
12881정성태12/17/2021166개발 환경 구성: 618. WSL Ubuntu 20.04에서 파이썬을 위한 uwsgi 설치 방법 (2)
12880정성태12/16/2021255VS.NET IDE: 170. Visual Studio에서 .NET Core/5+ 역어셈블 소스코드 확인하는 방법
12879정성태12/16/2021319오류 유형: 774. Windows Server 2022 + docker desktop 설치 시 WSL 2로 선택한 경우 "Failed to deploy distro docker-desktop to ..." 오류 발생
12878정성태12/15/2021375개발 환경 구성: 617. 윈도우 WSL 환경에서 같은 종류의 리눅스를 다중으로 설치하는 방법
12877정성태12/15/2021249스크립트: 36. 파이썬 - pymysql 기본 예제 코드
12876정성태12/14/2021198개발 환경 구성: 616. Custom Sources를 이용한 Azure Monitor Metric 만들기
12875정성태12/13/2021181스크립트: 35. python - time.sleep(...) 호출 시 hang이 걸리는 듯한 문제
12874정성태12/13/2021190오류 유형: 773. shell script 실행 시 "$'\r': command not found" 오류
12873정성태12/12/2021199오류 유형: 772. 리눅스 - PATH에 등록했는데도 "command not found"가 나온다면?
12872정성태12/12/2021313개발 환경 구성: 615. GoLang과 Python 빌드가 모두 가능한 docker 이미지 만들기
12871정성태12/12/2021288오류 유형: 771. docker: Error response from daemon: OCI runtime create failed
12870정성태12/9/2021234개발 환경 구성: 614. 파이썬 - PyPI 패키지 만들기 (4) package_data 옵션
12869정성태12/8/2021272개발 환경 구성: 613. git clone 실행 시 fingerprint 묻는 단계를 생략하는 방법
12868정성태12/7/2021192오류 유형: 770. twine 업로드 시 "HTTPError: 400 Bad Request ..." 오류
12867정성태12/7/2021210개발 환경 구성: 612. 파이썬 - PyPI 패키지 만들기 (3) entry_points 옵션
12866정성태12/7/2021472오류 유형: 769. "docker build ..." 시 "failed to solve with frontend dockerfile.v0: failed to read dockerfile ..." 오류
12865정성태12/6/2021223개발 환경 구성: 611. 파이썬 - PyPI 패키지 만들기 (2) long_description, cmdclass 옵션
12864정성태12/6/2021181Linux: 46. WSL 환경에서 find 명령을 사용해 파일을 찾는 방법
12863정성태12/4/2021231개발 환경 구성: 610. 파이썬 - PyPI 패키지 만들기
12862정성태12/3/2021201오류 유형: 768. Golang - 빌드 시 "cmd/go: unsupported GOOS/GOARCH pair linux /amd64" 오류
12861정성태12/3/2021253개발 환경 구성: 609. 파이썬 - "Windows embeddable package"로 개발 환경 구성하는 방법
12860정성태12/1/2021223오류 유형: 767. SQL Server - 127.0.0.1로 접속하는 경우 "Access is denied"가 발생한다면?
12859정성태12/1/2021404개발 환경 구성: 608. Hyper-V 가상 머신에 Console 모드로 로그인하는 방법
1  2  [3]  4  5  6  7  8  9  10  11  12  13  14  15  ...