C# EDGE 대응에 대해서..

IE를 사용하던 기존방식에서 2022년 6월경을 기준으로 서비스가 종료되기에 빠른대응이 필요하게 되었다.
Edge 기반의 WebView 컨트롤을 WPF와 Windows 폼으로 사용하여 대응이 되기에 이 부분에 대해서 다루어 보고자 한다.

POINT Edge 기반 WebView 컨트롤을 활용하는 방법 NuGet에서 Windows Community Toolkit v3.0 도입 Windows Forms 프로젝트의 경우 도구 상자에 WebView 컨트롤 추가 Windows Form 또는 WPF 앱의 UI에 WebView 컨트롤 추가 NavigationStarting/NavigationCompleted 이벤트 핸들러 등을 필요에 따라 구현

 

Edge 기반 WebView 컨트롤

 이 새로운 WebView 컨트롤은 Windows Community Toolkit v3.0 에 포함되어 있습니다. OSS로 개발되었으며 소스 코드는 GitHub 에 공개되어 있습니다.

 Edge 기반이므로, 최신의 Web 페이지에서도 Edge 브라우저와 같은 표시가 된다. API는 UWP의 WebView 컨트롤을 거의 준수하므로 사용하기 쉽습니다 (단, UWP 버전과 달리 속성은 데이터 바인딩을 지원하지 않습니다)

 예를 들면, URL의 캐릭터 라인을 주어 그 웹 페이지를 표시시키려면 , 다음의 코드와 같이 Navigate 메소드 를 사용한다.

  this.WebView1.Navigate(uri);

그러면 NavigationStarting 이벤트 와 그 뒤에 NavigationCompleted 이벤트 가 발생하기 때문에, 예를 들면 다음 코드와 같이 네비게이션 이벤트를 처리한다.

using Microsoft.Toolkit.Win32.UI.Controls.Interop.WinRT;

// 탐색 시작시 발생하는 이벤트
private void WebView1_NavigationStarting (object sender,
               WebViewControlNavigationStartingEventArgs e)
{
  // e.Cancel = false를 설정하는 것으로, 네비게이션을 취소 가능
}

// 네비게이션 완료시에 발생하는 이벤트
private void WebView1_NavigationCompleted (object sender,
               WebViewControlNavigationCompletedEventArgs e)
{
  if (e.IsSuccess)
  {
    // WebView1.DocumentTitle이 웹 페이지 제목
  }
  else
  {
    // 표시하지 못했습니다
    // e.WebErrorStatus에서 오류를 알 수 있습니다
  }
}

 

프로젝트 준비작업

• Windows 10 1803(빌드 17110) 이상
• Visual Studio 2017 이상
• .NET Framework 4.6.2 이상

Visual Studio에서 프로젝트를 만들 때 .NET Framework 버전을 4.6.2 이상으로 설정이 필요합니다.
우선, 윈도우 폼 기반으로 프로젝트를 생성합니다.

윈도우폼 기반 프로젝트 생성

그리고 Microsoft.Toolkit.Win32 를 NuGet manager 에서 검색하여 설치합니다.

Microsoft.Toolkit.Win32 설치

 

Windows Forms에서 새로운 WebView 컨트롤을 사용하는 방법

　Windows 폼의 경우는, NuGet 패키지를 도입해도 Visual Studio의 툴 박스에 컨트롤이 추가되지 않는다. 이 때문에, 다음 단계와 같이 도구 상자에 추가합니다.

1. Windows Forms 프로젝트에서 Form Editor 열기
2. 도구 상자의 빈 곳을 마우스 오른쪽 버튼으로 클릭하고 나온 컨텍스트 메뉴에서 [항목 선택]을 선택합니다.
3. 나온 도구 상자 항목 선택 대화 상자에서 .NET Framework 구성 요소 탭을 선택하고 표시가 완료 될 때까지 기다립니다.
4. 오른쪽 하단의 찾아보기 버튼을 클릭하여 NuGet 패키지의 "Microsoft.Toolkit.Win32.UI.Controls.dll"파일을 찾아서 엽니 다.
5. [도구 상자 항목 선택] 대화 상자로 돌아오면 [확인] 버튼을 클릭합니다.

　위의 절차에서 "Microsoft.Toolkit.Win32.UI.Controls.dll"파일은 Windows Community Toolkit v3.0의 경우 다음 경로에 있습니다.

C:\Users\{사용자 이름}\.nuget\packages\microsoft.toolkit.win32.ui.controls\5.0.0\lib\net462