Expression Blend4经验分享：自适应布局浅析

今天分享一下Blend制作自适应分辨率布局的经验，大家先看下效果图：

这是一个标准的三分天下的布局，两侧的红色区域是背景区域，是用来干吗的呢，下面简单的分析一下，大家就明白了。

1、拿到一个项目，进行初步的设计时，先要确定最小的布局尺寸，即页面在这个最小尺寸里也是可以正常显示的，我一般把这个尺寸作为设计画布的尺寸。在页面的xaml代码里用d:DesignWidth="800" d:DesignHeight="600"来确定设计区域的尺寸，这个尺寸只是你在Blend编辑状态时看到的尺寸，运行时是会根据浏览器的可视区域变化的，除非你给这个页面规定其Width和Height的大小。如果要把页面做成可以自适应分辨率大小的，那我们一般不设定其Width和Height的大小。

2、先在LayoutRoot这个根容器里放入页面布局容器和各种子容器。这里不一一赘述了，直接上代码：

          <Grid x:Name="grid_layout" Margin="0" Background="White" Grid.Column="1" MinWidth="800" MaxWidth="1024">

          <Grid.RowDefinitions>

                <RowDefinition Height="0.2*" MaxHeight="160"/>

                <RowDefinition Height="0.8*"/>

          </Grid.RowDefinitions>

                <Grid x:Name="grid_top" Margin="0" Background="#FF51ABBC" >

                     <TextBlock x:Name="标题栏" HorizontalAlignment="Center" TextWrapping="Wrap" Text="标题栏" VerticalAlignment="Center" FontFamily="Microsoft YaHei" FontSize="48" Foreground="White"/>

                </Grid>

                <Grid x:Name="grid_main" Margin="0" Grid.Row="1" >

                     <Grid.ColumnDefinitions>

                           <ColumnDefinition Width="0.3*" MaxWidth="300"/>

                           <ColumnDefinition Width="0.7*"/>

                     </Grid.ColumnDefinitions>

                     <Grid x:Name="grid_left" Margin="0" Background="#FF51BCA1">

                           <TextBlock x:Name="左侧功能区域" HorizontalAlignment="Center" TextWrapping="Wrap" Text="左侧功能区域" VerticalAlignment="Center" FontFamily="Microsoft YaHei" FontSize="48" Foreground="White" Width="50"/>

                     </Grid>

                     <Grid x:Name="grid_right" Margin="0" Background="#FFACBC51" Grid.Column="1">

                           <TextBlock x:Name="内容区域" HorizontalAlignment="Center" TextWrapping="Wrap" Text="内容区域" VerticalAlignment="Center" FontFamily="Microsoft YaHei" FontSize="48" Foreground="White"/>

                     </Grid>

                </Grid>

          </Grid>

基本的结构树如下图：

大家可能注意到了xaml里grid的列和行里会出现MaxHeight或MaxWidth，这是为了有效的控制布局在自适应分辨率时的度。自适应分辨率并不是完全根据比例变化的，大多数时候容器里的文字、图片、视频等等都有一定的尺寸，拉伸的过大会造成效果变形或缺失。所以设置一个容器伸展的最大和最小尺寸有利于控制自适应的度。

3、刚才我设置的设计尺寸是800*600，但是一般用户的电脑分辨率为1024*768、1280*1024，有的笔记本的分辨率甚至是1660*900的，如何让页面在这种分辨率下也能良好的显示呢？对于1660这种比较特殊的分辨率宽度，一般的页面布局是无法强行适应拉伸的，这样会造成刚才所说的内部元素的变形、缺失、排列失衡等等。我一般是这么做的，将页面主容器grid_layout的最大宽度设置为1024（假设这是页面最大适应度，即页面伸展后，内部各元素都能有效显示的最大尺寸），然后在根容器LayoutRoot上划分3列：

 1 <Grid x:Name="LayoutRoot" Background="#FFFF8000">
 2 
 3           <Grid.ColumnDefinitions>
 4 
 5                 <ColumnDefinition Width="0*" MinWidth="0"/>
 6 
 7                 <ColumnDefinition />
 8 
 9                 <ColumnDefinition Width="0*" MinWidth="0"/>
10 
11           </Grid.ColumnDefinitions>
12 
13       </Grid>

将grid_layout放入第二列中，这样当分辨率超出1024的时候，根容器LayoutRoot的第一列和第三列就会自动对称显示出来，并且grid_layout会居中显示在浏览器上。这样基本就能解决了超宽分辨率自适应的问题。

以上这些是我在项目实践摸索出的一些有效经验，希望大家能举一反三，谢谢观看。

Expression Blend的经验分享会持续推出，欢迎关注我的博客！

我个人的小作品展示平台：http://raimon.6.gwidc.com/

欢迎有志于钻研Blend的朋友加入我们的Blend美工群QQ：152049269

Expression Blend4经验分享：自适应布局浅析

猜你喜欢