Skip Navigation LinksASP.Net 2.0 Training : Tabbed MultiView
Banner for ASP.Net 2.0 training classes in Visual Basic 2005 

Skip Navigation Links
Visit my other site:

certification training

Free Flash tutorials and training

Free Dreamweaver Video Tutorials

Free PHP Training

Visual Basic Windows Training




If you like this site please link to it


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


      ASP.Net 2.0 tutorials & training