Grids and Panels
Workflow provides a series of grids and panels to use in forms and user display authoring.
Grids are used to precisely position content in rows and columns. Panels are components that control the rendering of other controls; for example, their size and dimensions, their positions, and the arrangement of their child content.
The following topics describe the controls available in the Grids/Panels list.
Grids and Panels Controls Property Usage
The following table shows the properties used by each control:
| Property | Border | Canvas | Data Grid | Dock Panel | Grid | Grid Splitter | Ink Presenter | Stack Panel | Uniform Grid | View Box | Viewport 3D | Wrap Panel |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| AllowDrop | X | X | X | X | X | X | X | X | X | X | X | X |
| AlternatingRowBackground | X | |||||||||||
| AlternationCount | X | |||||||||||
| Automatic | X | |||||||||||
| Background | X | X | X | X | X | X | X | X | X | X | ||
| BorderBrush | X | X | X | |||||||||
| BorderThickness | X | X | X | |||||||||
| CacheMode | X | |||||||||||
| Clip | X | |||||||||||
| ClipToBounds | X | X | X | X | X | X | X | X | X | X | X | |
| Column | X | X | X | X | X | X | X | X | X | X | X | X |
| Columns | X | |||||||||||
| ColumnSpan | X | X | X | X | X | X | X | X | X | X | X | |
| ColumnHeaderHeight | X | |||||||||||
| Command | X | |||||||||||
| CornerRadius | X | |||||||||||
| Cursor | X | |||||||||||
| DataContext | X | |||||||||||
| DragIncrement | X | |||||||||||
| Effect | X | X | X | X | X | X | X | X | X | X | X | X |
| FlowDirection | X | X | X | X | X | X | X | X | X | X | X | X |
| Focusable | X | X | X | X | X | X | X | X | X | X | X | |
| FocusVisualStyle | X | X | X | X | X | X | X | X | X | X | X | |
| FontFamily | X | X | ||||||||||
| FontSize | X | X | ||||||||||
| FontStretch | X | X | ||||||||||
| FontStyle | X | X | ||||||||||
| FontWeight | X | X | ||||||||||
| ForceCursor | X | X | X | X | X | X | X | X | X | X | X | |
| Foreground | X | X | ||||||||||
| GridColumns | X | |||||||||||
| GridRows | X | |||||||||||
| GridHeadersVisible | X | |||||||||||
| GridLinesVisible | X | |||||||||||
| HeaderBackground | X | |||||||||||
| HeaderFontFamily | X | |||||||||||
| HeaderFontSize | X | |||||||||||
| HeaderFontWeifht | X | |||||||||||
| HeaderForeground | X | |||||||||||
| Height | X | X | X | X | X | X | X | X | X | X | X | X |
| HiddenColumns | X | |||||||||||
| HorizontalAlignment | X | X | X | X | X | X | X | X | X | X | X | X |
| HorizontalContentAlignment | X | X | ||||||||||
| HorizontalGridLinesBrush | X | |||||||||||
| InputTable | X | |||||||||||
| IsEnabled | X | X | X | X | X | X | X | X | X | X | X | |
| IsHitTestVisible | X | X | X | X | X | X | X | X | X | X | X | X |
| IsManipulationEnabled | X | X | X | X | X | X | X | X | X | X | X | |
| IsSharedSizeScope | X | X | X | X | X | X | X | X | X | X | X | |
| IsTabStop | X | X | ||||||||||
| ItemHeight | X | |||||||||||
| ItemWlidth | X | |||||||||||
| KeyboardIncrement | X | |||||||||||
| Language | X | |||||||||||
| LastChildFill | X | |||||||||||
| Localization | X | X | X | X | X | X | X | X | X | X | X | X |
| Margin | X | X | X | X | X | X | X | X | X | X | X | X |
| MaxColumnWidth | X | |||||||||||
| MaxHeight | X | X | X | X | X | X | X | X | X | X | X | X |
| MaxWidth | X | X | X | X | X | X | X | X | X | X | X | X |
| MinColumnWidth | X | |||||||||||
| MinHeight | X | X | X | X | X | X | X | X | X | X | X | X |
| MinWidth | X | X | X | X | X | X | X | X | X | X | X | X |
| Name | X | X | X | X | X | X | X | X | X | X | X | X |
| Opacity | X | X | X | X | X | X | X | X | X | X | X | X |
| OpacityMask | X | X | X | X | X | X | X | X | X | X | X | X |
| Orientation | X | X | ||||||||||
| OverridesDefaultStyle | X | X | X | X | X | X | X | X | X | X | X | |
| Padding | X | X | X | |||||||||
| Pixel | X | |||||||||||
| PreviewStyle | X | |||||||||||
| Projection | X | |||||||||||
| RenderTransform | X | |||||||||||
| RenderTransformOrigin | X | X | X | X | X | X | X | X | X | X | X | X |
| ResizeBehavior | X | |||||||||||
| ResizeDirection | X | |||||||||||
| Row | X | X | X | X | X | X | X | X | X | X | X | X |
| Rows | X | |||||||||||
| RowBackground | X | X | ||||||||||
| RowHeaderWidth | X | |||||||||||
| RowHeight | X | |||||||||||
| RowSpan | X | X | X | X | X | X | X | X | X | X | X | |
| SelectedRows | X | |||||||||||
| ShowGridLines | X | |||||||||||
| ShowsPreview | X | |||||||||||
| SnapsToDevicePixels | X | X | X | X | X | X | X | X | X | X | X | |
| Star (relational) | X | |||||||||||
| Stretch | X | |||||||||||
| StretchDirection | X | |||||||||||
| Strokes | X | |||||||||||
| Style | X | X | X | X | X | X | X | X | X | X | X | X |
| TabIndex | X | X | ||||||||||
| Tag | X | X | X | X | X | X | X | X | X | X | X | X |
| Template | X | X | ||||||||||
| ToolTip | X | X | X | X | X | X | X | X | X | X | X | X |
| Uid | X | X | X | X | X | X | X | X | X | X | X | |
| UseLayoutRounding | X | X | X | X | X | X | X | X | X | X | X | X |
| VerticalAlignment | X | X | X | X | X | X | X | X | X | X | X | X |
| VerticalContentAlignment | X | X | ||||||||||
| VerticalGridLinesBrush | X | |||||||||||
| Visibility | X | X | X | X | X | X | X | X | X | X | X | X |
| Width | X | X | X | X | X | X | X | X | X | X | X | X |
Grids and Panels Controls Property Descriptions
The following table shows the properties descriptions used by all control:
| Property | Description |
|---|---|
| AllowDrop | Select this check box to indicate that the control can accept data that is dragged onto it. |
| AlternatingRowBackground | Expand this field to select the background color to display on alternating rows. |
| AlternationCount | Specifies the number of alternating item containers or rows to display. |
| Automatic | The selected row or column automatically resizes to the width or height of the cell’s largest object. Note: This setting should be used only after objects are placed within the grid cells. This allows the row or column to properly resize with its child objects. If a row or column is empty and set to automatic sizing, it collapses. |
| ArrowBackground | Expand this field to select the background color for an arrow button control. |
| ArrowBorderBrush | Expand this field to select the border color of the selected arrow control. |
| ArrowDesign | Specifies the appearance of the arrow. Available selections are:
|
| ArrowDirection | Specifies the direction of the arrow. Available selections are:
|
| ArrowPadding | Specifies the horizontal and vertical alignment of the arrow within the button. |
| Background | Expand this field to select the background color of the selected control. |
| BorderBrush | Expand this field to select the border color of the selected control. |
| BorderThickness | Specifies the border thickness of a control, in pixels. |
| CacheMode | Specifies a value that indicates that rendered content should be cached when possible. |
| CalendarButtonStyle | Specifies the style of the calendar's buttons. |
| Clip | Specifies the geometric shape used to define the outline of the image. Selections are:
|
| ClipToBounds | Select this check box to clip the content of this control (or content coming from the child elements of this control) to fit into the size of the containing control. |
| Column | Specifies the column within the grid where the control is located. |
| Columns | Specifies the number of columns in the grid. |
| ColumnSpan | Specifies the total number of columns that child content spans within a grid. |
| ColumnHeaderHeight | Specifies the height of the column header row, in pixels. The default is 20 pixels. |
| Command | Specifies the command to invoke when this control is pressed or clicked. |
| CornerRadius | Specifies the degree to which the corners of a control are rounded. |
| Cursor | Specifies the cursor image to display when the mouse pointer hovers over an object. |
| DataContext | Specifies the data context for a control when it participates in data binding. |
| DragIncrement | Specifies the minimum distance that you must drag a mouse to resize rows or columns. |
| Effect | Click the arrow to expand the property, select the effect you want to apply to the control, and then configure the specific values for the effect. Valid values to select are:
|
| FlowDirection | Specifies the direction that text and other user interface (UI) elements flow within any parent control. Selections are:
|
| Focusable | Select this check box to indicate that the control can receive focus. |
| FocusVisualStyle | Specifies a property that enables customization of appearance, effects, or other style characteristics that apply to this control when it has focus. |
| FontFamily | Specifies the font family for the control. |
| FontSize | Specifies the font size for the control. |
| FontStretch | Specifies the degree to which a font is condensed or expanded on the screen. |
| FontStyle | Specifies the font style for the control. |
| FontWeight | Specifies the weight or thickness of the specified font. |
| ForceCursor | Select this check box to indicate that the user interface (UI) renders the cursor as declared by the Cursor property. |
| Foreground | Expand this field to select the foreground color. |
| GridColumns | Specifies the columns for the data grid. The columns are chosen from a list of attributes and specifications derived from the available quality variables. |
| GridRows | Specifies the rows for the data grid. The rows are chosen from a list of available quality variables. |
| GridHeadersVisible | Select this check box to display the header row in the grid. |
| GridLinesVisible | Select this check box to display the grid lines. |
| HeaderBackground | Expand this field to select the header background color. |
| HeaderFontFamily | Specifies the font family for the text in the header. |
| HeaderFontSize | Specifies the font size for the text in the header. |
| HeaderFontWeight | Specfies the font weight for the text in the header. |
| HeaderForeground | Expand this field to select the header text color. |
| Height | Specifies the height of the control, in pixels. |
| HiddenColumns | Specifies the column(s) to omit from the displayed grid, separated by a comma. Column numbers start at zero (0). For example, to hide the first, fourth, and sixth columns, enter 0, 3, 5. |
| HorizontalAlignment | Specifies the horizontal alignment characteristics applied to this control. Selections are:
|
| HorizontalContentAlignment | Specifies the horizontal alignment of the control's content. Selections are:
|
| HorizontalGridLinesBrush | Expand this field to select the color for the horizontal grid lines. The default is black. |
| InputTable | Specifies the table to display in the grid. The InputTable can be defined in a number of ways: in code behind, configured from a data item, or passed in from a workflow (that is, either created in the workflow itself or passed in from an Historian read, which return a DataTable). |
| IsEnabled | Select this check box to indicate that this control is enabled in the user interface (UI). |
| IsHitTestVisible | Select this check box to indicate that the control can possibly be returned as a hit test result from some portion of its rendered content. |
| IsManipulationEnabled | Select this check box to indicate that the manipulation events for the control are enabled. |
| IsSharedSizeScope | Select this check box to indicate that controls are sharing size information. |
| IsTabStop | Select this check box to indicate that a control is included in tab navigation. |
| ItemHeight | Specifies the height of all items contained within a Wrap Panel. |
| ItemWidth | Specifies the width of all items contained within a Wrap Panel. |
| KeyboardIncrement | Specifies the distance that each press of an arrow key moves a Grid Splitter control. |
| Language | Specifies the localization language that applies to an object. |
| LastChildFill | Select this check box to indicate that the last child control within a Dock Panel stretches to fill the remaining available space. |
| Localization | Click the ellipsis button to open the Localization Configuration dialog box where you can configure the property to localize, the language to use for localization, and the text to localize. |
| Margin | Specifies the outer margin of a control. |
| MaxColumnWidth | Specifies the maximum width of the columns and headers in the grid. |
| MaxHeight | Specifies the maximum height of a control. |
| MaxWidth | Specifies the maximum width of a control. |
| MinColumnWidth | Specifies the minimum width of the columns and headers in the grid. |
| MinHeight | Specifies the minimum height of a control. |
| MinWidth | Specifies the minimum width of a control. |
| Name | Specifies the identifying name of the control. The name provides a reference so that code behind, such as event handler code, can refer to a markup element during processing by a XAML processor. |
| Opacity | Specifies the opacity factor applied to the entire control. Valid values are 0 through 1, with up to 15 decimal places. |
| OpacityMask | Expand this field to select a color for the opacity mask, which is applied to any alpha-channel masking for the rendered content of this control. |
| Orientation | Specifies the orientation of a control. Selections are:
|
| OverridesDefaultStyle | Select this check box to indicate that this control incorporates style properties from theme styles. |
| Padding | Specifies the amount of padding to apply to the inside edge of each side of a control. |
| Pixel | The selected row or column in the grid becomes a fixed size and remains fixed even if the grid is resized. |
| PreviewStyle | Specifies the style that customizes the appearance, effects, or other style characteristics for the Grid Splitter control preview indicator that displays when the ShowsPreview property is set to True. |
| Projection | Specifies the 3-D effect to apply to the current object. |
| RenderTransform | Specifies the transform information that affects the rendering position of an object. |
| RenderTransformOrigin | Specifies the center point of any possible render transform, relative to the bounds of the element.
|
| ResizeBehavior | Specifies the columns or rows that are resized relative to the column or row the GridSplitter control is defined for. Valid selections are:
|
| ResizeDirection | Specifies whether the GridSplitter control resizes rows or columns. Valid selections are:
|
| Row | Specifies the row background. |
| Rows | Specifies the number of rows in the grid. |
| RowBackground | Expand this field to select the background color for the row. |
| RowHeaderWidth | Specifies the width of the row header column. |
| RowHeight | Specifies the default height for all rows. |
| RowSpan | Specifies the total number of rows that child content spans within a grid. |
| SelectedRows | Specifies the selected row(s) as a new table. |
| ShowGridLines | Select this check box to indicate that grid lines are visible within this grid. |
| ShowsPreview | Select this check box to indicate that the Grid Splitter control updates the column or row size as the control is dragged. |
| SnapsToDevicePixels | Select this check box to indicate that rendering for this control uses device-specific pixel settings. |
| Star (relatonal) |
A row or column height or width set to relational sizing becomes a proportional size. Star values are ratios calculated from the remaining available space in the grid and are subject to a certain hierarchy. The total available space in a grid is allocated first to rows and columns with fixed pixel row height / column width. Then, space is allocated to rows and columns that are set to automatically size. Finally, rows and columns with relational heights and widths share a percentage of the grid's remaining space. For example, consider a grid with two columns that is 1000 pixels in width. One column has a fixed size of 100 pixels; the other column is set to relational sizing. In order to determine the available space for the relational column, subtract the width of the column set in pixels from the total width of the grid (in pixels): 1000 - 100 = 900 pixels of remaining space. Since the default star value is 1, it is easy to calculate the number of pixels per star in this example. Pixels per star are calculated by dividing the total available width (in pixels) by the total number of star values in the grid: 900 ÷ 1 = 900 pixels per star. Therefore, the size of the relational column is 900 pixels (900 pixels x 1 star). Now consider if a third column is added with a star value of 2. The grid still has 900 pixels of remaining available space, but now the star values total 3 (1 star from the first relational column, 2 stars from the new column): 900 ÷ 3 = 300 pixels per star. Therefore the first relational column is now a size of 300 pixels (300 pixels x 1 star) and the new column is a size of 600 pixels (300 pixels x 2 stars). The grid's child objects inherit a number of attached dependency properties. The Row and Column properties specify the starting row and column that displays the object. RowSpan and Column Span show the number of cells the object spans, either vertically or horizontally. And, the Margin property specifies the amount of unused space, in pixels, between the grid cell lines and the object. |
| Stretch | Specifies how an Image stretches to fill the destination rectangle. Selections are:
|
| StretchDirection | Specifies how the image is scaled. Selections are:
|
| Strokes | Specifies the strokes that the control displays. |
| Style | Specifies the style used by this control when it is rendered. |
| TabIndex | Specifies the order in which controls receive focus when the Tab key is pressed. |
| Tag | Specifies an arbitrary object value that can be used to store custom information about this control. |
| Template | Click the ellipsis button to open the Open dialog box to select a template to use. |
| ToolTip | Specifies the tool-tip that displays for this control in the user interface (UI). |
| Uid | Specifies the unique identifier (for localization) for this control. |
| UseLayoutRounding | Specifies a value that determines whether rendering for the object and its visual subtree should use rounding behavior that aligns rendering to whole pixels. |
| VerticalAlignment | Specifies the vertical alignment characteristics applied to this control. Selections are:
|
| VerticalContentAlignment | Specifies the vertical alignment of the control's content. Selections are:
|
| VerticalGridLinesBrush | Specifies the color used to draw the vertical grid lines. The default is black. |
| Visiblility | Specifies the visibility of this control. Selections are:
|
| Width | Specifies the width of the control, in pixels. |