Layout C# Help

To define the layout of the application, you can use a class that derives from the Panel base class, Several layout containers are available that are discussed here, A layout container needs to do two main tasks measure and arrange, With measuring, the container asks its children for the preferred shes, Because the complete size answered by the controls might not be available, the container next decides and arranges the size and positions of its children.

StackPanel

The window can contain just a single element as content. If you want to have more than one element inside there, then you can use a StackPanel as a child of the Window, and add elements to the content of the StackPanel, The StackPanel is a simple container control that just shows one element after the other, The orientation of the StackPanel can be horizontal or vertical, The class ToolBarPanel is derived from StackPanel.

For data-binding items to a StackPanel, if there is not enough space for all items to
display, then you can use the VirtualizingStackPanel instead, With this panel, only the items shown are generated.

Figure 34-13

Figure 34-13

WrapPanel

The Wrap Panel positions the children from left to right,one after the other,as long as they fit into the line,and then continues with the next line.The orientation of the panel can be horizontal or vertical.

Figure 34-14 shows the output of the panel, If you resize the application, then the buttons will be rearranged so that they fit into a line.

Figure 34-14

Figure 34-14

Canvas

Canvas is a panel that allows you to explicitly’ position controls, Canvas defines the attached properties Left, Right, Top, and Bottom that can be used by the children for positioning within the panel.

Figure 34-15 shows the output of the Canvas panel with the positioned children Label, TextBox, and Button.

Figure 34-15

Figure 34-15

DockPanel

The DockPanel is very similar to the Windows Forms docking functionality.Here, you can specify the area where child controls should be arranged, DockPanel defines the attached property Dock, which you can set in the children of the controls to the values Left, Right, Top, and Bottom. Figure 34-16 shows the outcome of text blocks with borders that are arranged in the dock panel. For easier differentiation, different colors are specified for the various areas.

Figure 34-16

Figure 34-16

Grid

Using the Grid, you can arrange your controls with rows and columns. For every column, you can specify a ColumnDefinition, For every row, you can specify a RowDefinition. The sample code lists two columns and three rows. With each column and row, you can specify the width or height. ColumnDefini tion has a Width dependency property; RowDef ini tion has a Height dependency property, You can define the height and width in pixels, centimeters, inches, or points, or by setting it to Auto to determine the size depending on the content, The grid also allows star sizing, whereby the space for the rows and columns is calculated according to the available space and relative to other rows and columns, When providing the available space for a column, you can set the Width property to• To have the size doubled for another • column, you specify 2.

The sample code, which defines two columns and three rows, doesn’t define ”’additional settings with the column and row definitions; the default is the star setting.

The grid contains several Label and TextBox controls, Because the parent of these controls is a grid, you can set the attached properties column, ColumnSpan, Row, and RowSpan.

The outcome arranging controls in a grid is shown in Figure 34-17, For easier”viewing of the columns and rows, the property ShowGridLines is set to true.

Figure 34-17

Figure 34-17

For a grid where every cell has the same size, you can use the Uniform Grid class.

Posted on November 3, 2015 in Windows Presentation Foundation

Share the Story

Back to Top