Microsoft ASP.NET Web Matrix Starter Kit (Bpg-Other)

Given the information already in the page, it s easy to make a fancier navigation bar that consists of more than just two buttons. The navigation bar lets you navigate forward or backward to view the slides and has a counter to display the information about the current slide, as shown in Figure 5-2.

Figure 5-2: A navigation bar added to the slideshow page.

Configure controls for the navigation bar

  1. Change the Text property of the Previous button to < and of the Next button to >. If you want, you can change the Font and ForeColor properties to make the text more visible.

  2. To get the counter, drag a Label control between the Previous and Next buttons. (You might need to add a few spaces between the two buttons first to make room.) If necessary, set the control s background color to match the page.

  3. Resize the Label control to display all the label content. Set the Label control s ID property to labelNavbar and clear its Text property.

To display information about the current slide, you need to change the text of the Label control each time you click a navigation button. You need this line of code to perform this task:

labelNavbar.Text = "Slide " & currentSlide+1 & " of " & slideNames.Length

This code builds up a string out of the fixed text plus the current slide number plus the length of the array. We re adding 1 to the current slide number because the slide numbers start at 0, and that would look odd to users. Once the string has been built up, it s assigned to the Text property of the Label control. The following procedure describes how to update the navigation bar label text.

Update the navigation bar label text

  1. In Code view, go to the Page_Load handler and add the boldfaced code shown here:

    Sub Page_Load(     ⋮     If IsPostBack = True The          currentSlide = Viewstate("currentSlid e"     Els         currentSlide =          Viewstate("currentSlide") = currentSli d         imageSlide.ImageUrl = path & slideName s(currentSlide         labelNavbar.Text = "Slide " & currentSlide+1  & _            " of " & slideNames.Length     End I End Sub

  2. Go to the buttonNext_Click handler and add the same boldfaced code, as shown here:

    Sub buttonNext_Click(sender As Object, e As Ev entArgs     ⋮     imageSlide.ImageUrl = path & slideNames(cu rrentSlide     Viewstate("currentSlide") = currentSlid     labelNavbar.Text = "Slide " & currentSlide+1 & " of " & _         slideNames.Length End Sub

  3. Finally, go to the buttonPrevious_Click handler and add the same boldfaced code again, as shown here:

    Sub buttonPrevious_Click(sender As Object, e A s EventArgs     ⋮     imageSlide.ImageUrl = path & slideNames(cu rrentSlide     Viewstate("currentSlide") = currentSlid     labelNavbar.Text = "Slide " & currentSlide+1 & " of " & _         slideNames.Length End Sub

  4. Test the slideshow by pressing F5.

As you click the Next and Previous buttons, you ll see updated text. (Remember that if you didn t close the browser the last time you tested the slideshow page, you ll need to refresh in order to update the page.)

Related

Категории