Onboarding Samples and Guides to docs.microsoft.com/samples (#51)

* Added README.md for getting started guides

* Added urlFragment

* Updated README.md for sample apps

GettingStartedGuides/WPF_GettingStarted/README.md

@@ -0,0 +1,12 @@
+---
+description: "Getting started with WebView2 in WPF doc"
+languages: 
+ - csharp
+page_type: sample
+products: 
+ - microsoft-edge
+urlFragment: webview2-wpf-getting-started
+---
+# Getting Started with WebView2 in WPF
+
+This sample relates to the [Getting started with WebView2 in WPF](https://docs.microsoft.com/microsoft-edge/webview2/gettingstarted/wpf) doc.

GettingStartedGuides/Win32_GettingStarted/README.md

@@ -0,0 +1,12 @@
+---
+description: "Getting started with WebView2 for Win32 apps doc"
+languages: 
+ - cpp
+page_type: sample
+products: 
+ - microsoft-edge
+urlFragment: webview2-win32-getting-started
+---
+# Getting Started with WebView2 for Win32 apps
+
+This sample relates to the [Getting started with WebView2 for Win32 apps](https://docs.microsoft.com/microsoft-edge/webview2/gettingstarted/win32) doc.

GettingStartedGuides/WinUI3_GettingStarted/README.md

@@ -0,0 +1,12 @@
+---
+description: "Getting started with WebView2 in WinUI3 doc"
+languages: 
+ - csharp
+page_type: sample
+products: 
+ - microsoft-edge
+urlFragment: webview2-winui3-getting-started
+---
+# Getting Started with WebView2 in WinUI3
+
+This sample relates to the [Getting started with WebView2 in WinUI3](https://docs.microsoft.com/microsoft-edge/webview2/gettingstarted/winui) doc.

SampleApps/WebView2APISample/README.md

@@ -1,14 +1,30 @@
+---
+description: "Demonstrate the features and usage patterns of WebView2 in Win32."
+extendedZipContent:
+ -
+ path: SharedContent
+ target: SharedContent
+ -
+ path: LICENSE
+ target: LICENSE
+languages:
+ - cpp
+page_type: sample
+products:
+ - microsoft-edge
+urlFragment: WebView2APISample
+---
 # WebView2 API Sample
 
 This is a hybrid application built with the [Microsoft Edge WebView2](https://aka.ms/webview2) control.
 
-![alt text](documentation/screenshots/sample-app-screenshot.png)
+![Sample App Snapshot](https://raw.githubusercontent.com/MicrosoftEdge/WebView2Samples/master/SampleApps/WebView2APISample/documentation/screenshots/sample-app-screenshot.png)
 
 The WebView2APISample is an example of an application that embeds a WebView within a Win32 native application. It is built as a Win32 [Visual Studio 2019](https://visualstudio.microsoft.com/vs/) project and makes use of both C++ and HTML/CSS/JavaScript in the WebView2 environment.
 
-The API Sample showcases a selection of WebView2’s event handlers and API methods that allow a native Win32 application to directly interact with a WebView and vice versa.
+The API Sample showcases a selection of WebView2's event handlers and API methods that allow a native Win32 application to directly interact with a WebView and vice versa.
 
-If this is your first time using WebView, we recommend first following the [Getting Started](https://docs.microsoft.com/microsoft-edge/webview2/gettingstarted/win32.md) guide, which goes over how to create a WebView2 and walks through some basic WebView2 functionality.
+If this is your first time using WebView, we recommend first following the [Getting Started](https://docs.microsoft.com/microsoft-edge/webview2/gettingstarted/win32) guide, which goes over how to create a WebView2 and walks through some basic WebView2 functionality.
 
 To learn more specifics about events and API Handlers in WebView2, you can refer to the [WebView2 Reference Documentation](https://docs.microsoft.com/microsoft-edge/webview2/webview2-api-reference).
 
@@ -25,7 +41,7 @@ Clone the repository and open the solution in Visual Studio. WebView2 is already
 - Clone this repository
 - Open the solution in Visual Studio 2019**
 - Set the target you want to build (Debug/Release, x86/x64/ARM64)
-- Build the project file: `WebView2APISample.vcxproj`
+- Build the project file: _WebView2APISample.vcxproj_
 
 That's it! Everything should be ready to just launch the app.
 
@@ -41,7 +57,7 @@ This hybrid approach allows you to create and iterate faster using web technolog
 
 Both of these parts of the Sample App are displayed in the image below:
 
-![alt text](documentation/screenshots/sample-app-layout-diagram.png)
+![alt text](https://raw.githubusercontent.com/MicrosoftEdge/WebView2Samples/master/SampleApps/WebView2APISample/documentation/screenshots/sample-app-layout-diagram.png)
 
 1. Section One: The top part of the Sample App is a Win32 component written in C++. This part of the application takes in UI inputs from the user and uses them to control the WebView.
 
@@ -83,7 +99,7 @@ This component handles commands from the View menu, and any functionality relate
 
 This component is created when you select the Scenario/Web Messaging menu item. It implements an example application with a C++ part and an HTML+JavaScript part, which communicate with each other by asynchronously posting and receiving messages.
 
-![alt text](documentation/screenshots/sample-app-webmessaging-screenshot.png)
+![alt text](https://raw.githubusercontent.com/MicrosoftEdge/WebView2Samples/master/SampleApps/WebView2APISample/documentation/screenshots/sample-app-webmessaging-screenshot.png)
 
 #### 9. ScenarioAddHostObject.cpp and ScenarioAddHostObject.html
 
@@ -196,7 +212,7 @@ First, navigate to the ScenarioWebMessage application within the Sample App, usi
 
 The WebView should display a simple webpage titled: "WebMessage sample page". The code for this page can be found in the `ScenarioWebMessage.html` file.
 
-![alt text](documentation/screenshots/sample-app-webmessaging-screenshot.png)
+![alt text](https://raw.githubusercontent.com/MicrosoftEdge/WebView2Samples/master/SampleApps/WebView2APISample/documentation/screenshots/sample-app-webmessaging-screenshot.png)
 
 To better understand ScenarioWebMessage functionality, you can either follow the instructions on the page or the steps detailed below.
 

SampleApps/WebView2WindowsFormsBrowser/README.md

@@ -0,0 +1,54 @@
+---
+description: "Demonstrate the features and usage patterns of WebView2 in Windows Forms."
+extendedZipContent:
+ -
+ path: SharedContent
+ target: SharedContent
+ -
+ path: LICENSE
+ target: LICENSE
+languages:
+ - csharp
+page_type: sample
+products:
+ - microsoft-edge
+urlFragment: WebView2WindowsFormsBrowser
+---
+# WebView2 Windows Forms Browser
+
+This is a hybrid application built with the [Microsoft Edge WebView2](https://aka.ms/webview2) control.
+
+![Sample App Snapshot](https://raw.githubusercontent.com/MicrosoftEdge/WebView2Samples/master/SampleApps/WebView2WindowsFormsBrowser/screenshots/winforms-browser-screenshot.png)
+
+The WebView2WindowsFormsBrowser is an example of an application that embeds a WebView within a Windows Forms application. It is built as a Windows Forms [Visual Studio 2019](https://visualstudio.microsoft.com/vs/) project and makes use of both C# and HTML/CSS/JavaScript in the WebView2 environment.
+
+The API Sample showcases a selection of WebView2's event handlers and API methods that allow a Windows Forms application to directly interact with a WebView and vice versa.
+
+If this is your first time using WebView, we recommend first following the [Getting Started](https://docs.microsoft.com/microsoft-edge/webview2/gettingstarted/winforms) guide, which goes over how to create a WebView2 and walks through some basic WebView2 functionality.
+
+To learn more specifics about events and API Handlers in WebView2, you can refer to the [WebView2 Reference Documentation](https://docs.microsoft.com/microsoft-edge/webview2/webview2-api-reference).
+
+## 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 pre-release version of our [WebView2 SDK](https://aka.ms/webviewnuget), which is included in this project.
+
+## Build the WebView2 Windows Forms Browser
+
+Clone the repository and open the solution in Visual Studio. WebView2 is already included as a NuGet package* in this project.
+
+- Clone this repository
+- Open the solution in Visual Studio 2019**
+- Set the target you want to build (Debug/Release, AnyCPU)
+- Build the project file: _WebView2WindowsFormsBrowser.csproj_
+
+That's it! Everything should be ready to just launch the app.
+
+*You can get the WebView2 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 opencode@microsoft.com with any additional questions or comments.

SampleApps/WebView2WpfBrowser/README.md

@@ -0,0 +1,54 @@
+---
+description: "Demonstrate the features and usage patterns of WebView2 in WPF."
+extendedZipContent:
+ -
+ path: SharedContent
+ target: SharedContent
+ -
+ path: LICENSE
+ target: LICENSE
+languages:
+ - csharp
+page_type: sample
+products:
+ - microsoft-edge
+urlFragment: WebView2WpfBrowser
+---
+# WebView2 WPF Browser
+
+This is a hybrid application built with the [Microsoft Edge WebView2](https://aka.ms/webview2) control.
+
+![Sample App Snapshot](https://raw.githubusercontent.com/MicrosoftEdge/WebView2Samples/master/SampleApps/WebView2WpfBrowser/screenshots/wpf-browser-screenshot.png)
+
+The WebView2WpfBrowser is an example of an application that embeds a WebView within a WPF application. It is built as a WPF [Visual Studio 2019](https://visualstudio.microsoft.com/vs/) project and makes use of both C# and HTML/CSS/JavaScript in the WebView2 environment.
+
+The API Sample showcases a selection of WebView2's event handlers and API methods that allow a WPF application to directly interact with a WebView and vice versa.
+
+If this is your first time using WebView, 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 learn more specifics about events and API Handlers in WebView2, you can refer to the [WebView2 Reference Documentation](https://docs.microsoft.com/microsoft-edge/webview2/webview2-api-reference).
+
+## 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 pre-release version of our [WebView2 SDK](https://aka.ms/webviewnuget), which is included in this project.
+
+## Build the WebView2 WPF Browser
+
+Clone the repository and open the solution in Visual Studio. WebView2 is already included as a NuGet package* in this project.
+
+- Clone this repository
+- Open the solution in Visual Studio 2019**
+- Set the target you want to build (Debug/Release, AnyCPU)
+- Build the project file: _WebView2WpfBrowser.csproj_
+
+That's it! Everything should be ready to just launch the app.
+
+*You can get the WebView2 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 opencode@microsoft.com with any additional questions or comments.