Panel elements are components that control the rendering of elements - their size and dimension, trsheir position and the arrangement of their child content.
Intersoft ClientUI provides a number or predefined panels that can help you in creating application UI. However not all of them are intended for use as root layout providers.
Each panel element encapsulates it own special functionality, as seen in the following list.
Defines an area within which you can arrange child elements either horizontally or vertically, relative to each other.
Positions child elements in sequential position from left to right, breaking content to the next line at the edge of the containing box. Subsequent ordering happens sequentially from top to bottom or right to left, depending on the value of the Orientation property.
Used to arrange children in grid will equal cell sizes.
Arranges child elements into single line that can be oriented horizontally or vertically.
Arranges child elements into single line that can be oriented horizontally or vertically. When there is no longer room for the next specified child elements, these elements will be registered in other panel specified by OverflowContainer property.
When DockPanel.Dock is set to Top or Bottom, it positions child elements above or below each other. When DockPanel.Dock is set to Left or Right it positions child elements to the left or right of each other.
Specifying Fill Element
The main difference between Intersoft DockPanel and standard dock panel is that Intersoft DockPanel provides FillChildMode property instead of LastChildFill property. With this approach you do not need to put the element you want to set as fill element as the last child, simply set DockPanel.IsFillElement attached property.
Sizing to Content
If its Height and Width properties are not specified, DockPanel sizes to its content. The size can increase or decrease to accommodate the size of its child elements. However, when these properties are specified and there is no longer room for the next specified child element, DockPanel does not display that child element or subsequent child and does not measure subsequent child elements.
Using Layout Adorner
To make layouting task easier, ClientUI features an adorner designer feature in certain layout controls such as in DockPanel. An adorner is an advanced designer feature in both Expression Blend and Visual Studio 2010 in which visual cues are displayed to allow users easily interact with the user interface elements.
The DockPanel is an ideal example that shows the adorner designer feature. As DockPanel allows its children to be docked in one of the four sides of the layout boundary, the DockPanel adorner provides a helpful visual cue that indicates the Dock position of the currently selected children. Additionally, you can also click on the visual cue to change the Dock position which makes it easy and intuitive to work with layouting task in the Expression Blend designer.
To learn more about these design time features, see Development Environment Overview.
Defining and Using a DockPanel
The following example demonstrates how to partition space using a DockPanel.
To learn more how to create this example step by step using layout adorner, see Walkthrough: Create Fluid UI Layout using DockPanel.
WrapPanel is used to position child elements in sequential position from left to right, breaking content to the next line when it reaches the edge of its parent container. Content can be oriented horizontally or vertically. WrapPanel is useful for simple flowing user interface (UI) scenarios. It can also be used to apply uniform sizing to all of its child elements.
Defining and Using a WrapPanel
The following example demonstrates how to create a WrapPanel to display Button controls that wrap when they reach the edge of their container.
UXGridPanel is used to arrange children in grid will equal cell sizes, which means all UXGridPanel has equal size specified by ItemHeight and ItemWidth property, thus you need to be careful when configuring the size its children. It is recommended to use auto size for all children in the UXGridPanel.
Similar with WrapPanel, UXGridPanel has an Orientation property that controls the item arrangement. If it is set to Horizontal, it will fill the column first then the row. Similarly, if it is set to Vertical, it will fill the row first then column.
Defining and Using a UXGridPanel
All children in a UXGridPanel will be arranged in logical order based on their index. You do not need to set the Grid.Column, or Grid.Row for any of the children since the layout is automatically handled by the panel.
The following example shows how to create a Uniform Grid to display list of items with equal size.
Handling Drag and Drop
Defining and Using a UXStackPanel
Handling Drag and Drop
UXOverflowStackPanel is an innovative panel featuring built-in items overflow detection mechanism. The overflow logic works by intelligently measuring the desired size of all the contained items against the panel's actual dimension.
The items that exceeded the panel's actual dimension, called overflow items, will be seamlessly removed from the UXOverflowStackPanel to ensure the remaining items to fit into the available dimension. Consequently, the overflow items are moved to the overflow container panel which can be any type of panels that derive from Panel class. The overflow container panel can be specified in the OverFlowContainer property of the UXOverflowStackPanel.
Defining and Using a UXOverFlowStackPanel
The following example demonstrates how to use a UXOverflowStackPanel to moved the overflow items to overflow container panel.
In this sample there are eight images that registered under UXItemsControl that use UXOverflowStackPanel as its ItemsPanel since the container size is restricted to 500 pixel, UXOverflowStackPanel can only render four of them, while the other four is passed to overflow container panel.