The inner world of WPF (control and layout)



1、 Control and layout


Why write WPF?

At the beginning, I was more resistant to WPF, because there were fewer people using it. It’s all about the difference between windows application and WinForm. But I was wrong. Thank my lecturer very much for recommending Liu tiemeng’s WPF in simple terms, which made me understand the charm of WPF – data driven UI.

So, for such an excellent framework, I want to write it down. We all know that there are so few WPF developers that most of the tutorial videos are from 10 years ago. I wrote it down. It’s not for any reason. I really like WPF. It’s a “weird” feeling.

1、 UI layout

As the saying goes: “people depend on clothes and horses depend on saddles”

What do you mean? It means that if a man puts on a proper suit, he will be particularly energetic; if a horse is equipped with a pair of fastidious saddles, he will be particularly handsome. Clothing has a great influence on the beauty of human body image. From Xue Rengui Zhenger

So, let’s introduce this sentence into WPF

  • As a special user interface technology, layout function is one of the core functions of WPF. Friendly user interface and good user experience are inseparable from well-designed layout.
  • The two parts of WPF designers’ workload are layout and animation. The layout is static and the animation is dynamic. User experience is the feeling of users when they interact with software functions in the dynamic.
  • In other words, the layout is WPF clothes!

2、 Control

“My old life is dependent on water, his old style is prosperous, and he has no idea.”

It means that wild animals and wild environment depend on each other and cannot be separated

What about WPF? A page layout, display. They are all made up of controls. Controls are inseparable from the WPF environment, which forms a beautiful and vivid picture (layout).

Before learning these layout elements, we should know that each layout element has its own characteristics, and we should use them flexibly. Don’t use it for everything. Match it reasonably.

(just like the ecological environment, it should be reasonably matched, otherwise there will be the behavior of “stealing chicken but not eating rice” such as “biological invasion”, which will increase the burden of the ecological environment. Destruction)

1. Control classification

Roughly speaking, there are no more than six types of controls that we deal with most in our daily work, namely:

  • 1. Layout control: it can hold multiple controls or nest other layout controls, and is used to organize and arrange controls on UI, such as StackPanel, grid, dock, wrappanel, canvas;
  • 2. Content control: it can only hold one other control or layout control as its content, such as button and window;
  • 3. Content control with Title: equivalent to a content control, but can add a title, such as: group box, tabitem;
  • 4. Item control: a column of data can be displayed. Generally, the type of this column of data is the same. Such as listbox, combobox;
  • 5. Item control with Title: it is equivalent to adding a title display area to an item control, such as TreeViewItem and MenuItem, which are often used to display hierarchical data;
  • 6. Special content controls: for example, textbox holds strings, TextBlock holds text whose format can be controlled freely, image holds image type data This kind of control is relatively independent.

As for why we classify them in this way, in fact, we only need to understand them in detail. I can’t. you drag it out of the toolbar and look at it. You’re looking at me. “What? You don’t understand yet Author’s death

OK, we won’t introduce these controls in too much detail. We mainly introduce the layout controls. For other properties, please refer to the following:
Introduction to the use of WPF basic controls:

3、 Layout control

Well, finally, we come to the point. WPF provides us with five layouts. They have different characteristics and can be nested. Let’s get to know them.

  • 1. Grid: List Layout
  • 2. StackPanel: stack panel layout
  • 3. Wrappanel: flow layout panel (when the elements are horizontally aligned and the content exceeds the width, it will wrap automatically; when the elements are vertically aligned and the content exceeds the height, it will wrap automatically)
  • 4. Dock panel: dock panel
  • 5. Canvas: coordinate panel

1. Grid list layout

The word grid is translated as “grid; grid, grid.”
Yes, it’s like a grid that splits our pages one by one.

We put two textblocks and two textboxes in the form to realize the style of login window, but they are all overlapped.

Why are they all overlapping?

Because we have not made relevant adjustments to the grid container, it is now a row by column “big grid”. Of course, it overlaps in one area, unless we set the magic property. Of course, what we want to achieve is not this effect.

So, by setting

  • column
  • that ‘s ok

Split grid

