A step-by-step guide on creating HTML UI for WPF applications
Get a free 30-days DotNetBrowser trial licence: https://www.teamdev.com/dotnetbrowser?utm_campaign=dotnetbrowser-youtube&utm_medium=description&utm_source=how-to-create-html-ui-for-wpf-application-using-dotnetbrowser&utm_content=&utm_term=#evaluate
You can read the text version of this guide and download the source code provided in it here:
0:21 Launch Visual Studio and create a new project.
0:27 Сhoose WPF Application.
0:34 Add DotNetBrowser to the Project via the NuGet Package
0:39 Right-click on the project. Choose “Manage NuGet Packages”
in the context menu.
0:47 Click on “Browse”. Type “DotNetBrowser” in the search box
and click Enter.
0:50 Choose the DotNetBrowser package and click Install.
0:53 Read the licence acceptance and click “I accept”. Wait until
the package is installed.
1:00 Add the Licence File.
1:03 So, right-click on our Project. Choose Add - Existing Item.
1:10 Please note: you should select All Files to see the licence file.
1:13 Select the teamdev.licences file and the file will be added to
1:18 Select the licence file in the Solution Explorer and change the
Build Action to Embedded Resources to finish the licence
1:29 Add two BrowserView Components with the Help of XAML
(Extensible Application Markup Language)
1:33 Let’s set the initial window size to the whole desktop.
1:43 Add DotNetBrowser components to Window via XAML.
1:50 Name the components.
1:59 Divide the grid into two parts.
2:06 Make the parts the same size.
2:11 Assign positions for each DotNetBrowser component in a
2:21 As you can see, we can also set the default web page
2:25 Add a Sample Web Page with a Style Sheet to the Project.
2:29 Let’s include a web page with a style sheet.
2:36 Set the parameters for the added files.
2:40 Now let’s take a look at the style sheet and the web page
2:47 As you can see, there is no OnClick event on the Submit
button. We will add it with the help of C#.
2:54 Remove the default URL from the Designer.
2:57 Add a FinishLoadingFrameEvent via XAML Designer.
3:01 Select “browserView1” in the Design mode.
3:07 Choose “Event handler for the selected element”.
3:08 Double-click on text box on the right of the
3:13 Initializing the Primary Setting in MainWindow.
3:21 Add the Chromium switch to turn on the Chrome Developer
Tools remote debugging feature.
3:39 Set the previously added web page as the default URL for
3:53 Set Chrome Developer Tools remote debugging URL as
default for “browserView2”.
4:05 Implementing the FinishLoadingFrameEvent handler.
4:09 Check if the page is fully loaded and Return the page as a
4:20 Check the list of all the input elements.
4:45 Find one with the “submit” type.
5:04 Add an event listener to the “OnClick” event.
5:29 Implementing the OnSubmitClicked Handler.
5:34 Execute implementation of OnSubmitClicked handler in a
5:42 Create variables to store the found values.
5:52 Return the page as a DOM tree.
5:59 Save the values of the ‘login’ and ‘password’ input fields to the
6:15 Invoke a MessageBox with the saved values.
6:38 Build the Project.
6:39 Compile and launch the application. As you can see on the
left - the web page is loaded and operational. And on the right
we have the Chrome Developer Tools remote debugging
6:50 Check the OnClick Event and Change the HTML in DevTools to
See the Differences Live.
6:57 Press the “SUBMIT” button. As you can see, the OnClick event
that I added previously in the video works well.
7:04 Now let’s change the default value for the password input.
7:08 After pressing “SUBMIT” we see that the OnClick event returns
the value that we previously changed.
7:18 In the same way I can change all the other elements.
7:25 I can work with the styles of the web page as well.