当前位置：首页 > article >正文

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

article 2025/9/18 16:05:02

原文: 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>