WPF之路四：窗体自适应

下面我来举个例子说明如何用Grid或DockPanel来实现自适应窗体。

让我们新建一个WPF工程，完成后我们打开对应的XAML文件，可以看到VS已经自动添加了<Grid></Grid>这一对标签，下面我就以Grid为例展示如何实现窗体自适应（如果需要使用DockPanel只需把<Grid></Grid>换成<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="350" Width="525">

<Grid>

</Grid>

</Window>

下面往Grid里面添加2个控件TextBlock和Button，如下：

<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="350" Width="525">

<Grid>

<TextBlock Text="Hello World!" Margin="100,100,100,100"/>

<Button Content="Button" Margin="100,120,100,100"/>

</Grid>

</Window>

注意：这里不能给TextBlock和Button定义高度和宽度，因为这样会把控件的高度和宽度定死，结果就是不能随着窗口大小的变化而变化。那要怎么调整控件的初始大小呢？用Margain！！Margain不是只能调整位置，它也可以调整控件大小哦。

让我们来看看效果怎样：

通过上面2张图，我们可以看到控件确实随着窗口大小的变化而变化，但是我们又发现无论是TextBlock还是Button的文字并没有随着窗口变化，这是为什么呢？那是因为Grid和DockPanel不支持文本的自动变化。

那文本是不是就没办法自动变化了呢？放心WPF提供另外一个控件Viewbox，用于支持文本变化。让我们修改一下刚才的代码，如下：

<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="350" Width="525">

<Grid>

<Viewbox VerticalAlignment="Top">

<TextBlock Text="Hello World!" VerticalAlignment="Top"/>

</Viewbox>

<Viewbox VerticalAlignment="Bottom">

<Button Content="Button"/>

</Viewbox>

</Grid>

</Window>

效果如下：

如果加了Viewbox，画面的布局可能比较难以调整，这个时候就需要用到Width和Height这2个属性了。读者可能有疑问了，为什么不加Viewbox只用Grid或DockPanel不能指定Width和Height，而Viewbox就可以。那是因为Viewbox其实是靠stretch这个属性实现文本的自动变化，这也意味着Viewbox是通过拉伸或平铺来达到缩放文本的效果，就好比位图。而Grid和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="350" Width="525">

<Grid>

<Viewbox>

<TextBlock Text="Hello World!" Margin="100,100,100,100"/>

</Viewbox>

<Viewbox>

<Button Content="Button" Margin="100,120,100,100" Height="92" Width="118"/>

</Viewbox>

</Grid>

</Window>

效果：

好了，让我们来总结一下：

1、  WPF采用Grid和DockPanel来实现窗体自适应，通过控件的Margain属性来调整控件的起始位置和大小，不能使用Height和Width属性；

2、  如果要实现文本自动变化，采用Viewbox控件，可以使用Height和Width来调整控件大小；

3、  想偷懒的话，可以把MainWindow的最外面一层Grid放入Viewbox中，这样只需稍微调整一下某些控件的布局即可达到整个窗体的自适应效果。

本文来自http://www.cnblogs.com/wuhaowinner/archive/2012/10/23/Auto-match_Window_WPF.html

在此基础上，改进了，viewbox的设置：Stretch="Fill" 使Viewbox 填满窗体

<Viewbox Name ="Vbox" Margin="0,0,0,0" Stretch="Fill">

<WebBrowser Name="webBrowser1" Margin="0,0,0,0" Source="url" />
</Viewbox>