Expression Blend4经验分享:自适应布局浅析
今天分享一下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会居中显示在浏览器上。这样基本就能解决了超宽分辨率自适应的问题。
以上这些是我在项目实践摸索出的一些有效经验,希望大家能举一反三,谢谢观看。
最新文章
- App 引导界面
- JSTL配置
- Android_helloworld
- Codeforces Round #218 (Div. 2) D. Vessels
- Python 实时日志平台 Sentry
- CPU核心数
- dotnet new 命令使用模板
- canvas图形函数
- oracle角色、权限和用户
- LeetCode算法题-Number of Lines To Write String(Java实现)
- TCP协议学习总结(下)
- 迅为iTOP-4418/6818开发板-驱动-实现GPIO扩展
- POI中excle样式怎么写
- python笔记27-time模块
- 18.12 SDRAM和NAND FLASH区别
- MySQL外键使用详解
- SVN服务的模式和多种访问方式 多种访问原理图解与优缺点
- CF767C 记录错误
- mac系统下安装Composer和laravel
- java中garadle工程没有src问题
热门文章
- selenium+python测试
- C++自定义修饰键,实现如<;Capslock+J>;等组合键的按键映射
- SQL Server 2012实施与管理实战指南(笔记)——Ch5启动SQL Server服务和数据库
- [原]ubuntu14.04 网卡逻辑修改没有文件/etc/udev/rules.d/70-persistent-net.rules
- 描述Linux下文件删除的原理(计时3分钟)
- 初识JNI
- android 利用Path.cubicTo 画 贝塞尔曲线
- linux开机自动连接无线网络
- centos克隆,网卡启动失败
- Linux vi 操作命令整理