今天分享一下Blend制作自适应分辨率布局的经验，大家先看下效果图：
这是一个标准的三分天下的布局，两侧的红色区域是背景区域，是用来干吗的呢，下面简单的分析一下，大家就明白了。
1、拿到一个项目，进行初步的设计时，先要确定最小的布局尺寸，即页面在这个最小尺寸里也是可以正常显示的，我一般把这个尺寸作为设计画布的尺寸。在页面的xaml代码里用d:DesignWidth="800" d:DesignHeight="600"来确定设计区域的尺寸，这个尺寸只是你在Blend编辑状态时看到的尺寸，运行时是会根据浏览器的可视区域变化的，除非你给这个页面规定其Width和Height的大小。如果要把页面做成可以自适应分辨率大小的，那我们一般不设定其Width和Height的大小。
2、先在LayoutRoot这个根容器里放入页面布局容器和各种子容器。这里不一一赘述了，直接上代码：
<Grid x:Name="grid_layout" Margin="" Background="White" Grid.Column="" MinWidth="" MaxWidth="">
<Grid.RowDefinitions>
<RowDefinition Height="0.2*" MaxHeight=""/>
<RowDefinition Height="0.8*"/>
</Grid.RowDefinitions>
<Grid x:Name="grid_top" Margin="" Background="#FF51ABBC" >
<TextBlock x:Name="标题栏" HorizontalAlignment="Center" TextWrapping="Wrap" Text="标题栏" VerticalAlignment="Center" FontFamily="Microsoft YaHei" FontSize="" Foreground="White"/>
</Grid>
<Grid x:Name="grid_main" Margin="" Grid.Row="" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.3*" MaxWidth=""/>
<ColumnDefinition Width="0.7*"/>
</Grid.ColumnDefinitions>
<Grid x:Name="grid_left" Margin="" Background="#FF51BCA1">
<TextBlock x:Name="左侧功能区域" HorizontalAlignment="Center" TextWrapping="Wrap" Text="左侧功能区域" VerticalAlignment="Center" FontFamily="Microsoft YaHei" FontSize="" Foreground="White" Width=""/>
</Grid>
<Grid x:Name="grid_right" Margin="" Background="#FFACBC51" Grid.Column="">
<TextBlock x:Name="内容区域" HorizontalAlignment="Center" TextWrapping="Wrap" Text="内容区域" VerticalAlignment="Center" FontFamily="Microsoft YaHei" FontSize="" Foreground="White"/>
</Grid>
</Grid>
</Grid>
基本的结构树如下图：
大家可能注意到了xaml里grid的列和行里会出现MaxHeight或MaxWidth，这是为了有效的控制布局在自适应分辨率时的度。自适应分辨率并不是完全根据比例变化的，大多数时候容器里的文字、图片、视频等等都有一定的尺寸，拉伸的过大会造成效果变形或缺失。所以设置一个容器伸展的最大和最小尺寸有利于控制自适应的度。
3、刚才我设置的设计尺寸是800*600，但是一般用户的电脑分辨率为1024*768、1280*1024，有的笔记本的分辨率甚至是1660*900的，如何让页面在这种分辨率下也能良好的显示呢？对于1660这种比较特殊的分辨率宽度，一般的页面布局是无法强行适应拉伸的，这样会造成刚才所说的内部元素的变形、缺失、排列失衡等等。我一般是这么做的，将页面主容器grid_layout的最大宽度设置为1024（假设这是页面最大适应度，即页面伸展后，内部各元素都能有效显示的最大尺寸），然后在根容器LayoutRoot上划分3列：
<Grid x:Name="LayoutRoot" Background="#FFFF8000">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0*" MinWidth=""/>
<ColumnDefinition />
<ColumnDefinition Width="0*" MinWidth=""/>
</Grid.ColumnDefinitions>
</Grid>
将grid_layout放入第二列中，这样当分辨率超出1024的时候，根容器LayoutRoot的第一列和第三列就会自动对称显示出来，并且grid_layout会居中显示在浏览器上。这样基本就能解决了超宽分辨率自适应的问题。
以上这些是我在项目实践摸索出的一些有效经验，希望大家能举一反三，谢谢观看。
