4.2 – Panel

Panel can be thought as a container with a visual representation. Panel looks and feels same as window except dragging feature. A panel cannot be draggable. You should prefer panel over window for performance reasons if possible.

Layout
Layout property of a container specifies how to arrange its children. As of version 1.05 there are five layout types.

  1. Free : Free layout enables developer to place an element whereever he/she wants within the boundaries of the container. When adding an element to a container with free layout, you can draw it by dragging directly on Game View.
  2. Vertical : Vertical layout apportions its usable area vertically to its children evenly. This enables developers to rapidly create regularly organized user interfaces. When adding an element to a container with vertical layout you can add the element just by clicking. You can’t draw elements directly by dragging to the Game View as in free layout. But after adding an element to the scene, you can resize and position that element by dragging as in free layout.
  3. Horizontal : Horizontal layout is the horizontal variation of the vertical layout. Horizontal layout apportions its usable area horizontally to its children evenly. This enables developers to rapidly create regularly organized user interfaces. When adding an element to a container with horizontal layout you can add the element just by clicking. You can’t draw elements directly by dragging to the Game View as in free layout. But after adding an element to the scene, you can resize and position that element by dragging as in free layout.
  4. Vertical Dense : Vertical Dense layout is generally used to organize elements densely in vertical order. Differently from vertical layout, vertical dense layout won’t apportion its area evenly. Instead the remainder area from the previous element becomes the usable area of the current element. It would be better to explain it with an example. Let’s assume that we have a container with vertical dense layout. When we add 3 elements with positionAndSize.y=0 they will be lined up closely to each other at the top of the container. The distance between items can be determined with the Items Margin property.
  5. Horizontal Dense : Horizontal Dense layout is the horizontal variation of the Vertical Dense layout. Horizontal Dense layout is generally used to organize elements densely in horizontal order. Differently from horizontal layout, horizontal dense layout won’t apportion its area evenly. Instead the remainder area from the previous element becomes the usable area of the current element. It would be better to explain it with an example. Let’s assume that we have a container with horizontal dense layout. When we add 3 elements with positionAndSize.x=0 they will be lined up closely to each other at the left of the container. The distance between items can be determined with the Items Margin property.

Padding
Padding property restricts the usable area of a container which is represented by red dashed rectangle.

Items Margin
Items Margin property determines the space between the items of a container with Vertical, Horizontal, Vertical Dense or Horizontal Dense layout. For free layout, items margin is useless since items floats in the usable area of a container freely.

Type
Type property only effects the visual appearance of the panel. There are two types of panel in iGUI. GlassPanelBlack is a transparent panel with a black title bar and GlassPanelBlue is also a transparent panel with a blue title bar.

Style
Style property is a GUIStyle and can be used to fine tune the visual appearance of the panel. This property is copied from the GUI skin stored in the root when a panel is created or the type property changed. If a GUIStyle named GlassPanelBlue or GlassPanelBlack cannot be found, window style in the skin will be used alternatively.