WPF layout controls are scaled up and down with the window, which is suitable for multi-resolution full screen filling applications

summary

all the time , We design windows Applications , It's all about sizing the controls , Whatever the size of the form , Will not change , This kind of design is no problem for the general application , But for some special applications , For example, there are background pictures , The whole screen needs to be paved , Because there are many different resolutions , So there will be confusion in the layout . Today we'll look at it WPF How to make our controls zoom in and out with the resolution . Let's write an example to see the effect ~

Problems in general layout

Here we write a simple page , newly build WPF project , stay MainWindow Add buttons inside , Here's the picture ：

This page is very simple , There are only three buttons , What we think is that there are two buttons in the upper left corner and the lower right corner , There is a big button in the middle , Now there is no problem with the display , Then we can simulate the resolution change by changing the size of the button , Let's see what it will look like , Pictured ：

The positions of the buttons have changed , Of course, here you will say , We can modify the layout so that the button is still displayed in the specified position , But when the user's screen resolution is too small ？ Some controls will not be displayed . Here's the picture ：

The solution to the problem

Answer the above question , Let's see how to layout , To solve the above problems , Next, we modify the layout code as follows , Use canvas Layout ：

<Window x:Class="WpfApplication5.MainWindow"        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        Title="MainWindow" Height="350" Width="525">    <Grid>        <Viewbox Stretch=" fill">             <Canvas Width=" 525" Height=" 350">                <Button Content=" Key 1" HorizontalAlignment="Left" Margin="28,23,0,0" VerticalAlignment="Top" Width="75"/>                <Button Content=" Key 2" HorizontalAlignment="Left" Margin="416,275,0,0" VerticalAlignment="Top" Width="75"/>                       </Canvas>                   </Viewbox>    </Grid></Window>

The main part is that we are Canvas The outermost layer is added ViewBox, because ViewBox Of stretch Property default is Uniform, So we need to set it to Fill, This will ensure that the form is filled ,canvas The width and height of must be set , Otherwise it won't show . The display effect of shrinking ：

The display effect when zooming in , Although the space is a little deformed , But the layout is not messy . Generally, the ratio of the display is standard , The deformation will not be so serious .

Viewbox Control description

ViewBox The function of a component is to stretch or extend the component in it , Make it have better layout and visual effect . This article will introduce the basic features and application examples of this component .

Component common properties ：

Child： Get or set a ViewBox A single child of an element .

Stretch： Get or set the stretching mode to determine how the content in the component fills the existing space of the component .

StretchDirection： Get or set the stretching direction of the component to determine the form in which the content in the component will be extended .

Viewbox Changeable Stretch Attribute to select how the child elements are placed Viewbox Free space for ,Stretch The enumeration of is as follows ：

　　Fill： Resize the content to fill the target size , The aspect ratio is not preserved ;

　　None： The content keeps its original size ;

　　Uniform： Adjust the size of the content while retaining the original aspect ratio of the content , To fit the target size .Viewbox Medium Stretch Property value defaults to Uniform;

　　UniformToFill： Adjust the size of the content while retaining the original aspect ratio of the content , To fill the target size . If the aspect ratio of the target rectangle is different from that of the source rectangle , Then the source content is trimmed to fit the target size ;　

Canvas Control description

1.Canvas For container control , Used to locate

You can put Canvas Compare it to a coordinate system , All elements determine their position in the coordinate system by setting coordinates . The origin of this coordinate system is not in the center , But in its upper left corner . See the picture below

There are four ways to set the coordinates of elements :

        Canvas.Top      Set element spacing Canvas Distance from the top

        Canvas.Bottom  Set element spacing Canvas Distance from the bottom

        Canvas.Left      Set element spacing Canvas The distance from the left border

        Canvas.Right    Set element spacing Canvas The distance of the right boundary ​​​​​​​

<Border HorizontalAlignment="Left" VerticalAlignment="Top" BorderBrush="Black" BorderThickness="2">      <Canvas Background="LightBlue" Width="400" Height="400">        <Button Canvas.Top="50">Canvas.Top="50"</Button>        <Button Canvas.Bottom="50">Canvas.Bottom="50"</Button>        <Button Canvas.Left="50">Canvas.Left="50"</Button>        <Button Canvas.Right="50">Canvas.Right="50"</Button>      </Canvas>    </Border>

2. When set at the same time left and right,top and bottom, With left and top Subject to ​​​​​​​

<Canvas>      <Button Canvas.Left="20" Canvas.Top="20" Width="50" Height="20">button</Button>    </Canvas>

3. Overlap depth setting ​​​​​​​

<Canvas>      <Rectangle Canvas.ZIndex="3" Width="100" Height="100" Canvas.Top="100" Canvas.Left="100" Fill="blue"/>      <Rectangle Canvas.ZIndex="1" Width="100" Height="100" Canvas.Top="150" Canvas.Left="150" Fill="yellow"/>      <Rectangle Canvas.ZIndex="2" Width="100" Height="100" Canvas.Top="200" Canvas.Left="200" Fill="green"/>        <!-- Reverse the order to illustrate z-index property -->        <Rectangle Canvas.ZIndex="1" Width="100" Height="100" Canvas.Top="300" Canvas.Left="200" Fill="green"/>      <Rectangle Canvas.ZIndex="3" Width="100" Height="100" Canvas.Top="350" Canvas.Left="150" Fill="yellow"/>      <Rectangle Canvas.ZIndex="2" Width="100" Height="100" Canvas.Top="400" Canvas.Left="100" Fill="blue"/>    </Canvas>