URL Navigation Using CefSharp

Learn how to create a one-tabbed browser with URL navigation in a WPF application using CefSharp. You can get the source code of this sample in the GitHub repository: https://github.com/cefsharptutorials/cefsharptutorials/tree/master/CefSharpTutorials/BackForwardNavigation

Previous tutorial:
https://www.youtube.com/watch?v=gphqZTCWoZE&list=PLtnonz7r7xrqI7OS0eWwc4lrwV5zqI4r3

About CefSharp:
https://cefsharp.github.io/

Transcript:

0:01 URLnavigation using CefSharp

0:07 Create and configure a WPF solution with CefSharp

0:11 Launch the solution which we created in the previous tutorial
(check out the Link under this video)
0:17 Add a new project to the solution via the Solution Explorer

0:19 Remember that the .NET Framework version should be 4.5.2
or higher
0:24 Mark the newly created project as a startup project

0:29 Open the Solution Configuration Manager

0:31 Create and select the x64 or x86 configuration for the new
project
0:39 Open the NuGet package manage

0:42 Find the ‘CefSharp.Wpf’ library

0:44 Select the ‘CefSharp.Wpf’ library and click ‘Install’

0:48 Review the dependencies and click ‘OK’

0:52 Now we’ll see how to work with the MainWindow markup

0:54 Switch to the ‘MainWindow.xaml’ in the editor window

0:58 You can change the window title if you need to

1:00 Add the “CefSharp.Wpf” namespace to the MainWindow
markup
1:06 Add the ‘DockPanel’ component to the root grid

1:09 Add a nested DockPanel to the previously created panel

1:12 Set the ‘LastChildFill’ property to ‘True’ and the
‘DockPanel.Dock’ property to the ‘Top’ value
1:19 Add control elements to the nested DockPanel (Back,
Navigate, Forward buttons and an address TextBox)
1:39 Define the names for the control elements

1:55 Define the event handler names for the control elements

2:09 Add the “ChromiumWebBrowser” control after the nested
DockPanel
2:13 Define the initial URL via the “Address” property of the
“ChromiumWebBrowser” control
2:17 Implement the behaviour we need

2:20 Create the “FrameLoadEnd” event handler

2:25 Create a handler for the control button click events

2:42 Define the name of the ‘ChromiumWebBrowser’ control

2:46 In the “Back” button event handler check if the CefSharp
component can navigate to the previous page, and then call
the “Back” method
2:54 Apply the same approach to the “Forward” button

2:59 In the “Navigate” button event handler check if the “Address”
box is filled and set its content to the browser’s “Address”
property
3:12 In the “FrameLoadEnd” event handler update the states of the
control elements. Please note that this event occurs in the
non-UI thread so you need to use the Dispatcher
3:51 Build and launch the application


#URLNavigation
#CefSharp
#EmbeddedBrowsers