FlowPanel Control

Panel Type

Configures how items are arranged in the container. Options include WrapPanel for wrapping content, Canvas for manual positioning, DockPane for docked elements, Grid for a grid layout, StackPanelHorizontal and StackPanelVertical for stacking, and UniformGrid for uniform distribution.

WrapPanel: Aligns items horizontally and wraps them to the next line when the width is exceeded. Best suited for horizontal listings or galleries where the number of items can vary. It dynamically adjusts line breaks when the window is resized.

Canvas: Positions items at fixed coordinates (x, y) within the panel. Suitable for cases that require precise control of item placement, such as maps. The panel does not adapt easily to resizing due to fixed positions.

DockPanel: Anchors items to the panel's edges or fills remaining space in the center. Ideal for layouts that distribute content around a central element. It adapts well to resizing by adjusting items to the available space.

Grid: Organizes items into rows and columns with flexible cell sizing. Useful for structured layouts that require tabular or grid-based alignment. The grid layout adjusts proportionally as the panel resizes.

StackPanelHorizontal: Aligns items horizontally in a single line without wrapping. This is ideal for simple horizontal lists like menus or toolbars. However, the layout may require scrolling if the content exceeds the panel width.

StackPanelVertical: Stacks items vertically in a column. Suitable for simple vertical lists, such as task lists or side menus. The panel may adjust its height to fit all items within the vertical alignment.

UniformGrid: Distributes items evenly in a grid where all cells have the same size. It is ideal for layouts where uniformity is needed, such as image galleries. The layout dynamically adjusts based on screen size changes.

Panel Settings

Sets specific configurations for the panel, allowing adjustments to layout parameters like width, height, and margin. An Apply button finalizes the changes, ensuring the panel reflects the new settings.

Width

Specifies the width of items within the container. Users input a value, and the system automatically applies the specified width across all items.

Height

Defines the height of items inside the panel. The height value applies uniformly across all components, ensuring consistency in vertical size.

Margin

Adjusts the spacing around items within the container. The margin creates space between items and the container’s borders or other items, based on the value entered.

Source

Determines the data source for the items displayed within the panel. Options include Text for static text input, StringTag for tagged text elements, Array for data lists, and Object for structured data types.

Text: Allows manual configuration of items using static text. Items and their properties are defined with case-sensitive element and property names. Suitable for defining symbols or controls, with properties linked to static or dynamic values.

StringTag: Similar to the Text source but links item properties to dynamic SCADA tags. This allows the configuration of items that respond to real-time data changes. Used for dynamically updating symbols based on tag values.

Array: Uses a string array where each entry defines an item and its properties. This enables dynamic generation of multiple items at once, useful for scenarios with several items. Each item follows the same format as Text or StringTag.

Object: Uses a DataTable or DataTemplate for advanced configurations. Each row in the table represents an item, and each column defines the item's properties. Ideal for configurations that source data from databases or templates.

Max Items

Sets the maximum number of items displayed in the panel. The system enforces this limit, ensuring that no more than the defined number of items appear, regardless of the data source size.

Reload

Reloads the data source, updating the items shown within the container. This action pulls the latest data, ensuring that the displayed items match the current state of the source.

Preview

Displays a real-time preview of how items will appear within the panel. The system generates this preview based on the current data and configuration settings, allowing users to see changes before applying them.

Count

Provides the total number of items available from the data source. The count helps users understand the number of items accessible, though not all may be displayed depending on the Max Items setting.

Click on Image to Add

Allows users to click on an image to add it as an item to the panel. This interaction simplifies item selection by letting users visually select elements from a predefined set of images.