Displaying Different Page Views

Multiview contol

Hide and display different areas of a page

Can use to create tabbed page

Or divide a long form into multiple forms

 

Contains one or more View controls

Use multiview to select a view control to render

The other view controls are hidden

 

You can only view one view control at a time

Multiview controls

Properties:

• ActiveViewIndex
• Select view control to show by index
• Views
• Get the collection of view controls in a multiview control

Methods:

• getActiveVIew
• get the selected view control
• setActiveView
• select the active view

Event:

• activeViewChanged
• fired when a new view is selected

View Control

Container for other controls

Events:

• Activate
• When view gets selected
• Deactivate
• When view loses selection

 

You can use a Multiview control with the Menu control to create a tabbed page

• Open Visual Studio
• Create a web page
• Drag a Menu control to the page, name it mnuTabs

• Set the orientation property to Horizontal

• Add a multiView control, name it multiTabs

• Drag a 3 view controls into the multiview control

• Select the multiView control and set the ActiveViewIndex to 0

• Type into each View

You could also add controls

• Select the Menu Control and open the smart tag
• Select Edit Menu Item

• Click Add a root item button

• Change the text to Tab1

• Change selected property to true
• Change the value to 0

Value must start with 0 and increment for each tab

The value is what gets passed to the ActiveViewIndex of the mutliView control to select the tabs

• Add two more tabs and change the text to Tab2 and Tab3
• Change the values to 1 and 2
• Click OK
• Double-click the menu control and add this code:

Dim index As Integer = Int32.Parse(e.Item.Value)

multiTabs.ActiveViewIndex = index

 

• test it

 

Lets make it look a little nicer

• Click the webform
• Select the Style property

• Change the background color

You need to add 5 style classes

1. background color of the page
2. All tabs
3. Each tab
4. The selected tab
5. the contents of each tab

 

• Add a new item
• Stylesheet

• Double-click it in the solution explorer

• right-click on the body tag and select Build style

• Select background
• Change the color to gray

• Go back to your web form
• Drag the stylesheet to the web form

It adds the code to link your page to the style sheet

• Select the CSS page again
• Right-click the web form and select Add Style Rule

Select Class Name

Name it .tabs

• Click OK
• Right-click .tabs
• Select Build Style

• Select Position and Offset from normal mode

This makes the positioning relative

• Set the pixels for top and left offsets
• Go back to your web form
• Select the menu
• Change the CSSClass property to tabs

Back to the stylesheet

• Add a .tab class

• Select background color and pick a dark color

• Select edges
• Solid line
• Custom 1 px
• black

Go to the web form and select the menu

Open the StaticMenuItemSyle and change the CssClass to tab

• Add another CSS class and name it .SelectedTab
• Change the background color

• Change the bottom border to solid, 1px, the color of the tabs(to blend in)

• Add a class for .tabContents
• Change the background to the same color as the tabs
• Change all the padding to 10px
• Change all border to solid, 1px, black

• Go back to the web form
• Select the menu
• Open StaticSelectedStyle and change the cssClass to selectedTab

• Open the code view
• Select the <div> tab around the multiView control
• Change the Class property to tabContents

• Select the StaticSelectedStyle and change the horizontal Padding to 20px

You can change the other styles as well