WPF Adaptive Form Implementation Summary

WPF self-adaptation should be form Implement Small Knot

These days, because of work needs, a small software to make UI adjustments. The main thing is to make it possible to implement adaptive forms, including text and icons, into the same UI as Media Center under WIN7. The adaptive form, as its name implies, is that the display size of the window content can vary with the size of the window. Today I'll talk about how to implement a self-adapting form with WPF.

First, WPF is Microsoft's next-generation Windows system to replace MFC. Using MFC to implement a self-adapting form, you need to capture resizing events, and then adjust the size of the window content, or it is more cumbersome. WPF is different, however, because the WPF-brought layout (WPF distribution System) supports adaptive forms.

WPF implements an adaptive form primarily by grid and DockPanel, which are 2 of these controls. These 2 controls are simply containers that are used to host other controls. The difference is that the grid is defined as a flexible grid area consisting of rows and columns, and DockPanel is a region that defines the horizontal or vertical arrangement of child elements.

Let me give you an example of how to implement an adaptive form with a grid or DockPanel.

Let's create a new WPF project, and when we're done we open the corresponding XAML file, and we can see that the VS has automatically added <Grid></Grid> this pair of tags, I'll take the Grid as an example to show how to implement the form adaptation (if you need to use DockPanel just change <Grid></Grid> to <DockPanel></DockPanel>).

<window x:class= "Auto_match_window.mainwindow"

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

xmlns:x= "Http://schemas.microsoft.com/winfx/2006/xaml"

Title= "MainWindow" height= "width=" 525 ">

<Grid>

</Grid>

</Window>

Add 2 controls TextBlock and buttons below the grid, as follows:

<window x:class= "Auto_match_window.mainwindow"

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

xmlns:x= "Http://schemas.microsoft.com/winfx/2006/xaml"

Title= "MainWindow" height= "width=" 525 ">

<Grid>

<textblock text= "Hello world!" margin= "100,100,100,100"/>

<button content= "button" margin= "100,120,100,100"/>

</Grid>

</Window>

Note: It is not possible to define height and width for TextBlock and buttons, as this will kill the height and width of the control, and the result is that it cannot change with the size of the window. How do you adjust the initial size of the control? With margain!! Margain not only adjusts the position, it can also adjust the size of the control Oh.

Let's see how it works:

With the above 2 graphs, we can see that the controls do change with the size of the window, but we also find that the text that is TextBlock or button does not change with the window. That's because grids and dockpanel don't support automatic text changes.

Is there no way to change the text automatically? Rest assured that WPF provides another control Viewbox to support text changes. Let's change the code just now, as follows:

<window x:class= "Auto_match_window.mainwindow"

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

xmlns:x= "Http://schemas.microsoft.com/winfx/2006/xaml"

Title= "MainWindow" height= "width=" 525 ">

<Grid>

<viewbox verticalalignment= "Top" >

<textblock text= "Hello world!" verticalalignment= "Top"/>

</Viewbox>

<viewbox verticalalignment= "Bottom" >

<button content= "button"/>

</Viewbox>

</Grid>

</Window>

The effect is as follows:

If you add a viewbox, the layout of the screen may be difficult to adjust, this time you need to use the width and height of the 2 properties. The reader may have questions, why not add Viewbox only with grid or DockPanel cannot specify width and height, and viewbox can. That's because Viewbox actually stretch this property to automatically change the text, which means that the viewbox is stretched or tiled to achieve the effect of scaling the text, like a bitmap. Grids and DockPanel are like vectors.

The code is as follows:

<window x:class= "Auto_match_window.mainwindow"

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

xmlns:x= "Http://schemas.microsoft.com/winfx/2006/xaml"

Title= "MainWindow" height= "width=" 525 ">

<Grid>

<Viewbox>

<textblock text= "Hello world!" margin= "100,100,100,100"/>

</Viewbox>

<Viewbox>

<button content= "button" margin= "100,120,100,100" height= "the" width= "118"/>

</Viewbox>

</Grid>

</Window>

Effect:

Well, let's sum it up:

1, WPF uses grid and DockPanel to implement the form adaptation, through the control's Margain property to adjust the control's starting position and size, cannot use the height and width property;

2, if you want to achieve automatic text changes, using the Viewbox control, you can use height and width to adjust the size of the control;

3, if you want to lazy words, you can put mainwindow the outermost layer of grid into the Viewbox, so you just slightly adjust the layout of some controls to achieve the entire form of adaptive effect.

WPF Adaptive Form Implementation Summary