WebBrowser Control In WPF

In this article, I am going to show how we can use WebBrowser control in WPF application.

In this article, I am going to show how we can use WebBrowser control to show html documents within our WPF applications. WPF introduces WebBrowser control to ensure that we can show html pages embedded inside the control. Here I also use two buttons to go backward and forward.

This is my XAML code,

  1. <Window x:Class="WebBrowserControlIn_WPF.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WebBrowser Control in WPF" Height="Auto" Width="Auto" Loaded="Window_Loaded">  
  2.     <Grid x:Name="LayoutRoot" Width="Auto">  
  3.         <Grid.RowDefinitions>  
  4.             <RowDefinition Height="10" />  
  5.             <RowDefinition Height="*" />  
  6.         </Grid.RowDefinitions>  
  7.         <Grid.ColumnDefinitions>  
  8.             <ColumnDefinition Width="65"></ColumnDefinition>  
  9.             <ColumnDefinition Width="*"></ColumnDefinition>  
  10.             <ColumnDefinition Width="10"></ColumnDefinition>  
  11.         </Grid.ColumnDefinitions>  
  12.         <Grid HorizontalAlignment="Stretch" Margin="0,15,0,0" Grid.Row="1" Grid.Column="1" VerticalAlignment="Stretch">  
  13.             <WebBrowser x:Name="myBrowser" Margin="0,0,0,0" Cursor="Arrow" Height="Auto" />  
  14.         </Grid>  
  15.         <Grid HorizontalAlignment="Stretch" Margin="0,15,0,0" Grid.Row="1" Grid.Column="0" VerticalAlignment="Stretch">  
  16.             <Grid.RowDefinitions>  
  17.                 <RowDefinition Height="40" />  
  18.                 <RowDefinition Height="40" />  
  19.             </Grid.RowDefinitions>  
  20.             <Grid HorizontalAlignment="Stretch" Margin="0,15,0,0" Grid.Row="0" VerticalAlignment="Stretch">  
  21.                 <Border Height="20" BorderThickness="2" CornerRadius="5,5,0,0" VerticalAlignment="Top" />  
  22.                 <Button Click="GoBack_Click" Width="50" Height="20" x:Name="GoBack">Go Back</Button>  
  23.             </Grid>  
  24.             <Grid HorizontalAlignment="Stretch" Margin="0,15,0,0" Grid.Row="1" VerticalAlignment="Stretch">  
  25.                 <Button Click="GoForward_Click" Width="61" Height="20" x:Name="GoForward">Go Forward</Button>  
  26.             </Grid>  
  27.         </Grid>  
  28.     </Grid>  
  29. </Window>  

This is my XAML.cs code,

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Text;  
  5. using System.Windows;  
  6. using System.Windows.Controls;  
  7. using System.Windows.Data;  
  8. using System.Windows.Documents;  
  9. using System.Windows.Input;  
  10. using System.Windows.Media;  
  11. using System.Windows.Media.Imaging;  
  12. using System.Windows.Navigation;  
  13. using System.Windows.Shapes;  
  14. namespace WebBrowserControlIn_WPF {  
  15.     ///<summary>  
  16.     /// Interaction logic for Window1.xaml  
  17.     ///</summary>  
  18.     publicpartialclassWindow1: Window {  
  19.         public Window1() {  
  20.             InitializeComponent();  
  21.         }  
  22.         privatevoid Window_Loaded(object sender, RoutedEventArgs e) {  
  23.             myBrowser.Navigate(newUri("http://www.c-sharpcorner.com"));  
  24.         }  
  25.         privatevoid GoBack_Click(object sender, RoutedEventArgs e) {  
  26.             if (myBrowser.CanGoBack) {  
  27.                 myBrowser.GoBack();  
  28.             } else {  
  29.                 MessageBox.Show("Cannot Go back");  
  30.             }  
  31.         }  
  32.         privatevoid GoForward_Click(object sender, RoutedEventArgs e) {  
  33.             if (myBrowser.CanGoForward) {  
  34.                 myBrowser.GoForward();  
  35.             } else {  
  36.                 MessageBox.Show("Cannot Go Forward");  
  37.             }  
  38.         }  
  39.     }  
  40. }  

When we run the application then we see this:

WebBrowser Control In WPF
Image 1.