Skip to content
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions GettingStartedGuides/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
# Getting Started tutorial projects

<!-- only enough info to differentiate this dir level vs the others; what is different about this dir compared to the sibling dirs? -->
These are completed Visual Studio projects that result from following the steps in the [Getting Started tutorials](https://docs.microsoft.com/microsoft-edge/webview2/get-started/get-started).
11 changes: 6 additions & 5 deletions GettingStartedGuides/WPF_GettingStarted/README.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
---
description: "Getting started with WebView2 in WPF doc"
description: "Completed Visual Studio project from the tutorial Get started with WebView2 in WPF apps."
languages:
- csharp
page_type: sample
products:
- microsoft-edge
urlFragment: webview2-wpf-getting-started
urlFragment: WPF_GettingStarted
---
# Getting Started with WebView2 in WPF
# Get started with WebView2 in WPF apps

This sample relates to the [Getting started with WebView2 in WPF](https://docs.microsoft.com/microsoft-edge/webview2/gettingstarted/wpf) doc.
<!-- only enough info to differentiate this sample vs the others; what is different about this sample compared to the sibling samples? -->
This sample, **WPF_GettingStarted**, is the completed Visual Studio project that results from following the steps in the tutorial [Get started with WebView2 in WPF apps](https://docs.microsoft.com/microsoft-edge/webview2/get-started/wpf).

![sample snapshot](https://raw.githubusercontent.com/MicrosoftDocs/edge-developer/main/microsoft-edge/webview2/get-started/media/wpf-getting-started-app.png)
![The running app from the finished WinUI 3 (Windows App SDK) tutorial](screenshots/wpf-getting-started-bing.png)
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 6 additions & 5 deletions GettingStartedGuides/Win32_GettingStarted/README.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
---
description: "Getting started with WebView2 for Win32 apps doc"
description: "Completed Visual Studio project from the tutorial Get started with WebView2 in Win32 apps."
languages:
- cpp
page_type: sample
products:
- microsoft-edge
urlFragment: webview2-win32-getting-started
urlFragment: Win32_GettingStarted
---
# Getting Started with WebView2 for Win32 apps
# Get started with WebView2 in Win32 apps

This sample relates to the [Getting started with WebView2 for Win32 apps](https://docs.microsoft.com/microsoft-edge/webview2/gettingstarted/win32) doc.
<!-- only enough info to differentiate this sample vs the others; what is different about this sample compared to the sibling samples? -->
This sample, **Win32_GettingStarted**, is the completed Visual Studio project that results from following the steps in the tutorial [Get started with WebView2 in Win32 apps](https://docs.microsoft.com/microsoft-edge/webview2/get-started/win32).

![sample snapshot](https://raw.githubusercontent.com/MicrosoftDocs/edge-developer/main/microsoft-edge/webview2/media/bing-window.png)
![The running app from the finished Win32 tutorial](screenshots/bing-window.png)
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 changes: 15 additions & 0 deletions GettingStartedGuides/WinForms_GettingStarted/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
---
description: "Completed Visual Studio project from the tutorial Get started with WebView2 in WinForms apps."
languages:
- csharp
page_type: sample
products:
- microsoft-edge
urlFragment: WinForms_GettingStarted
---
# Get started with WebView2 in WinForms apps

<!-- only enough info to differentiate this sample vs the others; what is different about this sample compared to the sibling samples? -->
This sample, **WinForms_GettingStarted**, is the completed Visual Studio project that results from following the steps in the tutorial [Get started with WebView2 in WinForms apps](https://docs.microsoft.com/microsoft-edge/webview2/get-started/winforms).

![The running app from the finished WinForms tutorial](screenshots/winforms-bing.png)
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 6 additions & 5 deletions GettingStartedGuides/WinUI3_GettingStarted/README.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
---
description: "Getting started with WebView2 in WinUI3 doc"
description: "Completed Visual Studio project from the tutorial Get started with WebView2 in WinUI 3 (Windows App SDK) apps."
languages:
- csharp
page_type: sample
products:
- microsoft-edge
urlFragment: webview2-winui3-getting-started
urlFragment: WinUI3_GettingStarted
---
# Getting Started with WebView2 in WinUI3
# Get started with WebView2 in WinUI 3 (Windows App SDK) apps

This sample relates to the [Getting started with WebView2 in WinUI3](https://docs.microsoft.com/microsoft-edge/webview2/gettingstarted/winui) doc.
<!-- only enough info to differentiate this sample vs the others; what is different about this sample compared to the sibling samples? -->
This sample, **WinUI3_GettingStarted**, is the completed Visual Studio project that results from following the steps in the tutorial [Get started with WebView2 in WinUI 3 (Windows App SDK) apps](https://docs.microsoft.com/microsoft-edge/webview2/get-started/winui).

![sample snapshot](https://raw.githubusercontent.com/MicrosoftDocs/edge-developer/main/microsoft-edge/webview2/get-started/media/winui-getting-started-part-3.png)
![The running app from the finished WinUI 3 (Windows App SDK) tutorial](screenshots/getting-started-part-3.png)
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
62 changes: 10 additions & 52 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,63 +1,21 @@
# WebView2 Samples

This repository contains getting started apps as well as sample apps that demonstrate the features and usage patterns of [WebView2](https://docs.microsoft.com/microsoft-edge/webview2/). As we add more features to WebView2, we will regularly update our samples.
Welcome to the WebView2Samples repo. This repo contains several types of samples for WebView2:

In the [GettingStarted](./GettingStartedGuides/) folder you will find the starter code for its respective guide listed below:
- [Win32 Getting Started](https://docs.microsoft.com/microsoft-edge/webview2/gettingstarted/win32)
- [WPF Getting Started](https://docs.microsoft.com/microsoft-edge/webview2/gettingstarted/wpf)
- [WinForms Getting Started](https://docs.microsoft.com/microsoft-edge/webview2/gettingstarted/winforms)
- [WinUI Getting Started](https://docs.microsoft.com/microsoft-edge/webview2/gettingstarted/winui)
* Getting Started tutorial projects - Completed Visual Studio projects that result from following the steps in the [Getting Started tutorials](https://docs.microsoft.com/microsoft-edge/webview2/get-started/get-started).

In the [SampleApps](./SampleApps/) folder you will find:
- [WebView2Samples.sln](SampleApps/WebView2Samples.sln) - a collective solution that includes [WebView2APISample.vcxproj](SampleApps/WebView2APISample/WebView2APISample.vcxproj), [WebView2SampleWinComp.vcxproj](SampleApps/WebView2SampleWinComp/WebView2SampleWinComp.vcxproj), [WebView2WpfBrowser.csproj](SampleApps/WebView2WpfBrowser/WebView2WpfBrowser.csproj), [WebView2WindowsFormsBrowser.csproj](SampleApps/WebView2WindowsFormsBrowser/WebView2WindowsFormsBrowser.csproj), [WV2DeploymentWiXCustomActionSample](/SampleApps/WV2DeploymentWiXCustomActionSample/README.md), and [WV2DeploymentWiXBurnBundleSample](/SampleApps/WV2DeploymentWiXBurnBundleSample/README.md).
* Sample apps - WebView2 sample apps for various frameworks and platforms, as Visual Studio projects. For more information, see [Sample apps](https://docs.microsoft.com/microsoft-edge/webview2/code-samples-links).

Share feedback in the [WebView2 Feedback repo](https://aka.ms/webviewfeedback).
* Deployment samples - Samples that demonstrate deploying the WebView2 Runtime. For more information, see [Deployment samples](https://docs.microsoft.com/microsoft-edge/webview2/samples/deployment-samples).

## Win32 C/C++

#### Getting Started
#### Open Source repo

Start with the [Win32 WebView2 getting-started guide](https://docs.microsoft.com/microsoft-edge/webview2/gettingstarted/win32) to learn how to setup a WebView within a Win32 application.
This repo follows the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). See the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/). Contact [email protected] with any additional questions or comments.

This guide uses the [Win32_GettingStarted](./GettingStartedGuides/Win32_GettingStarted) sample code from the [GettingStartedGuides](./GettingStartedGuides/) directory.

#### Comprehensive API Sample
#### See also

The **Win32 C++ Sample** is in the [WebView2APISample](./SampleApps/WebView2APISample) directory and [WebView2SampleWinComp](./SampleApps/WebView2SampleWinComp) directory.

#### Multiple WebViews Sample

The [WebView2Browser](https://github.com/MicrosoftEdge/WebView2Browser) is an additional Win32 WebView2 sample project that uses multiple WebViews in a single application. Clone this project by running `git clone https://github.com/MicrosoftEdge/WebView2Browser.git`.

Follow the [WebView2Browser guide](https://github.com/MicrosoftEdge/WebView2Browser) to learn how to build an application that utilizes multiple WebViews.

## .NET (WPF and Windows Forms)

#### Getting Started

* Read the [WPF getting started guide](https://docs.microsoft.com/microsoft-edge/webview2/gettingstarted/wpf) for WebView2 in WPF applications.

* See the [Windows Forms getting started guide](https://docs.microsoft.com/microsoft-edge/webview2/gettingstarted/winforms) for WebView2 in WinForms applications.

#### Comprehensive API Sample

* The **WPF Sample** is in the [WebView2WpfBrowser](./SampleApps/WebView2WpfBrowser) directory.
* The **Windows Forms Sample** is in the [WebView2WindowsFormsBrowser](./SampleApps/WebView2WindowsFormsBrowser) directory.

## UWP/WinUI

The **UWP WinUI Sample** is in the [WinUI Controls Gallery](https://github.com/microsoft/Xaml-Controls-Gallery/tree/winui3preview) directory.

## WebView2 Deployment

To help developers understand how to [deploy Evergreen WebView2 Runtime](https://docs.microsoft.com/microsoft-edge/webview2/concepts/distribution#deploying-the-evergreen-webview2-runtime) with your applications, see the following samples:

* [WV2DeploymentWiXCustomActionSample](/SampleApps/WV2DeploymentWiXCustomActionSample/README.md) creates a [WiX](https://wixtoolset.org/) installer for [WebView2APISample](./SampleApps/WebView2APISample/README.md) and uses [WiX Custom Action](https://wixtoolset.org/documentation/manual/v3/wixdev/extensions/authoring_custom_actions.html) to chain-install the Evergreen WebView2 Runtime.
* [WV2DeploymentWiXBurnBundleSample](/SampleApps/WV2DeploymentWiXBurnBundleSample/README.md) creates a [WiX](https://wixtoolset.org/) installer for [WebView2APISample](./SampleApps/WebView2APISample/README.md) and uses [WiX Burn Bundle](https://wixtoolset.org/documentation/manual/v3/bundle/) to chain-install the Evergreen WebView2 Runtime.
* [WV2DeploymentVSInstallerSample](/SampleApps/WV2DeploymentVSInstallerSample/README.md) uses the [Microsoft Visual Studio Installer Projects](https://marketplace.visualstudio.com/items?itemName=visualstudioclient.MicrosoftVisualStudio2017InstallerProjects) to create an installer for [WebView2APISample](./SampleApps/WebView2APISample/README.md) and chain-install the Evergreen WebView2 Runtime.

## Next Steps

* See [Introduction to Microsoft Edge WebView2](https://aka.ms/webview) to learn more about WebView2.
* To submit an issue specifically about this repo, see [Issues | MicrosoftEdge\/WebView2Samples](https://github.com/MicrosoftEdge/WebView2Samples/issues).
* Share feedback about the WebView2 control in the [WebView2 Feedback repo](https://aka.ms/webviewfeedback).
* [Introduction to Microsoft Edge WebView2](https://aka.ms/webview).
* To submit an issue specifically about this repo, see [Issues | MicrosoftEdge\/WebView2Samples](https://github.com/MicrosoftEdge/WebView2Samples/issues).
* Share feedback about the WebView2 control in the [WebView2 Feedback repo](https://aka.ms/webviewfeedback).
8 changes: 8 additions & 0 deletions SampleApps/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
# Sample apps and Deployment samples

<!-- only enough info to differentiate this dir level vs the others; what is different about this dir compared to the sibling dirs? -->
This directory contains:

* Sample apps - WebView2 sample apps for various frameworks and platforms, as Visual Studio projects. For more information, see [Sample apps](https://docs.microsoft.com/microsoft-edge/webview2/code-samples-links).

* Deployment samples - Samples that demonstrate deploying the WebView2 Runtime. For more information, see [Deployment samples](https://docs.microsoft.com/microsoft-edge/webview2/samples/deployment-samples).
36 changes: 7 additions & 29 deletions SampleApps/WV2CDPExtensionWPFSample/README.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
description: "Demonstrate the usage patterns of WebView2 CDP Extension in WPF."
description: "Demonstrates the usage patterns of WebView2 and the WebView2 CDP Extension in WPF apps."
extendedZipContent:
-
path: SharedContent
Expand All @@ -12,37 +12,15 @@ languages:
page_type: sample
products:
- microsoft-edge
urlFragment: WV2CDPExtensionSample
urlFragment: WV2CDPExtensionWPFSample
---
# WebView2 CDP Extension

This application built with the [WebView2 CDP Extension](https://aka.ms/webviewcdp) that defines all CDP methods, events, and types.
<!-- only enough info to differentiate this sample vs the others; what is different about this sample compared to the sibling samples? -->
This sample, **WV2CDPExtensionWPFSample**, is built with the WebView2 CDP Extension. This sample calls Chrome DevTools Protocol (CDP) methods on a `DevToolsProtocolHelper` object in WebView2.

The WV2CDPExtensionSample showcases of Utilizing Chrome DevTools Protocol functions using a DevToolsProtocolHelper object in WebView2. It is built as a WPF [Visual Studio 2019](https://visualstudio.microsoft.com/vs/) project and makes use of C# in the WebView2 environment.
This sample is built as a WPF Visual Studio 2019 project. It uses C# in the WebView2 environment.

If this is your first time using WebView2, we recommend first following the [Getting Started](https://docs.microsoft.com/microsoft-edge/webview2/gettingstarted/wpf) guide, which goes over how to create a WebView2 and walks through some basic WebView2 functionality.
To use this sample, see [WPF sample app with CDP extension](https://docs.microsoft.com/microsoft-edge/webview2/samples/wv2cdpextensionwpfsample).

## Prerequisites

- [Microsoft Edge (Chromium)](https://www.microsoftedgeinsider.com/download/) installed on a supported OS. Currently we recommend the latest version of the Edge Canary channel.
- [Visual Studio](https://visualstudio.microsoft.com/vs/) with .NET support installed.
- Latest version of our [WebView2 SDK](https://aka.ms/webviewnuget), which is included in this project.
- Latest release version of our [WebView2 CDP Extension](https://aka.ms/webviewcdpnuget), which is included in this project.

## Build the WebView2 WPF Browser

Clone the repository and open the solution in Visual Studio. WebView2 and WebView2 DevToolsProtocolExtension is already included as a NuGet package* in this project.

- Open the solution in Visual Studio 2019**
- Set the target you want to build (Debug/Release, AnyCPU)
- Build the project file: _WV2CDPExtensionSample.csproj_

That's it! Everything should be ready to just launch the app.

*You can get the WebView2 and WebView2 DevToolsProtocolExtension NugetPackage through the Visual Studio NuGet Package Manager.

**You can also use Visual Studio 2017 by changing the project's Platform Toolset in Project Properties/Configuration properties/General/Platform Toolset. You might also need to change the Windows SDK to the latest version available to you.

## Code of Conduct

This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [email protected] with any additional questions or comments.
![CDP Extension sample app running](screenshots/wv2cdpextensionwpfsample-app-running.png)
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading