Creating Your First Windows 8 Application

Setting the Properties

As you discovered in Chapter 1, you can change properties by selecting objects on a page and changing their settings in the Properties window. You’ll start by changing the property settings for the first text box.

Set the web address text box

1. Click the first text box you created on the page. The text box object is selected and is surrounded by resize handles.

2. Open the Properties window.

   TIP

   If the Properties window isn’t visible, click the Properties Window command on the View menu, or press Alt+Enter.

3. At the top of the Properties window, click the Name property text box. The Name property will appear selected in the Properties window. Although not all XAML controls on a page need a name, you do need to specify one if you plan to use the control in Visual Basic program code. Setting the Name property for this text box will give you something that you can make reference to later.

4. Type NewURL and press Enter.

   As you name the objects on a page, it is useful to follow some basic naming conventions that make the objects easy to recognize in your code-behind file. In this case, I’ve specified NewURL because the object will hold the new web address or URL that the user of the program wants to browse to. Programmers sometimes name objects according to numeric patterns as well, such as TextBox1, TextBox2, and so on.

   Now you’ll put a sample URL in the text box to show users the pattern that you want them to follow.

5. In the Common category, click the Text property, type http://www.msn.com, and press Enter.

   The Text property holds the text that is currently displayed in the text box object on the page, and if you look in the Designer window now, you’ll see that the default text has changed from “TextBox” to “http://www.msn.com.”

   A text box object can contain one or more lines of text. You can modify the text that appears in a text box by using the Properties window, by directly editing the XAML markup associated with the text box in the Code Editor, or by modifying the Text property of the text box in the Visual Basic code-behind file so that the text box changes while the program is running.

   The following screen shot shows what the Properties window looks like after you have set the Name and Text properties. It shows the window slightly expanded and floating over the IDE, which is probably a good way to use the tool when you first start using it. Once you get the hang of it, however, you’ll find it easiest to use the Properties window in its docked position.

   

   Now you’ll change the Name property for the second text box object on the page.

6. Click the second text box object, and use the Properties window to change the Name property of the text box to AllSites.

   You’ll give the larger text box this name because you’ll use it to list all of the web sites that the user visits while the program runs. The text box should be big enough to list up to a dozen web sites.

7. Click the Text property for the AllSites text box, delete the text that is there, and then press Enter.

   The Properties window removes “TextBox” from the AllSites text box in the Designer. This is done to prevent text from being displayed in the text box when the program starts.

8. In the Common category, click the IsReadOnly check box.

   You’ll see a check mark in the check box, indicating that the IsReadOnly property has been set to True. This setting will prevent the user from editing content in the AllSites text box while the program is running, although they can still copy information from the text box to the Clipboard by selecting text in the object with the mouse and pressing Ctrl+C.

Now you’ll set a property for the button object in the program.

Set the Content property of the button object

1. Click the button object on the page.

   The button will be selected and surrounded by resize handles.

   The XAML Button control uses the Content property to store the text that is displayed on a button, so you’ll edit that property now. The text that is currently displayed is “Button,” but you’ll change it to “Visit Web Site” to make the element more descriptive.

2. Use the Properties window to change the Content property of the button object to Visit Web Site.

   Once you make the change, the text is updated in the Properties window, in the button object on the page, and in the XAML markup in the Code Editor.

Now you’ll set a few properties for the web view object in the program.

Set the properties of the web view object

1. Click the web view object on the page.

   The XAML WebView control is a no-frills web browser that allows you to quickly display webpage content in a Windows 8 application. It is useful because you can’t easily start Internet Explorer or another web browser from within a Windows 8 program.

   Adding direct access to the web from a Windows application is an exciting feature. You’ll update the Name property of the web view object now so that you can use this interesting tool in Visual Basic code.

2. Use the Properties window to change the Name property to WebView1.

   TIP

   While you are working with the web view object, you might notice that in the Designer window, the object displays the following message: “This element is enabled only when the application is running.” This means that the web browser will not work while you are creating your application, so you can’t preview how web content will appear until you actually run the program. Not to worry—testing how your program works is part of the overall development process, which I’ll discuss later in the book.

   Now you’ll center the horizontal and vertical alignment of the web content so that the user can see it clearly within the application window that you have designed.

3. In the Properties window, expand the Layout category and scroll down a bit so that you can see the HorizontalAlignment and VerticalAlignment properties.

   These properties control how content is aligned within the web view object. The default is left for HorizontalAlignment and top for VerticalAlignment. However, you’ll want to specify center alignment for both properties. You change these values in the Properties window by clicking one of the four alignment buttons, each of which contains a visual representation of the alignment.

4. Click the center-alignment button for the HorizontalAlignment property.

5. Click the center-alignment button for the VerticalAlignment property.

Your Properties window will look like this:

Congratulations! You are finished setting the properties for the Web List program. Now you’ll write a few lines of Visual Basic program code to navigate to web sites as needed, and to keep track of the web sites that the user has visited.