为什么叫室内装修呢?呵呵,其实说的是布局,具体些嘛,就是在一个页面中,你如何去摆放你的控件,如何管理它们,你说,像不像我们刚搬进新住所,要“装修”一番?买一套什么样的茶几和杯具(我说的“杯具”指的是原意,不要理解错了),或者沙发什么的,该怎么放,摆在哪里好看,其实,我们做界面设计也是差不多这个道理。
相信我们下过象棋就知道,棋盘上有横向的,纵向的很多网格线,而棋子就是参照这些网格线来放置的,对,在WP页面布局中我们把这样的布局称为网格布局,对应的控件为Grid。
千万别小看这个Grid控件,它可是非常好用的,而且也比较灵活,对的,当我们创建一个新页面时,VS为我们生生的XAML中,正是使用了Grid控件进行布局的。
既然是网格了,肯定会有行和列的,而我们的控件就是按需要放到由这些行和列共同产生的单元格中,就是我们在做网页排版时用到的table标签,应该说是非常类似的。
下面我们一起动手做个小练习,通过这个练习,我们可以从一种更直观的角度去了解Grid控件的用法。
1、启动VS,新建一个WP应用程序,不用我多说了,都会了。
2、删除页面中的根Grid,整个删除。如下图所示。
3、然后,替换为以下XAML代码。
这样我们就定义了一个两行两列的网格布局,也就是整个页面被划分为4个方块。
先简单说一下行的高,列的宽的表示方法,如果你用过WPF,你应该很清楚了。
(1)可以用数值,double类型,如120.667,这个数字与屏幕分辨率无关,运行运行库会自行调整;
(2)*:这个星号是什么意思呢?就像上面的例子,我都用了*,这么说是说不清楚的,我举个例子吧。
比如,我把一个网格分为3行,而每一行的高度都是*,则表示三个行的高度是平均分配的,都占整个网格高度的1/3.
如果我第一行的高为2*,第二行的高为*,第三行的高为3*,那么又该如何分配呢?
先别急,把上面的代码改一下,我们就可以直观地看到效果了。为了方便观察,我把ShowGridLines的值改为True,这样网格线就会显示。
好,现在我们看看设计视图上面显示的结果。
其实上面三行的高分别为2*,1*和3*,1可以省略,它的意思就是把整个网格的高度平均分成2 + 1 + 3 = 6份,而2*就占其中2份,1*就占其中1份,3*就占其中3份,也就是说,它们分别占总高度的2/6,1/6,3/6.
怎么样,找到规律了吗?
再来一例。
这时候,我们再看看设计视图有啥变化?
上面的示例是把整个容器的高度平均分为 3 + 7 = 10 份,而第一行的高度占总高度的3/10,第二行的高度占总高度的7/10.
现在明白了一些了没?
再看看下面的例子:
同理,第一行固定86,这是一个绝对的值,然后呢,把剩下的高度,就是除了86之外的,平均分为 5 + 3 = 8 份,第二行占了剩下的高度的5/8,第三行占了剩下的高度的3/8.
(3)Auto,不用多解释,从单词的含义就知道了,就是根内容自动调整。
列的定义与行是相类似的,只不过列定义宽度,行定义高度而已。
如果以上三种值同时出现呢?原理是一样的,自己思考一下吧,不懂的就多写代码观察。
那么,我们如何把内容放到对应的单元格内呢?Grid的行序号和列序号是从0开始的,如第一列就是0,第二行就是1等,具体怎么操作呢?
在声明其内容时,通过附加属性来确定内容应放在哪个单元格,如下面例子。
运行效果如下:
好了,网格布局就吹到这里,下面接着看另一个较简单的布局——StackPanel,嗯,它是一个面板,它的子内容的布局非常简单,就两种方式:横向和纵向,它是沿直线分布的,要么水平,要么垂直,反正是线性分布,就类似于我们说的数据结构中的栈队列,先进后出。
例一,水平布局。
效果如下:
例二:垂直布局。
运行效果如下:
(图6)运行效果如下:
最后,我们来看看还有一种通过绝对定位的布局控件——Canvas。
它就像我们的二维坐标系,但与我们在平面几何中不同的是,Canvas的原点在左上角,相信写过可视化程序的朋友都知道了。
要注意的是,Canvas不知道具体要为哪些子内容设置坐标,所以,它的Top和Left值视具体情况而定,因此这两个属性都是附加属性,也就是它附加在放置在Canvas中的子元素要设置的具本位置而使用,所以每个子元素的定位都通过附加的Canvas.Top和Canvas.Left来设置。
还有的是,ZIndex是用于设置子元素的顺序,从0开始,默认为0,值越大,它越在顶层,比如上面的例子,我们发现,后面添加的三角形把前一个矩形挡住了,那如何让矩形在其它图形之上呢?对,把ZIndex设置一个较大的值就行了,如:
分享到:
相关推荐
windows phone 开发 在线教程
Developers are racing to discover how to develop for Windows Phone 7—and there is no quicker resource to help you get up to speed than Windows Phone 7 Recipes. This book covers all aspects of ...
本书旨在分享强大的Microsoft编程工具(诸如Silverlight、XNA和Visual Studio 2010 Express Edition一类)的使用心得,介绍了如何使用现有的C#和.NET编程技能来开发一些Windows Phone 7应用程序。本书作者团队探讨了...
windows phone 开发书籍及资料
windowsphone开发:类库和案例[借鉴].pdf
2012年6月21日,微软正式发布Windows Phone 8,采用和Windows 8相同的Windows NT内核,同时也针对市场的Windows Phone 7.5发布Windows Phone 7.8。现有Windows Phone 7手机都将无法升级至Windows Phone 8。 2014年3...
Windows Phone开发-XNA基础
在开发Windows Phone应用程序的时候,或多或少会与图片打交道,下面总结下Windows Phone 中处理图片的一些技巧
从monotouch和.net开发环境到objective-c和c#开发语言,从基于monotouch进行iphone开发的编程方法到应用程序的发布和销售等,《iPhone高级编程:使用Mono Touch和.NET/C#》涵盖了基于monotouch进行iphone应用程序...
内容提要: 本书对WindowsPhoneXNA游戏开发的流程进行了详细的讲解,对其核心内容和开发技巧进行了深入的说明。...本书还针对WindowsPhone8的新特性以及如何将WindowsPhone7游戏向WindowsPhone8上迁移做了详细的说明。
[Packt Publishing] Windows Phone 8 游戏开发教程 (英文版) [Packt Publishing] Windows Phone 8 Game Development (E-Book) ☆ 图书概要:☆ A practical guide to creating games for the Windows Phone 8 ...
windows phone7 开发的案例,内有完整的工程项目。
Windows Phone7是微软重新打造windows mobile品牌之后推出的一款产品。
仿Windows Phone博客导航源码 程序介绍: Windows Phone Blog Menu是一个Silverlight导航控件,看起来像Windows Phone 7。 控件中的tiles链接到web站点在你的博客中使用这个控件可以表达你对WP7的喜爱。 Windows...
WindowsPhone开发,包含聊天室案例开始,阅读器、天气预报、SignalR
windows phone开发实例源码 按照此专栏顺序排序http://blog.csdn.net/column/details/wp-comming.html 很感谢专栏博主
今天,微软面向开发者正式发布了Windows Phone SDK 7.1开发工具的RTW版 Windows Phone SDK 7.1.1 更新在现有的 Windows Phone SDK 7.1 的基础上提供了更多功能。使用此更新,您可以更加轻松地开发可在 256 MB 设备...
基于ArcGIS for Windows Phone 最新版API v3.0撰写的开发教程,适合windows Phone开发新手和感兴趣的同学。
(6):windows phone 下汉字转拼音 (7):设置输入框光标的颜色 (8):在Windows Phone显示GIF图片 (9):自定义Windows Phone 页面切换动画 (10):Windows Phone 中处理图片的技巧 (11):让StackPanel...
本书适合于Windows Phone 7开发入门的读者,也适合于从其他智能手机平台转向Windows Phone 7平台的读者,同时对于有Windows Phone 7开发经验的读者也极具参考价值。 本书系统论述了Windows Phone 7操作系统的应用...