[WPF] using a custom panel to better control the behavior of resize -- 2

Consider the following interface layout.

There are few things in this small window. You can set the window to 500*300. However, if the form is a part of a large form. The situation is complicated.

We cannot fix the window size. Because windows may need to run at different resolutions, such as 1920*1200 to 1024*768. In this way, the size of the form may vary greatly in different situations.

A better solution is that when the window is smaller and the first row cannot fit all controls. Switch to the second line. When the window becomes larger and there is extra space in the first line, place the content in the second line on the first line so that no blank space is left on the right side of the interface.

Someone will yell that this is not what wrappanel is doing? There is no error, but each line of wrappanel is left aligned and there will be a large white block on the right, which is unacceptable in the software that wants to design a good user experience.

That is to say, the wrappanel of WPF does not handle the following situations.

The first row has extra space, but it is not enough to put any controls in the second row.

At this time,The existing controls in the first row should make full use of all the available space in the first row to fill up the first row.This cannot be done with wrappanel. Wrappanel is mainly used when the size of an item is basically the same. If the sizes are different, wrappanel may cause poor user experience. It is better to scale proportionally with grid.

Unfortunately, now we have to write a wrappanel. As shown in.

Figure 1. fillwrappanel demo

All buttons in this panel have 20 minwidth and 55 maxwidth. And specially set maxwidth of 30 for button 3 and 100 for button 6. Let's take a look at the behavior of this panel during resize.

Figure 2. A new line is required (the principle is to make all controls as big as possible, but the right side cannot be left blank)

Figure 3. scale down to button 6

Figure 4. scale down to button 4

Figure 5. Minimum

What if the wrappanel of WPF is used? The result is simple.

Figure 6. wrappanel of WPF (the item size is fixed and will not change, and the right side will be white)

The wrappanel of the system is suitable for browsing files, folders, or thumbnails of Graph Software in explorer. The fillwrappanel introduced in this article is more suitable for implementing forms similar to forms. Because the size of the content is likely to be different.