How to Create HTML UI for WPF Application Using DotNetBrowser 1.x
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...
About DotNetBrowser:
DotNetBrowser allows embedding a Chromium-based browser to your .NET app to display and process HTML5, CSS3, JavaScript, Flash etc.
You can read the text version of this guide and download the source code provided in it here:
https://dotnetbrowser.support.teamdev...
Transcript:
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
Manager.
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
the project.
1:18 Select the licence file in the Solution Explorer and change the
Build Action to Embedded Resources to finish the licence
setup.
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
separate column.
2:21 As you can see, we can also set the default web page
through XAML.
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
source code.
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
FinishLoadingFrameEvent label.
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
“browserView1”.
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
DOM tree.
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
separate thread.
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
temporary variables.
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
feature.
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.
#DotNetBrowser
#HTMLUI
#WPFApplication
