WPF Layout Summary

I. WPF layout principles

A WPF window can contain only a single element, and for placing multiple elements in a WPF window, you need to place a container so that additional elements are added to the container. The "ideal" WPF window follows several principles:

1. The size of the set element should not be displayed. elements should be able to change the size appropriate for their content, such as when adding more text content, the button expands appropriately. Set the maximum, minimum size, control the size range.

2. The position of the element should not be determined using the determined coordinates. The elements should be arranged in a certain order by the container according to their size. The margin property adds an empty space.

3. The child elements of the layout container share free space. the layout container sets a reasonable size for the element as much as possible for the contents of each element .

4. The layout container can be nested. such as the grid panel, you can nest multiple elements, such as text boxes, buttons.

Core Layout Panel

Name	Description
StackPanel	Place elements in a horizontal or vertical stack.
WrapPanel	Places an element in a series of lines that can be wrapped.
DockPanel	Adjusts elements based on the bounds of the entire container.
Grid	Multi-row and multi-column emission elements for the widest range of applications
Canvas	Locating elements using fixed coordinates is not a suitable choice for variable size windows.

Two. Introduction of the core panel

1.StackPanel Panel

1  <StackPanel>2         <LabelHorizontalAlignment= "Center">A Button Stack</Label>//Alignment3         <ButtonHorizontalAlignment= "Left">Button1</Button>4         <ButtonHorizontalAlignment= "Right">Button2</Button>5         <ButtonMargin= "5">Button3</Button>//margin is 56         <ButtonMargin= "10,5,10,5">Button4</Button>//Set the margins separately7  </StackPanel>

2.Border controls

Border is not a layout panel but can be used in conjunction with the Control Panel.

1     <BorderBackground= "Yellow"Margin= "5"Padding= "5"BorderBrush= "Steelblue"Cornerradius= "5"VerticalAlignment= "Top">2         <StackPanelMargin= "3">3         <LabelHorizontalAlignment= "Center">A Button Stack</Label>4         <ButtonMargin= "3"MaxWidth= "$"MinWidth= "+">Button1</Button>//Set maximum width min width5         <ButtonMargin= "3"MaxWidth= "$"MinWidth= "+">Button2</Button>6         <ButtonMargin= "3"MaxWidth= "$"MinWidth= "+">Button3</Button>7         </StackPanel>   8     </Border>

3.WrapPanel and DockPanel Panels

1     <WrapPanelMargin= "3">2         <ButtonVerticalAlignment= "Top">Top button1</Button>3         <ButtonMinHeight= "$">Tall Button2</Button>4         <ButtonVerticalAlignment= "Bottom">Bottom Button3</Button>5         <ButtonVerticalAlignment= "Center">Center Button4</Button>6     </WrapPanel>   

Note: WrapPanel is the only panel that cannot be replaced by flexible use of the grid panel

4.DockPanel Panel

DockPanel panel pulls along an outer edge of the contained controls

WPF Layout Summary