HomeНаука и техникаRelated VideosMore From: Embedded Browsers

How to Create HTML UI for WPF Application Using DotNetBrowser

32 ratings | 4466 views
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 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.com/solution/articles/9000124840-%D0%9Dow-to-create-html-ui-for-wpf-application-using-dotnetbrowser?utm_campaign=dotnetbrowser-youtube&utm_medium=description&utm_source=how-to-create-html-ui-for-wpf-application-using-dotnetbrowser&utm_content=&utm_term= 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
Html code for embedding videos on your blog
Text Comments (1)
Embedded Browsers (11 months ago)
Subscribe to our channel https://www.youtube.com/channel/UCW-4v-bHIbUqXVstXNYSv1Q?sub_confirmation=1&utm_campaign=embedded-browsers&utm_medium=description&utm_source=automatic-channel-subscription&utm_content=&utm_term=

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.