Posted by Pam on December 15th, 2011

You can easily create a simple web browser for Windows Phone that opens a web site when you enter a URL by using Expression Blend.

Create a new Windows Phone project

A Windows Phone project in Expression Blend functions just like other Expression Blend projects.

Expression Blend supports the several Windows Phone project types. For this example, we’ll use the Windows Phone application to create a standard Windows Phone application.

1. 1. On the File menu, click New Project.
2. In the New Project dialog box, under Project types, click Windows Phone.
3. In the list on the right side of the dialog box, select Windows Phone application.
4. In the Name box, type a name for the project. For this example, type miniBrowser.
5. In the Location box, browse to the folder where you want to store the project.
6. In the Language box, choose the language that you want to use. For this example, we’ll use C#.
7. In the Version box, select the Windows Phone version that you want to target.
   Important: Version 7.1 is only available when you install the Windows Phone Developer Tools 7.1. This example also works with Windows Phone version 7.0.
8. Click OK.
   

A new Windows Phone project with the Windows Phone template applied opens on the artboard.

Customize the TitlePanel

The TitlePanel contains the default text at the very top of a Windows Phone page.

• In the Objects and Timeline panel, do the following:

• Expand the TitlePanel.
  
• Select the ApplicationTitle text box. In the Properties panel, on the Common Properties category, locate the Text box, and type MY FIRST APPLICATION.
• Select the PageTitle text box. In the Properties panel, on the Common Properties category, locate the Text box, and type mini browser.
  .

Add a TextBox

The next step is to add a TextBox to the project.

1. With the ContentPanel selected in the Objects and Timeline panel, in the Assets panel, locate the TextBox control by typing TextBox in the Search box.
2. Double-click the TextBox to add it to the artboard.
   
   Tip: You can also drag the control to the artboard, or draw the control directly on the artboard with your pointer after you have selected the control in the Assets panel.

Modify the TextBox properties

Modify the TextBox by doing the following in the Properties panel:

1. In the Name text box, type TextBox.
   
2. In the Layout category, do the following:
   • Set Width to Auto by clicking Set to Auto .
   • Set Height to Auto by clicking Set to Auto .
   • Set HorizontalAlignment to Stretch .
   • Set VerticalAlignment to Top .
     
3. In the Common Properties category, do the following:
   • In the Text box, type http://www.xbox.com.
   • In the InputScope drop-down list, select Url. This will limit the text input for the address bar to URL formatted strings.
     

Add a Button

The next step is to add a Button to the project.

1. With the ContentPanel selected in the Objects and Timeline panel, in the Assets panel, locate the Button control by typing Button in the Search box.
2. Double-click the Button to add it to the artboard.

Modify the Button properties

Modify the Button by doing the following in the Properties panel:

1. In the Name text box, type Button.
   
2. In the Layoutcategory, do the following:
   • Set Width to Auto by clicking Set to Auto .
   • Set Height to Auto by clicking Set to Auto .
   • Set HorizontalAlignment to Right .
   • Set VerticalAlignment to Top .
     
3. In the Common Properties category, in the Content box, type Go.
   
4. Adjust the TextBox width by using the on-object handle on the right side of the TextBox and dragging it to the right so that it no longer obscures the Button.

Add a WebBrowser

The next step is to add a WebBrowser control to the project.

1. With the ContentPanel selected in the Objects and Timeline panel, in the Assets panel, locate the WebBrowser control by typing WebBrowser in the Search box.
2. Double-click the WebBrowser control to add it to the artboard.
   

Modify the WebBrowser properties

Modify the WebBrowser by doing the following in the Properties panel:

1. In the Name text box, type WebBrowser.
   
2. In the Layoutcategory, do the following:
   • Set Width to Auto by clicking Set to Auto .
   • Set Height to Auto by clicking Set to Auto .
   • Set HorizontalAlignment to Stretch .
   • Set VerticalAlignment to Stretch .
     Tip: To reset the Layout properties to their default settings, in the Objects and Timeline panel or on the artboard, click the WebBrowser element. In the Layout category, to the right of the property, click Advanced Options, and then click Reset.
     
3. In the Common Properties category, select IsScriptEnabled.
   
4. Adjust the WebBrowser height by using the on-object handle on the top of the WebBrowser and dragging it to so that it no longer overlaps with TextBox and Button.

Modify the SupportedOrientation properties

• With the PhoneApplicationPage selected in the Objects and Timeline panel, in the SupportedOrientation drop-down list in the Properties panel, select PortraitOrLandscape.
  

Add code

This step will add the code to implement the Go button.

1. With the Button selected in the Objects and Timeline panel, in the Properties panel, click Events .
2. Double-click the Click text box. MainPage.xaml.cs opens.
3. Locate the following text:// TODO: Add event handler implementation here.
4. Replace the text you just located with the following script:string site = TextBox.Text;
   WebBrowser.Navigate(new Uri(site, UriKind.Absolute));

Run the application

You are now ready to run the application by pressing F5. After the project builds, the app will open in the Windows Phone Emulator.

To view the xBox web site in the browser, click Go.

You can switch between Portrait and Landscape views by hovering over the emulator and then clicking one of the Rotate icons.

You can also type a URL directly into the text box to navigate to different web site by pressing Go.

This entry was posted on Thursday, December 15th, 2011 at 3:55 pm and is filed under Expression Blend, Windows Phone. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.