Skip to content

Commit

Permalink
Move samples repos Readme content into regular Docs (#2069)
Browse files Browse the repository at this point in the history
* Merged-in top half of Readme content removed per WebView2Samples PR 140

* Linkfix, add pngs from samples repo

* note to remove png from other repo

* Ref link fix, tag table ref items

* Improved format of Deploy samples

* alt text

* linkfix, alt text

* Start doc'ing toolset versions

* Fix png path

* Started WinUI 3 Sample article

* Added the Readme info for WiX Custom Action

* Link to custom action sample

* Linkfix

* Clarify product.xml 3 lines/options

* Samples use VS2019

* Linkfix

* Refresh code blocks for GetStart Win32 per PR 144

* Try to reference code snippet by label id if possible

* Try absolute path

* Try range and different path

* Use updated descriptive snippet ids

* Describe menus of some sample apps

* Indent code

* Polish VS Deploy

* Table cleanup

* Hello World

* Red lines to boxes

* Inc'd review comments entered in dest. PR

Co-authored-by: Michael Hoffman <v-mhoffman@microsoft.com>
Co-authored-by: Jessica Chen <peiche@microsoft.com>
Co-authored-by: Patrick Brosset <patrickbrosset@gmail.com>
  • Loading branch information
4 people authored Sep 16, 2022
1 parent 1e6a415 commit e845ee6
Show file tree
Hide file tree
Showing 75 changed files with 2,311 additions and 881 deletions.
Binary file added microsoft-edge/media/windows-keyboard-logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
25 changes: 17 additions & 8 deletions microsoft-edge/toc.yml
Original file line number Diff line number Diff line change
Expand Up @@ -1025,10 +1025,27 @@
href: webview2/code-samples-links.md
displayName:

- name: Win32 sample app
href: webview2/samples/webview2apissample.md
displayName: WebView2APISample, SampleApps, Win32 sample app # repo dir names, top-of-page title

- name: Win32 sample app with Visual Composition
href: webview2/samples/webview2samplewincomp.md
displayName: WebView2SampleWinComp, Win32 sample app with Visual Composition # repo dir name, top-of-page title

- name: Win32 sample WebView2Browser
href: webview2/samples/webview2browser.md
displayName: WebView2Browser # repo dir name

- name: WinUI 2 (UWP) sample app
href: webview2/samples/webview2_sample_uwp.md
displayName: webview2_sample_uwp, WinUI 2 (UWP) sample app # repo dir name, top-of-page title

# pending, July 26 2022
# - name: WinUI 3 sample app
# href: webview2/samples/webview2-winui3-sample.md
# displayName: WebView2_WinUI3_Sample # repo dir name

- name: WPF sample app
href: webview2/samples/webview2wpfbrowser.md
displayName: WebView2WpfBrowser, WPF sample app # repo dir name, top-of-page title
Expand All @@ -1041,14 +1058,6 @@
href: webview2/samples/webview2windowsformsbrowser.md
displayName: WebView2WindowsFormsBrowser, WinForms sample app # repo dir name, top-of-page title

- name: Win32 sample app
href: webview2/samples/webview2apissample.md
displayName: WebView2APISample, SampleApps, Win32 sample app # repo dir names, top-of-page title

- name: Win32 sample app with Visual Composition
href: webview2/samples/webview2samplewincomp.md
displayName: WebView2SampleWinComp, Win32 sample app with Visual Composition # repo dir name, top-of-page title

# -----------------------------------------------------------------------------
# Deployment samples
- name: Deployment samples
Expand Down
32 changes: 14 additions & 18 deletions microsoft-edge/webview2/code-samples-links.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,21 +6,25 @@ ms.author: msedgedevrel
ms.topic: conceptual
ms.prod: microsoft-edge
ms.technology: webview
ms.date: 07/18/2022
ms.date: 08/29/2022
---
# Sample apps

Sample apps that use WebView2 are available in the [WebView2Samples repo](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/SampleApps), for various frameworks or platforms.

| Framework or platform | Article | Sample in repo | Comments |
|---|---|---|---|
| WinUI 2 (UWP) | [WinUI 2 (UWP) sample app](samples/webview2_sample_uwp.md) | [webview2_sample_uwp](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/SampleApps/webview2_sample_uwp) | &nbsp; |
| WinUI 3 (Windows App SDK) | n/a | n/a | [Tutorial](get-started/winui.md).<br/> [Completed tutorial project](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/GettingStartedGuides/WinUI3_GettingStarted). |
| WPF | [WPF sample app](samples/webview2wpfbrowser.md) | [WebView2WpfBrowser](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/SampleApps/WebView2WpfBrowser) | &nbsp; |
| WPF with CDP | [WPF app with CDP extension](samples/wv2cdpextensionwpfsample.md) | [WV2CDPExtensionWPFSample](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/SampleApps/WV2CDPExtensionWPFSample) | &nbsp; |
| WinForms | [WinForms sample app](samples/webview2windowsformsbrowser.md) | [WebView2WindowsFormsBrowser](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/SampleApps/WebView2WindowsFormsBrowser) | &nbsp; |
| Win32 | [Win32 sample app](samples/webview2apissample.md) | [WebView2APISample](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/SampleApps/WebView2APISample) | Main sample; extensive. Detailed Readme. |
| Win32 with Visual Composition | [Win32 sample app with Visual Composition](samples/webview2samplewincomp.md) | [WebView2SampleWinComp](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/SampleApps/WebView2SampleWinComp) | &nbsp; |
| Article | Sample | Notes |
|---|---|---|
| [Win32 sample app](samples/webview2apissample.md) | [WebView2APISample](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/SampleApps/WebView2APISample) | Main sample; extensive. |
| [Win32 sample app with Visual Composition](samples/webview2samplewincomp.md) | [WebView2SampleWinComp](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/SampleApps/WebView2SampleWinComp) | Windows Runtime Composition APIs leverage the Windows UI in Win32 app. |
| [WebView2Browser (Win32 C++/JS)](samples/webview2browser.md) | [WebView2Browser repo](https://github.com/MicrosoftEdge/WebView2Browser) | Uses multiple WebView2 instances. A major sample; has its own repo. |
| [WinUI 2 (UWP) sample app](samples/webview2_sample_uwp.md) | [webview2_sample_uwp](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/SampleApps/webview2_sample_uwp) | &nbsp; |
| [WPF sample app](samples/webview2wpfbrowser.md) | [WebView2WpfBrowser](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/SampleApps/WebView2WpfBrowser) | &nbsp; |
| [WPF app with CDP extension](samples/wv2cdpextensionwpfsample.md) | [WV2CDPExtensionWPFSample](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/SampleApps/WV2CDPExtensionWPFSample) | Use Chrome DevTools Protocol APIs in a WPF app. |
| [WinForms sample app](samples/webview2windowsformsbrowser.md) | [WebView2WindowsFormsBrowser](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/SampleApps/WebView2WindowsFormsBrowser) | &nbsp; |

<!--
| [WinUI 3 (Windows App SDK) sample app](./samples/webview2-winui3-sample.md) | _pending_ PR: https://github.com/MicrosoftEdge/WebView2Samples/pull/142 [WebView2_WinUI3_Sample](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/SampleApps/WebView2_WinUI3_Sample) | [Tutorial](get-started/winui.md).<br/> [Completed tutorial project](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/GettingStartedGuides/WinUI3_GettingStarted). |
-->

These articles provide the specific steps to set up your machine and build, run, and update each sample.

Expand All @@ -32,14 +36,6 @@ The sample apps are the source of the sample code snippets that are shown in the
For some frameworks or platforms, the samples repo contains both a completed Getting Started tutorial and a sample app. These sample apps showcase more of the WebView2 APIs than the Getting Started tutorials.


#### Installed SDK package versions

Typically, for these samples, you do the following sequence:
1. Build and run the sample as-is from the repo.
1. Update the sample's project's packages, such as the WebView2 prerelease SDK. The prerelease SDK allows you to try the latest APIs.
1. Build and run the sample using the updated SDK packages.


<!-- ====================================================================== -->
## See also

Expand Down
2 changes: 1 addition & 1 deletion microsoft-edge/webview2/concepts/basic-authentication.md
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ For more information, see [Navigation events for WebView2 apps](navigation-event

The following diagram shows the flow of navigation events for basic authentication for WebView2 apps:

![Flow of navigation events for basic authentication for WebView2 apps.](basic-authentication-images/basic-auth-page-nav-flow.png)
![Flow of navigation events for basic authentication for WebView2 apps](basic-authentication-images/basic-auth-page-nav-flow.png)
<!-- initial Visio filename: https://microsoft-my.sharepoint.com/ ... "Basic Auth in Page Nav Flow.vsd"
later, check: Teams > Team > channel > Files > dir > filename -->

Expand Down
4 changes: 2 additions & 2 deletions microsoft-edge/webview2/concepts/distribution.md
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ Cons:

The [Download the WebView2 Runtime](https://developer.microsoft.com/microsoft-edge/webview2#download-section) section of the **Microsoft Edge WebView2** page provides several options for distributing the WebView2 Runtime onto client machines. Understanding the options at this page provides a good introduction, to help decide which approach you want to use.

![Options for distributing and updating the WebView2 Runtime.](../media/runtime-distrib-options.png)
![Options for distributing and updating the WebView2 Runtime](../media/runtime-distrib-options.png)

The Evergreen distribution mode is recommended for most apps.

Expand Down Expand Up @@ -332,7 +332,7 @@ To use the Fixed Version distribution mode:

1. To confirm that PlayReady is installed correctly, in the **Security** tab of the **Fixed Version** folder, make sure permissions are granted for `ALL APPLICATION PACKAGES` and `ALL RESTRICTED APPLICATION PACKAGES`, as shown below:

![Permission for PlayReady.](../media/play-ready-permission.png)
![Permission for PlayReady](../media/play-ready-permission.png)


<!-- ====================================================================== -->
Expand Down
2 changes: 1 addition & 1 deletion microsoft-edge/webview2/concepts/navigation-events.md
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ The normal sequence of navigation events is:

The following events describe the state of WebView2 during each navigation action:

![WebView2 Navigation Events.](../media/navigation-graph.png)
![WebView2 Navigation Events](../media/navigation-graph.png)

| Sequence | Event name | Details |
| --- | --- | --- |
Expand Down
4 changes: 2 additions & 2 deletions microsoft-edge/webview2/concepts/process-model.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ A _WebView2 process group_ is a collection of WebView2 Runtime processes. A Web
* One or more renderer processes.
* Other helper processes, such as the GPU process and the Audio service process.

![Process 1.](../media/process-model-1.png)
![Process 1](../media/process-model-1.png)

The number and presence of processes in a WebView2 process group can change as a WebView2 application makes use of WebView2 features. (However, there's only a single, specific browser process in a WebView2 process group.) For example, creating a new WebView2 instance from the same `CoreWebView2Environment`, but with a different domain in the `Source` property, will usually start a new renderer process.

Expand All @@ -44,7 +44,7 @@ All processes in a WebView2 Runtime processes collection are tied to the browser

A user data folder can be shared by multiple applications, but be sure to consider the implications on performance and management, as described in [Manage user data folders](user-data-folder.md).

![Process 2.](../media/process-model-2.png)
![Process 2](../media/process-model-2.png)

To make use of multiple user data folders, a WebView2 application needs to create different `CoreWebView2Environment` objects. A `WebView2` instance is created for a given user data folder through the configured `CoreWebView2Environment` object. Each `CoreWebView2Environment` object needs to be configured with a different user data folder value.

Expand Down
2 changes: 1 addition & 1 deletion microsoft-edge/webview2/concepts/threading-model.md
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ private void CoreWebView2_WebMessageReceived(object sender, CoreWebView2WebMessa
> 1. In **Solution Explorer**, right-click the WebView2 project and then select **Properties**.
> 1. Select the **Debug** tab, and then select the **Enable native code debugging** checkbox, as shown below.
![Enabling native code debugging in Visual Studio.](../media/webview-enable-native-debug.png)
![Enabling native code debugging in Visual Studio](../media/webview-enable-native-debug.png)


<!-- ====================================================================== -->
Expand Down
18 changes: 9 additions & 9 deletions microsoft-edge/webview2/get-started/get-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,20 +10,20 @@ ms.date: 01/24/2022
---
# Getting Started tutorials

These articles cover how to set up your development tools and create an initial WebView2 app, and learn about WebView2 concepts along the way.
These articles cover how to set up your development tools and create an initial WebView2 app, like a Hello World app with basic functionality. Learn about WebView2 concepts along the way.

| Framework | Article | Completed project |
| Article | Completed project | Description |
|---|---|---|
| WinUI 2 (UWP) | [Get started with WebView2 in WinUI 2 (UWP) apps](winui2.md) | n/a |
| WinUI 3 (Windows App SDK) | [Get started with WebView2 in WinUI 3 (Windows App SDK) apps](winui.md) | [WinUI3_GettingStarted](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/GettingStartedGuides/WinUI3_GettingStarted) |
| WPF | [Get started with WebView2 in WPF apps](wpf.md) | [WPF_GettingStarted](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/GettingStartedGuides/WPF_GettingStarted) |
| WinForms | [Get started with WebView2 in WinForms apps](winforms.md) | [WinForms_GettingStarted](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/GettingStartedGuides/WinForms_GettingStarted) |
| Win32 | [Get started with WebView2 in Win32 apps](win32.md) | [Win32_GettingStarted](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/GettingStartedGuides/Win32_GettingStarted) |
| [Get started with WebView2 in WinUI 2 (UWP) apps](winui2.md) | n/a<!--todo: upload finished project--> | Use **C# Blank App (Universal Windows)** project template and install the **Microsoft.UI.Xaml** package (WinUI 2), which installs the **Microsoft.Web.WebView2** SDK package as a dependency. |
| [Get started with WebView2 in WinUI 3 (Windows App SDK) apps](winui.md) | [WinUI3_GettingStarted](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/GettingStartedGuides/WinUI3_GettingStarted) | Use the **Blank App, Packaged (WinUI in Desktop)** project template, which uses the WindowsAppSDK, which includes the WebView2 SDK. Add an address bar and URL logic. |
| [Get started with WebView2 in WPF apps](wpf.md) | [WPF_GettingStarted](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/GettingStartedGuides/WPF_GettingStarted) | Use the **WPF Application** or **WPF App (.NET Framework)** project template to create a WPF app, and then install the WebView2 SDK for the project to add WebView2. |
| [Get started with WebView2 in WinForms apps](winforms.md) | [WinForms_GettingStarted](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/GettingStartedGuides/WinForms_GettingStarted) | Use the **C# Windows Forms App (.NET Framework)** project template to create a WinForms project, then install the **Microsoft.Web.WebView2** SDK package for the WinForms project. |
| [Get started with WebView2 in Win32 apps](win32.md) | [Win32_GettingStarted](https://github.com/MicrosoftEdge/WebView2Samples/tree/main/GettingStartedGuides/Win32_GettingStarted) | Starts by opening an existing Win32 app project that has the WebView2 SDK and code already added. |


<!-- ====================================================================== -->
## See also

* [Sample apps](../code-samples-links.md)
* [Microsoft Edge WebView2](https://developer.microsoft.com/microsoft-edge/webview2) - initial introduction to WebView2, at `developer.microsoft.com`.
* [WebView2Samples repo > Readme](https://github.com/MicrosoftEdge/WebView2Samples#readme)
* [Sample apps](../code-samples-links.md) - framework-specific sample apps that showcase more of the WebView2 APIs than the Getting Started tutorials.
* [WebView2Samples repo](https://github.com/MicrosoftEdge/WebView2Samples#readme) - contains completed Visual Studio projects that result from following the steps in these Getting Started tutorials, as well as sample apps and deployment samples.
Binary file not shown.
Binary file not shown.
Loading

0 comments on commit e845ee6

Please sign in to comment.