diff --git a/GettingStartedGuides/WPF_GettingStarted/README.md b/GettingStartedGuides/WPF_GettingStarted/README.md new file mode 100644 index 00000000..507e70a1 --- /dev/null +++ b/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. diff --git a/GettingStartedGuides/Win32_GettingStarted/README.md b/GettingStartedGuides/Win32_GettingStarted/README.md new file mode 100644 index 00000000..9a97d78d --- /dev/null +++ b/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. diff --git a/GettingStartedGuides/WinUI3_GettingStarted/README.md b/GettingStartedGuides/WinUI3_GettingStarted/README.md new file mode 100644 index 00000000..c2789f41 --- /dev/null +++ b/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. diff --git a/SampleApps/WebView2APISample/README.md b/SampleApps/WebView2APISample/README.md index 5e3885ab..9d72a402 100644 --- a/SampleApps/WebView2APISample/README.md +++ b/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. diff --git a/SampleApps/WebView2WindowsFormsBrowser/README.md b/SampleApps/WebView2WindowsFormsBrowser/README.md new file mode 100644 index 00000000..63946f70 --- /dev/null +++ b/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. diff --git a/SampleApps/WebView2WindowsFormsBrowser/screenshots/winforms-browser-screenshot.png b/SampleApps/WebView2WindowsFormsBrowser/screenshots/winforms-browser-screenshot.png new file mode 100644 index 00000000..11aebfbf Binary files /dev/null and b/SampleApps/WebView2WindowsFormsBrowser/screenshots/winforms-browser-screenshot.png differ diff --git a/SampleApps/WebView2WpfBrowser/README.md b/SampleApps/WebView2WpfBrowser/README.md new file mode 100644 index 00000000..687832d5 --- /dev/null +++ b/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. diff --git a/SampleApps/WebView2WpfBrowser/screenshots/wpf-browser-screenshot.png b/SampleApps/WebView2WpfBrowser/screenshots/wpf-browser-screenshot.png new file mode 100644 index 00000000..d5f81e5e Binary files /dev/null and b/SampleApps/WebView2WpfBrowser/screenshots/wpf-browser-screenshot.png differ