Creating the Console Tab User Interface

When an end user selects a Console tab on the Windows Home Server Console, the pane area for the console changes. The pane area is the area where you can display a single object of type Control for your tab. However, the Control object can contain and display other Controls within itself. End users can then interact with your application by using the Controls that are displayed in the pane area of your Console tab. The following image shows the Windows Home Server Console open:

For this tutorial, you create a simple Console tab that displays some arbitrary information about Windows Home Server objects on the server and opens a Settings tab. To accomplish this, the Console tab contains three buttons.

The first button that you provide displays information about some Windows Home Server objects when it is clicked. You also provide a second button to clear the display. Finally, you provide a third button that end users can click to open the Windows Home Server Settings page dialog to an associated Windows Home Server Settings tab.

In this topic, you create a user control that you will use as the user interface (UI) for your Console tab.

Creating the User Control

The Console tab that you create in this tutorial displays a user control that is composed of a RichTextBox control and three Button controls. This user control appears in the pane area of the sample Console tab when an end user clicks the Console tab.

To create the ShowWHSInfoPanel User Control

1. With the SDKSample project open in Visual Studio, right-click SDKSample in Solution Explorer, point to Add, and then click User Control. The Add New Item dialog appears.

2. In the space provided for Name, rename the file from UserControl1.cs to ShowWHSInfoPanel.cs (from UserControl1.vb to ShowWHSInfoPanel.vb in Visual Basic), and then click Add. The ShowWHSInfoPanel.cs [Design] tab appears (ShowWHSInfoPanel.vb [Design] tab in Visual Basic).

3. Add a RichTextBox control to the user control area. In the properties for the RichTextBox control, set the following values:

   1. Scrollbars to Vertical.

   2. Multiline to True.

   3. ReadOnly to True.

   4. (Name) to rtShowWHSInfo.

   5. Locked to True.

   6. Modifiers to Internal (Friend in Visual Basic).

   7. Location to 152, 36.

   8. Size to 804, 520. (You need to resize the user control area to see the entire RichTextBox.)

4. Add a Button control at the top of the user control area and to the left of the RichTextBox control. In the properties for the button, set the following values:

   1. Text to Show WHS Info. If necessary, resize the button in order to display the entire text.

   2. (Name) to btnShowInfo.

   3. Modifiers to Internal (Friend in Visual Basic).

5. Add another Button control to the user control area below the first button. In the properties for the button, set the following values:

   1. Text to Clear Display.

   2. (Name) to btnClearInfo.

   3. Modifiers to Internal (Friend in Visual Basic).

6. Add a third Button control to the user control area below the second button.

   1. Text to Open Settings.

   2. (Name) to btnOpenSettings.

   3. Modifiers to Internal (Friend in Visual Basic).

7. On the main menu, click File and then click Save All.

In the next topic, Writing the Console Tab Code, you add code to the project that enables the end user to interact with your application by using the Console UI that was created here.

Summary

The Console tab user interface is complete. You are now ready to work through the Writing the Console Tab Code section of this tutorial.

See Also

Concepts

Creating a Console Tab
Changing the Tab Order
Creating a Settings Tab