Using Panels

Panels are a very powerful and effective way to manage multiple controls as a group. Panels can be used for all kinds of things: from creating tabbed interfaces, "dock"-like bars, etc, to creating elegant menus and wizards, and much more! Please see the topics below to learn more:

Panels
UIPanelManager

Solo Panels

Panels can be used by themselves to show/hide/move/etc a collection of controls as a group. Below are some "recipes" for interesting uses for panels.

Recipes
Hide-able Control Panel
Create a GameObject with a UIPanel attached and place controls as its children. Create a separate UIPanelTab or UIBtnChangePanel control. Associate this control with the panel (see scripting reference for each control for details). Setup the forward "Bring In" and "Dismiss" transitions for the panel so that it uses a FadeSprite to fade in when brought in, and fade out when dismissed (also use FadeText if you have text on the panel). You now have a way to easily toggle the panel on/off.
Draggable Tool Window
Create a GameObject with a UIInteractivePanel attached and place controls as its children. Add a collider to the panel object, and size it so that it occupies the "window's" area (you can fill the body of the window in visually with other graphics/sprites as children if you like). Make sure the collider is positioned behind the child control's colliders so that it does not cover them, but rather sits just behind them. Check the panel's Draggable checkbox. You now have a draggable "window" of controls!
Auto-hide "Dock"-like bar
Create a GameObject with a UIInteractivePanel attached and place controls as its children. Add a collider to the panel object, and size it so that it occupies the bar's area (you can fill the body of the window in visually with other graphics/sprites as children if you like). Make sure the collider is positioned behind the child control's colliders so that it does not cover them, but rather sits just behind them. Position the panel at the edge of the screen so that just the edge of it is visible on-screen.

Now setup the panel's "Over" transition to Translate the panel to a position so that it is fully in view. Setup the "Normal" transition to Translate the panel back to its original position.

When the pointing device passes over the panel, it should now slide out nicely to reveal all attached controls, and then slide back out of the way when done.
Flip-out Control Panel
Create a GameObject with a UIInteractivePanel attached and place controls as its children. Note that this panel will rotate to reveal its child controls, and that rotation will occur about its center, so position the children according to the fact that they will rotate about the panel's center point.

Add a box collider to the panel object, and size it so that it occupies the panel's area (you can fill the body of the window in visually with other graphics/sprites as children if you like). Also give the collider some depth so that when the panel is "folded" away, the collider still has a sufficient "profile" from the perspective of the camera that it isn't too difficult to put our pointer over it.

Make sure the collider is positioned behind the child control's colliders so that it does not cover them, but rather sits just behind them. Rotate the panel so that it is at a right-angle to the camera. From the game view's perspective, you should now be looking at the panel's edge.

Now setup the panel's "Over" transition to Rotate the panel 90 degrees about the appropriate axis so that it faces the camera. Setup the "Normal" transition to Rotate the panel back to its original position.

When the pointing device passes over the panel, it should now rotate nicely to reveal all attached controls, and then rotate out of the way when done.

Managed Panels

Panels can be managed together using a UIPanelManager object, which lets you do things like create menus and wizards. See some of the "recipes" below for examples of what you can do with this approach:

Recipes
Tabbed Interface
Use the same setup as in the "Hide-able Control Panel" recipe above, using the UIPanelTab control to setup multiple panels, arranged so that each panel occupies the same area, but the tab buttons are sequential. You can use appropriate graphics to cause the panels to visually connect to the tab buttons. Make sure all tab buttons share the same parent GameObject.

Make all of the panels children of a UIPanelManager object. Choose which panel will be visible at the start and check its corresponding tab button's Panel Showing At Start checkbox. We will call this the "default panel" here. Set all the other panels to inactive (uncheck their active checkbox in the inspector), and answer "Yes" when asked whether to disable all children. Also check all panels' Deactivate All On Dismiss so that they will be disabled when hidden.

Now drag your default panel onto the Default Panel slot on the UIPanelManager object so that it knows this is the starting panel.
Side-scrolling Wizard
Create a GameObject with a UIPanelManager component attached and create as many GameObjects with UIPanels attached as you have "pages" in your wizard (see note below first). Make these panels children to the UIPanelManager object. Fill the panels with appropriate controls for each page. You can include buttons here to go to the next/previous page, or you can have a single set of such buttons outside of the panels to control the wizard. In either case, you may use the UIBtnChangePanel control type to navigate the wizard. Set the "Back" button's Change Type to Back, and the Forward/Next button's Change Type to Forward.

Assuming we want the wizard to scroll from right to left as we progress page after page, place all panels (except perhaps the starting panel) off-screen to the right. Now set each panel's bring in/dismiss forwards/back transitions such that they Translate to be in view with brought in, and Translate off-screen left when dismissed when moving forward in the wizard, and translate off-screen right when moving backward in the wizard. NOTE: This is the easiest if you setup the transitions on the first panel first before doing anything else, and then duplicate this panel as many times as needed for the other panels in the wizard.

You can add code that checks the position in the wizard and disables the Forward/Back buttons as appropriate.
Flying menu
Follow the same setup steps as in the "Side-scrolling Wizard", except instead of using a set of "forward" and "back" buttons to navigate, each of our pages will have its own UIBtnChangePanel buttons that take us to a specific page. This allows us to have a branching menu, rather than a linear wizard. Set each button to use the BringInForward or BringInBackward Change Type as appropriate for the panel you will bring into view. Ensure each panel has a unique name, and then assign this name to the navigation buttons to indicate which panel is to be brought up when the button is clicked.

Now to create our "flying" effect, we will set each panel's transitions to have two elements: a Translate element and a FadeSprite element. When moving forward, we want the panels to fly toward the camera, and when moving back, to fly away from it. (This effect is most effective if using a non-orthographic camera.) We also want panels coming into view to be faded in to full white, and panels being dismissed to be faded to transparent (0 alpha).

We'll use the FromTo mode for all transitions. For Bring In Forward, set the transition's Translate element to start the panel at a distance from the camera, and then bring it to the desired viewable position. Now set the FadeSprite element to fade from 0 alpha to 1. (You may also want to use a FadeText here if you have text on the panel.)

For Bring In Back, do the same, but set the start position to very near the camera.

For Dismiss Forward, the starting coordinates should at the panel's normal viewing position and the end coordinates at the near-to-the-camera position. The starting color should have an alpha of 1, and the ending an alpha of 0.

For Dismiss Back, use the same as above only the end coordinates should be the far-from-the-camera position used as the starting position in Bring In Forward.