WinForm window with WPF to build adaptive window size layout

When you write a WinForm program, you will encounter a problem. Is the size of the WinForm window at different resolutions. For example, the WinForm window you write is appropriate and symmetrical in 1024x768. However, if the user's computer's resolution is 1400x900, your WinForm window appears to be small, and the fonts and controls are small. If the user's resolution is 640x480, your window will be much larger than the size of its screen.

How to solve this problem. Normal WinForm programs do this: program startup--"Get screen resolution--" resize the form--adjust the size and position of each control--adjusts the font of individual controls. This is a cumbersome operation and takes into account the various resolution situations. So, if there are several controls on the WinForm window, tweaking is a painful thing.

There was no such a means. I just adjust the size of the WinForm window, where the size of each control (including the font) is scaled automatically and proportionally.

Remember some of DirectX's game programs? When set to a fixed resolution (such as 800x600), in full screen, he will automatically scale. WinForm have such a means?

The answer is yes. This functionality is simple to implement in WPF.

Take advantage of the Viewbox container space in WPF. A viewbox is a container space that automatically scales the child space in the container to fill itself, and it can have only one child control. However, we can use the canvas control as a child control of the Viewbox control. The other controls are then laid out in the canvas control.

First look at the XAML file for the following window

<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= "height=" >
<dockpanel name= "DockPanel1" lastchildfill= "True" >
<menu height= name= "Menu1" dockpanel.dock= "Top" >
<menuitem header= "Menu1" >
<menuitem header= "H1"/>
<menuitem header= "H2"/>
</MenuItem>
<menuitem header= "MENU2" >
<menuitem header= "L1"/>
<menuitem header= "L2"/>
<separator/>
<menuitem header= "L4"/>
</MenuItem>
</Menu>
<statusbar height= "Name=" "StatusBar1" dockpanel.dock= "Bottom" >
<statusbaritem content= "S1" name= "S1"/>
<statusbaritem content= "S2" name= "S2"/>
<statusbaritem content= "S3" name= "S3"/>
</StatusBar>
<viewbox name= "Viewbox1" stretch= "Fill" >
<canvas height= "name=" Canvas1 "width=" background= "#FF8EDE75" >
<button canvas.left= "canvas.top=" content= "button" height= "Notoginseng" name= "Button1" width= "the"/>
</Canvas>
</Viewbox>
</DockPanel>
</Window>

Let's briefly explain this XAML file

The outermost is the window container, which sets the title (wpftest) and size (400x300), and it can only have one child control.

Window's child controls are DockPanel containers and are automatically docked container controls. Set lastchildfill= "True" to indicate that the last child control automatically fills the remaining space. The size is not set, and the default size is the client area size of window.

The DockPanel control has three child controls

Menu control: Menus control, automatically docked at the top of the container

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

Viewbox control: A container control that automatically populates DockPanel remaining controls. No size is set, the size of the fill. Sets the fill pattern to fill, which indicates the size of the container that the child control fills itself

A canvas control is placed in the Viewbox, setting the size (note: Be sure to set the size, otherwise the default will produce a variety of magical effects), set the background color

A button control was placed in the canvas. Just an example, other controls can also be placed in canvas

Enter the following code in the window's code

Public Class Window1

Private _i as Integer
Private Sub window1_sizechanged (ByVal sender as Object, ByVal e as System.Windows.SizeChangedEventArgs) Handles Me.sizech Anged
_i + 1
Me.S1.Content = "window width:" & me.width
Me.S2.Content = "Content width:" & Me.Viewbox1.Width
Me.S3.Content = "button width: & Me.Button1.Width &; Refresh times:" & _i

End Sub

End Class

　　

After startup is the following effect

　　

You can see that the width of the window is 400, because Viewbox does not set the width, so the display is not a number, the width of the button is 87

Drag the lower-right corner to resize the window. As shown in the following figure

　　　

The size of the window changes as compared to the above illustration. The child controls in the Viewbox are also automatically stretched. This can be clearly felt from the look of the button. What's even more magical is that no matter how I resize the window, the button's appearance changes with the window's size, but in the internal logic, the button's width is always 87, and never changes.

Another, because menu and StatusBar are not in Viewbox. So the two controls are not scaled or the original size

This has brought us great convenience. The logical size of the child controls canvas in Viewbox is always 300x200, regardless of how the window is adjusted to the internal logic. We do not need to design additional code for the adjusted size.

In fact, I guess. The Viewbox display mechanism is to display the control in memory in the logical size of the handle first, and then zoom out to the Viewbox client area.

Back to the beginning of the topic. How the WinForm window is written to respond to different resolutions.

In WPF, all the customer controls are placed in canvas and placed in the Viewbox control, and the Viewbox feature is used to achieve automatic scaling. The process becomes: Program startup-"Get screen resolution"-Adjusts the size of the form. The remaining controls are scaled to the Viewbox control. And since the size of the logic hasn't changed, you don't need to add any additional code.

The introduction of the online Viewbox control is relatively small, with viewbox to achieve the size of the adaptive form is indeed a inventive.

In fact, he said so much, in fact, is to add a few lines of code just.

Do not generate a <Grid> </Grid> tag when building a WPF project. Just under this tab (next to the Grid tab, not inside the sub tag), add these lines:

<viewbox name= "Viewbox1" stretch= "Fill" >
<canvas height= "Name=" "CANVAS1" width= "525" >

</Viewbox>

</Canvas>

The width and height of the canvas should be set to the width and height of the start window label, so that after that, just continue to write the layout we want in the canvas tag, and then the control will scale automatically.