WPF Tour (iii)-StackPanel of the layout

Speaking of the interface layout of WPF, I believe many friends have written HTML code. In WPF, most programs use a web-like (flow) flow layout. When using the flow layout model, various controls can be arranged according to specific requirements, and the interface can adjust itself and the layout of the control when the contents of the window change, such as the size of the window changes.

The layout principles of WPF are similar to HTML, but also somewhat different, let's take a look at the details below:

WPF Layout Principles

1. the dimensions of a set element, such as a control, should not be displayed: elements should be able to resize to fit their content, such as when adding more text, the button should be able to expand. Many times we set properties such as MinWidth or maxwidth in HTML to constrain the size range of the control, and the same applies to WPF.
2. You should not use screen coordinates to specify the location of elements: elements should be arranged by their containers according to their size, order, and other information specific to the specific layout container. The meaning of the above is also similar to the location of the elements in HTML, although many times we also use coordinates in the HTML to locate, but in fact, the use of such a very small situation.
3. The child elements of the layout container share available space: If space allows, the layout container sets the element to a more reasonable size, depending on the content of each element. They also allocate extra space to one or more child elements. This is similar to the width and height of the individual child elements set in the HTML, we can set the element size using a specific pixel (PX), or use a percentage (%) to set the space occupied by the element, and the child element may also have an automatic width and height adjustment in order to fill the parent element's space.
4. Nested layout containers: A typical user interface in WPF uses the grid panel as a starting-up, and the grid panel can contain other layout containers. This is also very much like nesting in HTML, we can include <span> in <Div>, and also can include <label> in <span>, and nesting in similar cases is common in WPF.

WPF Layout Process

The WPF layout consists of 2 stages: measurements (measure) and permutations (arrange). During the measurement phase, the layout container iterates through all the child elements and asks the child elements for their desired dimensions, placing the child elements in the appropriate position.

WPF layout Container

In HTML we have a variety of layout containers, such as <div>, <table>, and so on, so there are similar controls in WPF, and all WPF layout containers are derived from System.Window.Controls.Panel. Let's look at the hierarchy of the Panel class:

WPF provides a number of classes that can be used to arrange layouts that inherit from the panel, where we list some of the most basic classes. Like all WPF spaces and most visual elements, these classes are located in the System.Windows.Controls namespace.

Name	Description
StackPanel	Placing elements in a horizontal or vertical stack
WrapPanel	Placing elements in a series of lines that can be wrapped
DockPanel	Adjusts elements based on the entire bounds of the container
Grid	Arranges elements in rows and columns based on invisible tables, one of the most commonly used containers
UniformGrid	Place elements in a table that is not visible but forces all cells to have the same size
Cavas	Absolute positioning of elements using fixed coordinates

StackPanel the Use

Here are some descriptions of the concepts and classes of layout containers, so let's take a look at these common layout containers in turn.

First, let's look at the Stackpanel,stackpanel panel is one of the simplest panels in WPF, which simply places its child elements in a single row or column as a stack, by default the panel arranges the elements in top-down order, and the height of each element fits its contents. Let's look at a test code below:

<Windowx:class= "Stackpaneltest.mainwindow"xmlns= "Http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x= "Http://schemas.microsoft.com/winfx/2006/xaml"Title= "MainWindow"Height= " the"Width= "525">    <StackPanel>        <Label>A button click</Label>        <Button>Button 1</Button>        <Button>Button 2</Button>        <Button>Button 3</Button>        <Button>Button 4</Button>    </StackPanel></Window>

The result of its operation is that all buttons are arranged from top to bottom, the size of the button is just enough to fit within their inner text, and all the elements are stretched to the entire width of the StackPanel panel.

Similar to some of the HTML controls, such as RadioButtonList, we can also control the arrangement of elements, and in StackPanel, we use the Orientation property to control the direction of the child elements:

<Orientation= "Horizontal">

Layout properties

Stackpanle layout properties are similar to HTML layout containers, you can set the alignment, margin, maximum minimum width, height, and so on.

1. Alignment

First we look at the way in which the Verticalaligment property does not work in StackPanel if it is vertically aligned, because the height of all elements is automatically adjusted to exactly meet their needs. But the Horizentalaligment attribute is very important, and it determines where each element is in the row. The horizentalaligment has 4 values to choose from: Left, Center, right, and Stretch, who believe that the first 3 values are easy to understand with the familiar HTML code. The last value stretch stretches the child element to the width of the entire StackPanel panel and is set to the default value, so let's take a look at the specific code:

<StackPanelOrientation= "Vertical">        <LabelHorizontalAlignment= "Center">A button click</Label>        <ButtonHorizontalAlignment= "Left">Button 1</Button>        <ButtonHorizontalAlignment= "Right">Button 2</Button>        <Button>Button 3</Button>        <Button>Button 4</Button></StackPanel>

When you set the way to it, the button's length and position are changed, such as:

We see that Button1 and Button2 have changed their position and the width of the buttons after they have been set, and these are actually similar to the way elements in HTML are, It is important to note that the width of the stretch alignment is the width of the extruded child element for the entire StackPanel.

2. Margin

In our usual layout, the adjacent elements are generally not too close, so in HTML, we will generally add a CSS style such as margin to control the margin of the element. In WPF, there are similar cases where we can set the margin property to adjust the margin of an element, as shown in the code example:

<Margin= "5,10,5,4">button 4</button> 

The above 4 values are separated by commas, which are the same as the settings in CSS, respectively, top, right, bottom, and left. To set the child element of margin, the distance between adjacent 2 child elements is the sum of their respective margin, the code is as follows:

<StackPanelOrientation= "Vertical">        <LabelHorizontalAlignment= "Center">A button click</Label>        <ButtonHorizontalAlignment= "Left">Button 1</Button>        <ButtonHorizontalAlignment= "Right">Button 2</Button>        <ButtonMargin= "+">Button 3</Button>        <ButtonMargin= "Max">Button 4</Button></StackPanel>

Running results such as:

We can set the margin in XAML, or we can declare it in C # code, where we use the thickness structure to set the margin:

New Thickness (5,3,2,1);

3. maximum size, minimum size

Each element provides a width and height property, which is used to display the size of the specified element, but sometimes the size of the child element exceeds the size of the parent container, and we should limit the child elements to the correct range, which we can set with MaxWidth and MaxWidth. Let's take a look at the sample code:

<MaxWidth= "  maxheight =" " Margin=" 40 "  >button 4</button>

Running results such as:

From what we can see, the default alignment for the Button4 is stretch,button4 width is stretched to the width of the entire stackpanel, because we set the MaxWidth, and finally Button4 the actual width is set to 200, This is what we want to adjust to the right width.

For the first layout control we talked about today (StackPanel), we'll comb the rest of the layout controls for you.

I recently started learning WPF and devexpress to improve my C/s architecture programming capabilities. In the learning process will have some experience, so will write some blog to record these ideas, interested friends can communicate with me to learn. So let's start the journey from here to WPF and DevExpress!

QQ Group: 32745894, welcome everyone to join the discussion!

WPF Tour (iii)-StackPanel of the layout