WPF layouts allow your controls to zoom in and out of the window to fit a multi-resolution full-screen fill application

All along, we have designed the Windows application, the size of the control is fixed, regardless of the size of the form changes, will not change, such a design for the general application is not a problem, but for some of the more special applications, such as a background picture, need to be paved the entire screen, Because there are many different resolutions, there is a situation where the layout is confusing. Today we'll look at how WPF allows our controls to zoom in and out with resolution. Let's write an example to see the effect.

I. Problems in the general layout

Here we write a simple page, create a new WPF project, and add a button to the MainWindow, such as:

This page is very simple, only three buttons, we think of the upper left and bottom right corner there are two buttons, there is a big button in the middle, now display is no problem, then we change the button size to simulate the resolution change, to see what will become,

The position of the button has changed, of course, here you will say, we can modify the layout to let the button still appear in the specified location, but when the user screen resolution is too small? Causes some controls to not appear. Such as:

Ii. Solutions to the problem

For the above question, let's look at how to layout to solve the above problem, below we modify the layout code as follows, using the canvas layout:

<Windowx:class= "layout chapter." 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">     <Viewbox  Stretch= "Fill">         <CanvasWidth= "520"Height= " the">            <ButtonContent= "button"Canvas.Left= "Ten"Canvas.Top= "Ten"HorizontalAlignment= "Left"VerticalAlignment= "Top"Width= " the"/>            <ButtonContent= "button"Canvas.Left= "435"Canvas.Top= "288"HorizontalAlignment= "Left"VerticalAlignment= "Top"Width= " the"/>            <ButtonContent= "button"Canvas.Left= "164"Canvas.Top= "The "HorizontalAlignment= "Left"VerticalAlignment= "Top"Width= "182"Height= "119"/>        </Canvas>     </Viewbox> </Window>

The main part is that we added viewbox in the outermost layer of the canvas, because Viewbox's stretch property is uniform by default, so we'll set it to fill so that it fills the form,the canvas width and height must be set, Otherwise it won't show. The display results are as follows:

Show effect when zoomed out

Zoom in the display effect, although the space is somewhat distorted, but the layout is not chaotic. In general, the scale of the display is standard, the deformation will not be so serious.

Well, this blog post is very simple, but I believe it is helpful for some friends!

Cloud drizzling

QQ Exchange Group: 243633526

Blog Address: http://www.cnblogs.com/yunfeifei/

Disclaimer: The original text of this blog only represents my work in a certain time to summarize the views or conclusions, and my unit does not have a direct interest in the relationship. Non-commercial, unauthorized, post please keep the status quo, reprint must retain this paragraph statement, and in the article page obvious location to the original connection.

If you feel that my blog is helpful to everyone, please recommend supporting one, give me the motivation to write.

WPF layouts allow your controls to zoom in and out of the window to fit a multi-resolution full-screen fill application