In order to support the new Outlook – Mini mode I needed to add the ability to show a page inside a popup window. It seems logical to expose this feature for all the modes that I would call ‘tab strips’. I define a ‘tab strip’ mode as one where the contents of the selected page are not displayed in the control.
For each of these ‘tab strip’ modes you can now press the page header (tab, check button or ribbon tab) and have the associated page show inside a popup. This is best explained using a possible usage scenario.
HeaderBar – CheckButton – Group
We begin with a mode that shows the contents of the selected page. There is also an arrow button defined via a button spec on the right of the navigator. At runtime you can imagine a user wanting to conserve window real estate by pressing the up arrow to shrink down the size of the control.
HeaderBar – CheckButton – Only
Once the arrow is pressed we switch to this new mode where the client area has been hidden. This frees up client area for other more important controls.
But the user might still need to access the pages from time to time. Rather than force the user to expand the control back to the original setting they can just press the header of the page they need. So if they press the First button they now get this popup…
This is a really nice feature because if the user needs just occasional quick access they can single click and get the popup. If they want to access the pages all the time they can use the down arrow button and have the pages displayed all the time. So with only a few lines of code used to switch modes we have provided some great flexibility to the user.
To prove the popup page is fully functionality let’s try a silly example. We can place another navigator instance inside one of the pages. Here we click page Three which contains within itself a Outlook – Mini mode navigator.
Clicking the Outlook – Mini button will correctly show its own page as another popup.
Using the TAB key works correctly and rotates the focus around the controls inside the popup. You can use the ESCAPE key at any time to dismiss the top most popup page.
Navigator.PopupPages Properties
There are several properties inside Navigator.PopupPages that can be used to customize how the popup is displayed. By default you will see that the popup has a border area of 3 pixels around the actual page contents. For the next picture we will change that to be 9.
You can also change the location of the popup. By default you will have noticed it shows the popup below the header item and aligned to the left edge. Now let’s choose the option that shows it below the navigator but changed in size to match the width of the navigator.
DisplayPopupPage Event
To provide maximum flexibility there is an event called DisplayPopupPage fired just before the popup is shown. It allows you to modify the screen rectangle that is used for display. This gives you complete control over the size and location in order to match whatever unique needs your application has.
By the way, all the images above should have a nice shadow border around the pop ups but my Paint Shop Pro would not capture them. So the real appearance looks much better.
