Move samples repos Readme content into regular Docs (#2069)

* 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>

Author: 4 people

microsoft-edge/media/windows-keyboard-logo.png

@@ -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
@@ -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

microsoft-edge/toc.yml

@@ -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) |   |
-| 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.
 
@@ -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
 

microsoft-edge/webview2/code-samples-links.md

@@ -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 -->
 

microsoft-edge/webview2/concepts/basic-authentication.md

@@ -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.
 
@@ -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)
 
 
 <!-- ====================================================================== -->

microsoft-edge/webview2/concepts/distribution.md

@@ -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 |
 | --- | --- | --- |

microsoft-edge/webview2/concepts/navigation-events.md

@@ -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.
 
@@ -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.
 

microsoft-edge/webview2/concepts/process-model.md

@@ -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)
 
 
 <!-- ====================================================================== -->

microsoft-edge/webview2/concepts/threading-model.md

@@ -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.