Skip to content

Commit fbee375

Browse files
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
1 parent b9e752a commit fbee375

File tree

8 files changed

+167
-7
lines changed

8 files changed

+167
-7
lines changed

Diff for: GettingStartedGuides/WPF_GettingStarted/README.md

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
description: "Getting started with WebView2 in WPF doc"
3+
languages:
4+
- csharp
5+
page_type: sample
6+
products:
7+
- microsoft-edge
8+
urlFragment: webview2-wpf-getting-started
9+
---
10+
# Getting Started with WebView2 in WPF
11+
12+
This sample relates to the [Getting started with WebView2 in WPF](https://docs.microsoft.com/microsoft-edge/webview2/gettingstarted/wpf) doc.

Diff for: GettingStartedGuides/Win32_GettingStarted/README.md

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
description: "Getting started with WebView2 for Win32 apps doc"
3+
languages:
4+
- cpp
5+
page_type: sample
6+
products:
7+
- microsoft-edge
8+
urlFragment: webview2-win32-getting-started
9+
---
10+
# Getting Started with WebView2 for Win32 apps
11+
12+
This sample relates to the [Getting started with WebView2 for Win32 apps](https://docs.microsoft.com/microsoft-edge/webview2/gettingstarted/win32) doc.

Diff for: GettingStartedGuides/WinUI3_GettingStarted/README.md

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
description: "Getting started with WebView2 in WinUI3 doc"
3+
languages:
4+
- csharp
5+
page_type: sample
6+
products:
7+
- microsoft-edge
8+
urlFragment: webview2-winui3-getting-started
9+
---
10+
# Getting Started with WebView2 in WinUI3
11+
12+
This sample relates to the [Getting started with WebView2 in WinUI3](https://docs.microsoft.com/microsoft-edge/webview2/gettingstarted/winui) doc.

Diff for: SampleApps/WebView2APISample/README.md

+23-7
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,30 @@
1+
---
2+
description: "Demonstrate the features and usage patterns of WebView2 in Win32."
3+
extendedZipContent:
4+
-
5+
path: SharedContent
6+
target: SharedContent
7+
-
8+
path: LICENSE
9+
target: LICENSE
10+
languages:
11+
- cpp
12+
page_type: sample
13+
products:
14+
- microsoft-edge
15+
urlFragment: WebView2APISample
16+
---
117
# WebView2 API Sample
218

319
This is a hybrid application built with the [Microsoft Edge WebView2](https://aka.ms/webview2) control.
420

5-
![alt text](documentation/screenshots/sample-app-screenshot.png)
21+
![Sample App Snapshot](https://raw.githubusercontent.com/MicrosoftEdge/WebView2Samples/master/SampleApps/WebView2APISample/documentation/screenshots/sample-app-screenshot.png)
622

723
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.
824

9-
The API Sample showcases a selection of WebView2s event handlers and API methods that allow a native Win32 application to directly interact with a WebView and vice versa.
25+
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.
1026

11-
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.
27+
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.
1228

1329
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).
1430

@@ -25,7 +41,7 @@ Clone the repository and open the solution in Visual Studio. WebView2 is already
2541
- Clone this repository
2642
- Open the solution in Visual Studio 2019**
2743
- Set the target you want to build (Debug/Release, x86/x64/ARM64)
28-
- Build the project file: `WebView2APISample.vcxproj`
44+
- Build the project file: _WebView2APISample.vcxproj_
2945

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

@@ -41,7 +57,7 @@ This hybrid approach allows you to create and iterate faster using web technolog
4157

4258
Both of these parts of the Sample App are displayed in the image below:
4359

44-
![alt text](documentation/screenshots/sample-app-layout-diagram.png)
60+
![alt text](https://raw.githubusercontent.com/MicrosoftEdge/WebView2Samples/master/SampleApps/WebView2APISample/documentation/screenshots/sample-app-layout-diagram.png)
4561

4662
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.
4763

@@ -83,7 +99,7 @@ This component handles commands from the View menu, and any functionality relate
8399

84100
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.
85101

86-
![alt text](documentation/screenshots/sample-app-webmessaging-screenshot.png)
102+
![alt text](https://raw.githubusercontent.com/MicrosoftEdge/WebView2Samples/master/SampleApps/WebView2APISample/documentation/screenshots/sample-app-webmessaging-screenshot.png)
87103

88104
#### 9. ScenarioAddHostObject.cpp and ScenarioAddHostObject.html
89105

@@ -196,7 +212,7 @@ First, navigate to the ScenarioWebMessage application within the Sample App, usi
196212

197213
The WebView should display a simple webpage titled: "WebMessage sample page". The code for this page can be found in the `ScenarioWebMessage.html` file.
198214

199-
![alt text](documentation/screenshots/sample-app-webmessaging-screenshot.png)
215+
![alt text](https://raw.githubusercontent.com/MicrosoftEdge/WebView2Samples/master/SampleApps/WebView2APISample/documentation/screenshots/sample-app-webmessaging-screenshot.png)
200216

201217
To better understand ScenarioWebMessage functionality, you can either follow the instructions on the page or the steps detailed below.
202218

Diff for: SampleApps/WebView2WindowsFormsBrowser/README.md

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
---
2+
description: "Demonstrate the features and usage patterns of WebView2 in Windows Forms."
3+
extendedZipContent:
4+
-
5+
path: SharedContent
6+
target: SharedContent
7+
-
8+
path: LICENSE
9+
target: LICENSE
10+
languages:
11+
- csharp
12+
page_type: sample
13+
products:
14+
- microsoft-edge
15+
urlFragment: WebView2WindowsFormsBrowser
16+
---
17+
# WebView2 Windows Forms Browser
18+
19+
This is a hybrid application built with the [Microsoft Edge WebView2](https://aka.ms/webview2) control.
20+
21+
![Sample App Snapshot](https://raw.githubusercontent.com/MicrosoftEdge/WebView2Samples/master/SampleApps/WebView2WindowsFormsBrowser/screenshots/winforms-browser-screenshot.png)
22+
23+
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.
24+
25+
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.
26+
27+
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.
28+
29+
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).
30+
31+
## Prerequisites
32+
33+
- [Microsoft Edge (Chromium)](https://www.microsoftedgeinsider.com/download/) installed on a supported OS. Currently we recommend the latest version of the Edge Canary channel.
34+
- [Visual Studio](https://visualstudio.microsoft.com/vs/) with .NET support installed.
35+
- Latest pre-release version of our [WebView2 SDK](https://aka.ms/webviewnuget), which is included in this project.
36+
37+
## Build the WebView2 Windows Forms Browser
38+
39+
Clone the repository and open the solution in Visual Studio. WebView2 is already included as a NuGet package* in this project.
40+
41+
- Clone this repository
42+
- Open the solution in Visual Studio 2019**
43+
- Set the target you want to build (Debug/Release, AnyCPU)
44+
- Build the project file: _WebView2WindowsFormsBrowser.csproj_
45+
46+
That's it! Everything should be ready to just launch the app.
47+
48+
*You can get the WebView2 NugetPackage through the Visual Studio NuGet Package Manager.
49+
50+
**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.
51+
52+
## Code of Conduct
53+
54+
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.
Loading

Diff for: SampleApps/WebView2WpfBrowser/README.md

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
---
2+
description: "Demonstrate the features and usage patterns of WebView2 in WPF."
3+
extendedZipContent:
4+
-
5+
path: SharedContent
6+
target: SharedContent
7+
-
8+
path: LICENSE
9+
target: LICENSE
10+
languages:
11+
- csharp
12+
page_type: sample
13+
products:
14+
- microsoft-edge
15+
urlFragment: WebView2WpfBrowser
16+
---
17+
# WebView2 WPF Browser
18+
19+
This is a hybrid application built with the [Microsoft Edge WebView2](https://aka.ms/webview2) control.
20+
21+
![Sample App Snapshot](https://raw.githubusercontent.com/MicrosoftEdge/WebView2Samples/master/SampleApps/WebView2WpfBrowser/screenshots/wpf-browser-screenshot.png)
22+
23+
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.
24+
25+
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.
26+
27+
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.
28+
29+
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).
30+
31+
## Prerequisites
32+
33+
- [Microsoft Edge (Chromium)](https://www.microsoftedgeinsider.com/download/) installed on a supported OS. Currently we recommend the latest version of the Edge Canary channel.
34+
- [Visual Studio](https://visualstudio.microsoft.com/vs/) with .NET support installed.
35+
- Latest pre-release version of our [WebView2 SDK](https://aka.ms/webviewnuget), which is included in this project.
36+
37+
## Build the WebView2 WPF Browser
38+
39+
Clone the repository and open the solution in Visual Studio. WebView2 is already included as a NuGet package* in this project.
40+
41+
- Clone this repository
42+
- Open the solution in Visual Studio 2019**
43+
- Set the target you want to build (Debug/Release, AnyCPU)
44+
- Build the project file: _WebView2WpfBrowser.csproj_
45+
46+
That's it! Everything should be ready to just launch the app.
47+
48+
*You can get the WebView2 NugetPackage through the Visual Studio NuGet Package Manager.
49+
50+
**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.
51+
52+
## Code of Conduct
53+
54+
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.
Loading

0 commit comments

Comments
 (0)