今天分享一下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会居中显示在浏览器上。这样基本就能解决了超宽分辨率自适应的问题。

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

Expression Blend的经验分享会持续推出,欢迎关注我的博客!
我个人的小作品展示平台 :http://raimon.6.gwidc.com/
欢迎有志于钻研Blend的朋友加入我们的Blend美工群QQ:152049269

Expression Blend4经验分享:自适应布局浅析的更多相关文章

  1. Expression Blend4经验分享:文字公告无缝循环滚动效果

    这次分享一个类似新闻公告板的无缝循环滚动效果,相信很多项目都会应用到这个效果.之前我也百度了一下,网上的一些Silverlight的文字或图片滚动效果,都是一次性滚动的,如果要做到无缝循环滚动,多数要 ...

  2. Expression Blend4经验分享:制作一个简单的图片按钮样式

    这次分享如何做一个简单的图片按钮经验 在我的个人Silverlight网页上,有个Iphone手机的效果,其中用到大量的图片按钮 http://raimon.6.gwidc.com/Iphone/de ...

  3. Expression Blend4经验分享:制作一个简单的文字按钮样式

    首先在Grid里放一个TextBlock,对象时间线窗口的结构树如下 右键点击grid,选择构成控件 会弹出构成控件的对话框,选择你要构成的控件类型,控件名称,控件样式存储位置 这里我们选择butto ...

  4. Html5 布局经验分享-第1集

    移动端的布局与pc端的布局相比 移动端的布局就简单的多,兼容性不必考虑那么多,css3各种特性基本上是可以放肆的写:(个人看法) 本人做移动web 布局一段时间了,把这其中遇到的一些问题总结下来,均是 ...

  5. 沉淀,再出发——在Ubuntu Kylin15.04中配置Hadoop单机/伪分布式系统经验分享

    在Ubuntu Kylin15.04中配置Hadoop单机/伪分布式系统经验分享 一.工作准备 首先,明确工作的重心,在Ubuntu Kylin15.04中配置Hadoop集群,这里我是用的双系统中的 ...

  6. BFC之宽度自适应布局篇

    说到自适应布局,我们曾在“抛砖引玉之宽度自适应布局”一文中学习过.当时的核心思想主要是利用float+margin的形式.利用块状元素的流体特性,然后计算出float元素的宽度,并赋予到块状元素的相应 ...

  7. 【转】CSS深入理解流体特性和BFC特性下多栏自适应布局

    这篇文章发布于 2015年02月12日,星期四,23:36,归类于 css相关. 阅读 30873 次, 今日 63 次 by zhangxinxu from http://www.zhangxinx ...

  8. 使用css3中calc()进行自适应布局

    calc()能做什么? calc()可以通过计算得到元素的宽度或者高度,让我们很容易进行自适应布局. 你可以为一个div元素,使用百分比.em.px和rem单位值计算出其宽度或者高度,比如说“widt ...

  9. 【老司机经验】CC2530&STM8S105二合一嵌入式学习板设计思路与经验分享

    CC2530&STM8S105二合一嵌入式学习板设计思路与经验分享 1.缘起    这些年来一直在其他公司的实验箱和别人的开发板上进行教学与开发工作,总是觉得功能设计不那么合意.心里突然冒出个 ...

随机推荐

  1. ORACLE 查看RMAN的备份信息总结

    关于Oracle数据库的RMAN备份,除了邮件外,是否能通过其它方式检查RMAN备份的成功与失败呢?其实我们可以通过下面SQL脚本来检查某个时间段备份失败的记录: SELECT * FROM V$RM ...

  2. ORA-07445&ORA-00108错误案例

    由于需要ORACLE的UAT测试环境,克隆了虚拟机后,修改IP地址后,启动实例遇到了ORA-07445 &ORA-00108错误. 案例环境:   SQL> select * from ...

  3. MapReduce二次排序

    默认情况下,Map 输出的结果会对 Key 进行默认的排序,但是有时候需要对 Key 排序的同时再对 Value 进行排序,这时候就要用到二次排序了.下面让我们来介绍一下什么是二次排序. 二次排序原理 ...

  4. cacti监控mysql

    cacti监控mysql 2013-09-25 16:21:43 分类: LINUX 原文地址:cacti监控mysql 作者:baochenggood cacti监控mysql 1 下载cacti监 ...

  5. 按要求编写Java应用程序。 (1)建立一个名叫Cat的类: 属性:姓名、毛色、年龄 行为:显示姓名、喊叫 (2)编写主类: 创建一个对象猫,姓名为“妮妮”,毛色为“灰色”,年龄为2岁,在屏幕上输 出该对象的毛色和年龄,让该对象调用显示姓名和喊叫两个方法。

    package zuoye; public class Cat { String name="妮妮"; String color="灰色"; int age=1 ...

  6. x01.os.1: BIOS 中断

    这只是一点准备工作.为了显示字符串,需要调用中断:int  0x10 (AH=0x13).具体参数设置,参考我的归纳整理如下: INT 10 (AH = 0) -----------------功能: ...

  7. java.sql.SQLException: [Microsoft][ODBC 驱动程序管理器] 在指定的 DSN 中,驱动程序和应用程序之间的体系结构不匹配

    今天把sql server 2008 r2装了起来,64位的,然后就迫不及待地体验连接数据库的操作,编程语言是java.我一开始学了一种非常老的连接方式,使用JDBC-ODBC桥.初次使用不太熟练,所 ...

  8. CSS background-position 用法详细介绍

    语法: background-position : length || length background-position : position || position 取值: length  : ...

  9. Binary search tree

    #ifndef __TREE_H #define __TREE_H #include <iostream> template<typename T> class TreeNod ...

  10. 转载:JavaSE之反射

    该文章转载自:http://www.cnblogs.com/rollenholt/archive/2011/09/02/2163758.html Java反射详解 本篇文章依旧采用小例子来说明,因为我 ...