WinUI 3 - WebView 2 컨트롤 사용하는 데스크탑 앱 만들기

이전 포스트에서 WinUI3 안정화 버전 출시에 대해서 알려드렸습니다. 이번에는 데스크탑 앱에서 WebView2 컨트롤을 사용하는 방법을 살펴 보도록 하겠습니다.

 

2021.04.09 - [.NET 5, 6 and .NET Conf 2020] - Windows UI 3 - Project Reunion 0.5 안정화 버전 출시

 

WinUI3 - Project Reunion 0.5 설치

필수 환경 

• Windows 10 version 1809 이상
• Visual Studio 2019 16.9 이상
  • Universal Windows Platform development 워크로드 필요
  • Windows 10 SDK (10.0.19041.0) 개별 컴포넌트 탭 -> SDKs, libraries, frameworks 세션 필요
  • .NET 앱을 만들려면 .NET Desktop Development 워크로드 필요
  • C++ 앱을 만들려면 Desktop development with C++ 워크로드 필요

Visual Studio 2019 Extension에 WinUI 3 Project Templates [Preview]가 설치되어 있다면 제거 필수

Tools -> Options -> NuGet Package Manager -> Package Sources -> nuget.org 존재하는지 확인

Extensions -> Manage Extensions -> Project Reunion 검색

Visual Studio 2019를 종료해서 Extension 설치를 완료합니다.

 

Project Reunion을 이용한 프로젝트 생성

Create a new project -> winui 검색 -> Blank App, Packaged (WinUI 3 in Desktop) 선택 후 Next

Projet name : WinUI3Sample -> Create

Target version : Windows 10, version 1809 이상 선택

WinUI3Sample.csproj

<Project Sdk="Microsoft.NET.Sdk">
  <PropertyGroup>
    <OutputType>WinExe</OutputType>
    <TargetFramework>net5.0-windows10.0.19041.0</TargetFramework>
    <TargetPlatformMinVersion>10.0.17763.0</TargetPlatformMinVersion>
    <RootNamespace>WinUI3Sample</RootNamespace>
    <ApplicationManifest>app.manifest</ApplicationManifest>
    <Platforms>x86;x64;arm64</Platforms>
    <RuntimeIdentifiers>win10-x86;win10-x64;win10-arm64</RuntimeIdentifiers>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.ProjectReunion" Version="0.5.0" />
    <PackageReference Include="Microsoft.ProjectReunion.Foundation" Version="0.5.0" />
    <PackageReference Include="Microsoft.ProjectReunion.WinUI" Version="0.5.0" />
    <Manifest Include="$(ApplicationManifest)" />
  </ItemGroup>
</Project>

프로젝트 정보를 확인하면 이 프로젝트는 WPF 프로젝트가 아닙니다.

F5를 눌러서 실행합니다.

WebView2 컨트롤 추가하기

MainWindow.xaml

<Window
    x:Class="WinUI3Sample.MainWindow"
    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:local="using:WinUI3Sample"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <WebView2 Source="https://kaki104.tistory.com" />
</Window>

MainWindow.xaml.cs

using Microsoft.UI.Xaml;

// To learn more about WinUI, the WinUI project structure, and more about our project templates,
// see: http://aka.ms/winui-project-info.

namespace WinUI3Sample
{
    /// <summary>
    /// An empty window that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }
}

F5 실행

실행을 했는데 웹페이지가 출력되지 않고 메시지가 출력된다면 여기에서 Evergreen Bootstrapper를 다운로드 받아서 살치합니다.

F12키를 눌러서 DevTool을 활성화 시킵니다.

정리

WebView2 컨트롤을 사용하기 위해서는 WinUI3 - Project Reunion 0.5를 설치해서 프로젝트를 새로 만들어야지만 사용이 가능합니다. 기존 WPF 프로젝트에 WinUI3 NuGet package를 추가하는 방법은 추후 NuGet 3.0 정식 버전이 나온다면 그 때나 가능할 것 같습니다.

참고

WinUI 3 Project Reunion 0.5 (March 2021) - WinUI | Microsoft Docs