[WPF] Create a WinForm window with adaptive window size layout, wpfwinform

[WPF] Create a WinForm window with adaptive window size layout, wpfwinform

When writing a WinForm program, you will encounter a problem. It is the size of the WinForm window at different resolutions. For example, the WinForm window you wrote is suitable and balanced in 1024 × 768. However, if the user's computer resolution is 1400 × 900, your WinForm window will appear too small and the fonts and controls will appear too small. If the user's resolution is 640 × 480, your window will be much larger than its screen size.

How can this problem be solved? Generally, WinForm programs perform the following operations: Program startup -- get screen resolution -- adjust the size of the Form -- adjust the size and position of each control -- and adjust the font of each control. This operation is cumbersome and requires consideration of various resolutions. In this way, if the WinForm window has several controls, it is very painful to adjust them.

Is there any such means. I only need to adjust the size of the WinForm window. Is the size of each control (including the font) automatically scaled proportionally?

Do you still remember some DirectX game programs? When it is set to a fixed resolution (such as 800 × 600), it will automatically zoom in and out in full screen mode. Does WinForm have such a method?

The answer is yes. This function can be easily implemented in WPF.

Use the ViewBox container space in WPF. ViewBox is a container space. It automatically scales the sub-spaces in the container to fill itself, and has only one sub-control. However, we can use the Canvas control as a child control of the ViewBox control. Then, layout other controls in the Canvas control.

First, let's take a look at the following window's Xaml file.

<Window x: Class = "Window1"

Xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"

Xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml"

Title = "WPFTest"

Mc: Ignorable = "d"

Xmlns: d = "http://schemas.microsoft.com/expression/blend/2008"

Xmlns: mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"

SizeToContent = "Manual" Width = "400" Height = "300">
First, briefly describe this XAML File

The outermost part of the Window container is the title (WPFTest) and size (400 × 300). It can only have one child control.

The sub-Control of Window is the DockPanel container and the Container Control is automatically docked. Set LastChildFill = "True" to indicate that the last child control automatically fills the remaining space. No size is set. The default size is the size of the customer area of the Window.

The DockPanel control has three child controls.

Menu Control: A Menu control that automatically stops at the top of the container.

StatusBar control: Status Bar control, automatically docked at the bottom of the container

ViewBox control: container control that automatically fills in the remaining controls of DockPanel. No size is set, which is the filling size. Set the filling mode to Fill, indicating the size of the sub-control to Fill its own container

Place a Canvas control in ViewBox and set the size (Note: Make sure to set the size; otherwise, various effects will be generated by default). Set the background color.

A Button control is placed in the Canvas. For example, other controls can be placed in the Canvas.

 

Enter the following code in the Window code:

Public Class Window1

Private _ I As Integer
End Sub

End Class

　　

The following results are displayed after startup:

It can be seen that the window width is 400. Because the ViewBox does not set the width, non-numbers are displayed, and the button width is 87.

Drag the lower right corner to adjust the Window size. As shown in

And, the size of the Window has changed. The child control in ViewBox is automatically stretched. The appearance of the Button is obvious. What's more amazing is that no matter how I adjust the size of the Window, the appearance of the Button changes with the size of the Window. However, in the internal logic, the width of the Button is always 87, it never changes.

In addition, the Menu and StatusBar are not in the ViewBox. Therefore, the two controls are not scaled or the original size.

This brings us great convenience. No matter how the window is adjusted, the logical size of the Canvas sub-control in ViewBox is always 300 × 200 in the internal logic. We do not need to design additional code for the adjusted size.

Actually, I guess. The display mechanism of ViewBox is to display the sub-control according to the logical size in the memory, and then display the sub-control in proportional scaling to the customer area of ViewBox.

 

Return to the starting topic. How does the compiled WinForm window handle different resolutions?

In WPF, all customer controls are placed in the Canvas and then in the ViewBox control. The ViewBox feature is used to achieve automatic scaling. The process becomes: Program startup -- get screen resolution -- adjust the size of the form. The scaling of other controls is handed over to the ViewBox control. Because the logic size does not change, you do not need to add additional code.

 

The ViewBox controls on the Internet are rarely introduced. It is an exclusive way to use ViewBox to realize the size of adaptive forms.

 

 

 

In fact, he said so much, but it is actually just adding a few lines of code.

Didn't a <Grid> </Grid> label be generated when a WPF project is created? You only need to add these lines of code under the label (next to the Grid label, but not in the sub-label:

<Grid>

<Viewbox Name = "Viewbox1" Stretch = "Fill">

<Canvas Height = "350" Name = "Canvas1" Width = "525">

<Button Name = "btn1"/>

<TextBox Name = "txt"/>

</Canvas>

</Viewbox>

</Grid>

 

 

 

The width and height of the Canvas should be set to the same as the width and height of the original window label. After that, you only need to write the layout we want in the Canvas label, the control automatically scales