We can divide our “grid into several grids” by adding columndefinitions node and rowdefinitions node.

As shown in the figure, it is divided into four grids

By looking at the design window, we can also find that the grid is divided into four parts by lines:

Well? No, why do our controls overlap? It’s because we didn’t set which grid they are in. Then download it and let’s set it.

Locate and merge cells

When our container is in the grid layout container, additional attributes will be added:

  • Line location: Grid.Row= “0”
  • Column location: Grid.Column= “0”

It is not set by default, and the value is 0, so there will be overlap. Let’s adjust the position.

Well, everything is back to normal, adding a button, how can login without a button!

By setting

  • Row cell merge: Grid.RowSpan= “1”
  • Column cell merge: Grid.ColumnSpan= “1”

The default value is bit 1. If you merge a few, write a few.
After a little modification, our interface becomes like this:

Well It’s a bit ugly. Let’s add some attributes to adjust it,

Set width and height

We set the width of the columndefinition and the height of the rowdefinition to set the height

Width and height support pixel, scale, and adaptive

  • Pixel: direct digital representation
  • Proportion: in * units
  • Adaptive: set value bit Auto

OK, let’s use the above knowledge to adjust our view:


OK, let’s summarize the width and height above:

  • First of all, we set the scale of the grid columns to 1:3 (*, 3 *). When we pull the size of the form, we will find that their sizes change in equal proportion.
  • Secondly, we set two fixed heights for the grid rows, and we can find that no matter how the form changes, their heights are unchanged.
  • The last line is adaptive. I deliberately set the height of the button to 100. We can see that the last line of the table is also 100. We can know that auto adapts to the content.

2. StackPanel stack panel

Everyone is familiar with the word “stack”. The stack panel is like a container in the “queue”. Let’s transpose the grid under the window to the StackPanel to experience it.

Set direction

We put a lot of buttons in the StackPanel and found that they are like queues, one by one, horizontally. If you don’t like this, of course you can change the direction!

By setting orientation

  • Horizontal alignment: orientation = “horizontal”
  • Vertical alignment: orientation = “vertical” (default)

For the inner elements themselves, you can also choose how to align them

  • HorizontalAlignment=”left” Center,right
  • VerticalAlignment=”Top” Bottom,Center,Stretch

3. Wrappanel flow layout

When the elements are horizontally aligned and the content exceeds the width, the line breaks automatically; when the elements are vertically aligned and the content exceeds the height, the column breaks automatically.)

It may look like the one above, but it’s actually different. When the number of internal child elements of the StackPanel exceeds the width (height), the form will overflow, and the flow layout will wrap automatically. It is often used in dynamic data generation.

I won’t go into details. The properties are the same as above.

4. Dock layout

Friends who have done winfrom development know a docl attribute, so our dock layout is the same. Let’s practice it.

The control in the container of dockchannel will add an additional property DockPanel.Dock

  • DockPanel.Dock=”Top”
  • DockPanel.Dock=”Bottom”
  • DockPanel.Dock=”Left”
  • DockPanel.Dock=”Right”

Stop up, down, left and right respectivelyControls will have different width and height (or size) according to the order of setting. By default, the size of the last docked control accounts for all the remaining interfaces

If you take a closer look at the left and right, you will see that the newly docked controls occupy all areas of the remaining page.

5. Canvas coordinate layout

OK, this is really equivalent to the layout of WinForm. Set the coordinates and determine the position of the control.

The control in the canvas container will add additional properties

  • Above the window: Canvas.Top= “20”
  • To the left of the window: Canvas.Left= “100”
  • Below the window: Canvas.Bottom= “20”
  • To the right of the window: Canvas.Right= “0”

4、 Comprehensive small cases

If we’ve finished, let’s make a small case.

New StackPanel
            Save StackPanel
            Add StackPanel
            Import StackPanel
            Export StackPanel
            Close the StackPanel
            I'm dockel
                I can't get rid of wrappanel
            Canvas account number:
            Canvas, please enter account number:
            Canvas password:
            Canvas please enter password:

Don’t use unfairness to cover up the appearance that you don’t work hard