Home > DeveloperSection > Beginner > WebBrowser control in WPF

WebBrowser control in WPF


WPF WPF 
Ratings:
0 Comment(s)
 10650  View(s)
Rate this:

WebBrowser control in WPF

Sometime may we require that we want to open some html document in my own application. To perform this task WPF introduce a new control named WebBrowser control through which we can open all the html documents as well as we can open any sites. One thing more that WPF WebBrowser control supports clientside scripting also. In this article am going to explain you that how can we use WebBrowser control in WPF.

Working Explanation

To implementing this application I had added one TextBlock which shows a read only message, one TextBox control in which user can enter any URL, one WebBrowser control in which we can show output of the request and two buttons named Load Requested Site and Load Default Site. When user click on Load Default site then Google home page is opened and when user click on Load Requested site then Requested site whose address is given in textbox control is opened.

XAML code snippet for creating user interface

<Grid>

        <Grid.Background>

            <LinearGradientBrush MappingMode="RelativeToBoundingBox" EndPoint="0.5,1" StartPoint="0.5,0">

                <GradientStop Color="Azure" Offset="0"/>

                <GradientStop Color="Chartreuse" Offset="1"/>

            </LinearGradientBrush>

        </Grid.Background>

        <Grid.RowDefinitions>

            <RowDefinition Height="0.091*" />

            <RowDefinition Height="0.775*"/>

            <RowDefinition Height="0.154*"/>

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="150*" />

            <ColumnDefinition Width="353*" />

        </Grid.ColumnDefinitions>

        <TextBlock x:Name="txbUrlInfo" Height="30" Text="Eneter URL : " Grid.Row="0" Grid.Column="0" />

        <TextBox x:Name="txtUrlInfo" Height="30" Width="350" Grid.Row="0" Grid.Column="1" />

        <Border x:Name="broserBorder" Grid.Row="1"  Grid.ColumnSpan="2" Grid.Column="0" BorderThickness="5" >

            <WebBrowser x:Name="browser1" Cursor="Pen" />

        </Border>

        <Button x:Name="btnLoadSite" Width="150" Height="30" Content="Load Requested Site" Grid.Row="2" Grid.Column="0" Click="btnLoadSite_Click" />

        <Button x:Name="btnDefaultSite" Width="150" Height="30" Content="Load Default Site" Grid.Row="2" Grid.Column="1" Click="btnDefaultSite_Click" />

</Grid>

 

Steps to create this code snippet

Ø  Firstly I had divided Grid control in Three Rows and Two columns.

Ø  In first row I had put one Text Block control for displaying a read only message and one textbox control in which user entered location of web site.

Ø  In second row I had put a border control because web browser control does not provide border that’s why we have to added border control then inside border control we added WebBrowser control in which output needs to be displayed.

Ø  In third row I had put two Buttons one named Load Requested Site and another one is Load Default Site.

Code to Load Requested Site

private void btnLoadSite_Click(object sender, RoutedEventArgs e)

        {

            try

            {

                browser1.Navigate(new Uri(txtUrlInfo.Text, UriKind.RelativeOrAbsolute));

            }

            catch (UriFormatException ue)

            {

                MessageBox.Show(ue.Message);

            }

            catch (Exception e1)

            {

                MessageBox.Show(e1.Message);

            }

}

Code to Load default site

private void btnDefaultSite_Click(object sender, RoutedEventArgs e)

{

            browser1.Navigate(new Uri("http://www.google.com"));

}

 

Output of the above code snippet is as follows

WebBrowser control in WPF

Loading default google site when user click on Load Default Site

WebBrowser control in WPF

Loading Microsoft home page when user click on load requested site and address is entered in textbox.

WebBrowser control in WPF

 


Don't want to miss updates? Please click the below button!

Follow MindStick