In
the first of our WebBrowser walkthroughs, we will use this control to
display the contents of the web site—we will show a list of photos of
the best car in the world, the Lamborghini Gallardo.
With
the WebBrowser control in place, it's time to add some code to
initialize its content when it loads work. First, right-click MainPage.xaml in Solution Explorer and select View Code (or go directly to the MainPage.xaml.cs file).
Whenever the My Car Browser application loads the WebBrowser control, it fires off a Loaded event. By creating a Loaded event handler, you can write code to display a web page with car photos. Add the following code to the MainPage() constructor to create the handler:
webBrowser1.Loaded += new RoutedEventHandler(webBrowser1_Loaded);
Notice how the same Visual
Studio shortcuts we used for the Application Bar code apply here as
well: namely, right after typing "+=" Visual Studio hints that if you
press the Tab key twice, it will create all of the necessary code stubs
you need for a handler.
Next, let's code the event handler. To the webBrowser1_Loaded() function, add the following code, which will navigate to Microsoft Bing's image search page and pass the phrase "cars Lamborghini Gallardo" to it:
webBrowser1.Navigate(newUri("http://www.bing.com/images/search?q=cars+Lamborghini+Gallardo"",
UriKind.Absolute));
This code creates a new Uri object and specifies that the Uri is not local to our application (that would be UriKind.Relative), but rather a location on the Internet (UriKind.Absolute).
Press F5 to debug your
application and see the results so far. You should see photos of the
most beautiful car in the world, courtesy of the Microsoft Bing engine.
You can easily extend this example to respond to user input. For
example, you could use the Bing image search to show photos of any car
whose name a user enters. Here's how.
Now let's add a text box to the page so the user can change the name of the car for which Bing searches. To do that, go to MainPage.xaml and display the page in the Designer (either by double-clicking MainPage.xaml or by right-clicking MainPage.xaml and selecting View Designer). If the Toolbox is not visible, go to View menu => Other Windows =>
Toolbox or click the Toolbox icon in the Visual Studio application bar.
Click and drag the text box from the Toolbox, and position it below the
WebBrowser control. Next, click and drag the Button, and position it
next to the text box.
Right-click
the text box and select Properties. Delete everything from the Text
property. Next, right-click the button and change the value of its
Content property to "Show It!" (without the double quotes). The end result should resemble Figure 1.
It's time to add some interactivity to our application. With MainPage.xaml still open in Designer view, double-click the button. Notice how the method button1_Click opens by default when you do that, ready for your code. Place the following code in the body of that method:
webBrowser1.Navigate(new Uri
("http://www.bing.com/images/search?q=cars " + textBox1.Text,
UriKind.Absolute));
Press
F5 to run the application. Initially, you should see the photos of the
Lamborghini Gallardo added in the first part of this walkthrough. Go
ahead and type "Ford Mustang" in the text box, and press the "Show It!"
button. In the WebBrowser control, you should now see a set of photos of
this great American muscle car.
But there's more. You can
also use a WebBrowser control to display HTML files—and even
strings—that have been stored locally. We'll use that capability to add
some Help to the Car Browser application in the next section.
