티스토리 뷰
이전 포스트에서 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
'.NET 5, 6, 7' 카테고리의 다른 글
SocketException: An attempt was made to access a socket in a way forbidden by its access permissions (0) | 2021.08.12 |
---|---|
.NET Framework 4.5.2, 4.6, 4.6.1 will reach End of Support on April 26, 2022 (0) | 2021.04.29 |
WinUI 3 - Project Reunion 0.5 안정화 버전 출시 (0) | 2021.04.09 |
Encapsulation (캡슐화) (0) | 2021.04.07 |
Separation of concerns (관심사의 분리) (2) | 2021.04.06 |
- Total
- Today
- Yesterday
- C#
- Microsoft
- #Windows Template Studio
- dotNETconf
- LINQ
- UWP
- .net
- XAML
- ef core
- windows 11
- WPF
- #prism
- ComboBox
- .net 5.0
- Windows 10
- Build 2016
- #MVVM
- uno-platform
- kiosk
- Visual Studio 2022
- PRISM
- Always Encrypted
- #uwp
- visual studio 2019
- MVVM
- IOT
- Behavior
- uno platform
- Bot Framework
- Cross-platform
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |