StackPanel, WrapPanel, DockPanel in WPF

First, StackPanel

StackPanel is to display the controls in a stacked manner

1. You can change the stacking order using the Orientation property

orientation= "Vertical"

By default, each control is displayed from top to bottom. Control is StackPanel width, and height automatically adapts to the height of the content in the control, without a defined condition

1: <stackpanel orientation= "Vertical" >

2: <button>button a</button>

3: <button>button b</button>

4: <button>button c</button>

5: <button>button d</button>

6: <button>button e</button>

7: <button>button f</button>

8: </StackPanel>

orientation= "Horizontal"

The controls are displayed from left to right. Control is not defined, height is stackpanel height, Width automatically adapts to the width of the content in the control

1: <stackpanel orientation= "Horizontal" >

2: <button>button a</button>

3: <button>button b</button>

4: <button>button c</button>

5: <button>button d</button>

6: <button>button e</button>

7: <button>button f</button>

8: </StackPanel>

2. Set the control's properties, adjust the control's display

Margin Property
Defines the outer edge of the control, which can be set in several ways
1) margin= "10": each edge is 10
2) margin= "10,20,30,40": Set left, top, right and bottom edge respectively 10, 20, 30, 40
3) using split-mode settings, such as up and down to 10, about 20

1: <button content= "button A" >

2: <Button.Margin>

3: <thickness top= "ten" bottom= "left=" "right="

4: </Button.Margin>

5: </Button>

Width, Height property
Sets the width and height of the control, cancels the automatic width and height
HorizontalAlignment, VerticalAlignment Properties
Sets the horizontal or vertical alignment of the control, such as the overall orientation= "Vertical", setting the horizontal alignment to left, right, or center, where the width of the control is automatically adjusted without setting the width
MinWidth, MinHeight, MaxWidth, MaxHeight properties
The width of the control, the height-changeable maximum, and the minimum when resizing the form while changing the size of the control

WPF StackPanel

Figure 1.1

The StackPanel control in WPF is a simple and common layout control. It can be set according to the Orientation property that each child element in the panel depends on the next (landscape) or Bottom (portrait) of the previous control. is useful for creating lists of various types. All WPF controls that inherit from Itemscontrols, such as Combobox,listbox and the menu control, can use StackPanel as its internal layout panel.

<StackPanel>

<textblock margin= "Ten" fontsize= ">how do you like your coffee?</textblock>
<button margin= "Ten" >Black</Button>
<button margin= "Ten" >with milk</button>
<button margin= "Ten" >latte machiato</button>
<button margin= "Ten" >Chappuchino</Button>
</StackPanel>

The above code will put each control in the StackPanel panel, from top to bottom, as shown in 1.1.

Stack Items Horizontally

There is a good example of a dialog box with "OK" and "Cancel" buttons, because the text on the button may change in size because of the font change, we should avoid fixing the size of the button. StackPanel automatically adjusts the size of the internal controls based on the size of the panel. We don't have to worry about the buttons being too big or too small.

Second, WrapPanel

The control is displayed as a stream from left to right, top to bottom, and functions like FlowLayout in the Java AWT layout

Third, DockPanel

Above, below, left, right, and middle are the basic structure of the layout, similar to the Java AWT layout in the BorderLayout.

However, unlike BorderLayout, where multiple controls can be placed at the same time, multiple controls placed in the same area are laid out in a stackpanel manner.

Such as:

1: <dockpanel >

2: <button content= "Buttona" width= "dockpanel.dock=" "Top"/>

3: <button content= "buttonb" width= "All" horizontalalignment= "right" dockpanel.dock= "Top"/>

4: <button content= "Buttonc" margin= "ten" dockpanel.dock= "Top"/>

5: <button content= "Buttond" dockpanel.dock= "left"/>

6: <button content= "Buttone" dockpanel.dock= "right"/>

7: <button content= "buttonf" dockpanel.dock= "Bottom"/>

8: <button content= "Buttong"/>

9: </DockPanel>
  

StackPanel, WrapPanel, DockPanel (go) in WPF