首页 > 嵌入式软件 > windows phone

为什么叫室内装修呢?呵呵,其实说的是布局,具体些嘛,就是在一个页面中,你如何去摆放你的控件,如何管理它们,你说,像不像我们刚搬进新住所,要 “装修”一番?买一套什么样的茶几和杯具(我说的“杯具”指的是原意,不要理解错了),或者沙发什么的,该怎么放,摆在哪里好看,其实,我们做界面设计也是差不多这个道理。

本文引用地址: http://embed.21ic.com/software/windowsphone/201605/41256.html

相信我们下过象棋就知道,棋盘上有横向的,纵向的很多网格线,而棋子就是参照这些网格线来放置的,对,在WP页面布局中我们把这样的布局称为网格布局,对应的控件为Grid。

千万别小看这个Grid控件,它可是非常好用的,而且也比较灵活,对的,当我们创建一个新页面时,VS为我们生生的XAML中,正是使用了Grid控件进行布局的。

既然是网格了,肯定会有行和列的,而我们的控件就是按需要放到由这些行和列共同产生的单元格中,就是我们在做网页排版时用到的table标签,应该说是非常类似的。

下面我们一起动手做个小练习,通过这个练习,我们可以从一种更直观的角度去了解Grid控件的用法。

1、启动VS,新建一个WP应用程序,不用我多说了,都会了。

2、删除页面中的根Grid,整个删除。如下图所示。

 

3、然后,替换为以下XAML代码。

[html] 
  1. <Grid x:Name="Root">  
  2.     <Grid.ColumnDefinitions>  
  3.         <ColumnDefinition Width="*"/>  
  4.         <ColumnDefinition Width="*"/>  
  5.     </Grid.ColumnDefinitions>  
  6.     <Grid.RowDefinitions>  
  7.         <RowDefinition Height="*"/>  
  8.         <RowDefinition Height="*"/>  
  9.     </Grid.RowDefinitions>  
  10. </Grid>  

 

这样我们就定义了一个两行两列的网格布局,也就是整个页面被划分为4个方块。
先简单说一下行的高,列的宽的表示方法,如果你用过WPF,你应该很清楚了。
(1)可以用数值,double类型,如120.667,这个数字与屏幕分辨率无关,运行运行库会自行调整;

(2)*:这个星号是什么意思呢?就像上面的例子,我都用了*,这么说是说不清楚的,我举个例子吧。
比如,我把一个网格分为3行,而每一行的高度都是*,则表示三个行的高度是平均分配的,都占整个网格高度的1/3.
如果我第一行的高为2*,第二行的高为*,第三行的高为3*,那么又该如何分配呢?
先别急,把上面的代码改一下,我们就可以直观地看到效果了。为了方便观察,我把ShowGridLines的值改为True,这样网格线就会显示。

[html] 
  1. <Grid x:Name="Root" ShowGridLines="True">  
  2.     <Grid.RowDefinitions>  
  3.         <RowDefinition Height="2*"/>  
  4.         <RowDefinition Height="*"/>  
  5.         <RowDefinition Height="3*"/>  
  6.     </Grid.RowDefinitions>  
  7. </Grid>  

好,现在我们看看设计视图上面显示的结果。

其实上面三行的高分别为2*,1*和3*,1可以省略,它的意思就是把整个网格的高度平均分成2 + 1 + 3 = 6份,而2*就占其中2份,1*就占其中1份,3*就占其中3份,也就是说,它们分别占总高度的2/6,1/6,3/6.
怎么样,找到规律了吗?
再来一例。

[html]
  1. <Grid x:Name="Root" ShowGridLines="True">  
  2.     <Grid.RowDefinitions>  
  3.         <RowDefinition Height="3*"/>  
  4.         <RowDefinition Height="7*"/>  
  5.     </Grid.RowDefinitions>  
  6. </Grid>  

这时候,我们再看看设计视图有啥变化?

 

上面的示例是把整个容器的高度平均分为 3 + 7 = 10 份,而第一行的高度占总高度的3/10,第二行的高度占总高度的7/10.
现在明白了一些了没?
再看看下面的例子:

[html]
  1. <Grid x:Name="Root" ShowGridLines="True">  
  2.     <Grid.RowDefinitions>  
  3.         <RowDefinition Height="86"/>  
  4.         <RowDefinition Height="5*"/>  
  5.         <RowDefinition Height="3*"/>  
  6.     </Grid.RowDefinitions>  
  7. </Grid>  

同理,第一行固定86,这是一个绝对的值,然后呢,把剩下的高度,就是除了86之外的,平均分为 5 + 3 = 8 份,第二行占了剩下的高度的5/8,第三行占了剩下的高度的3/8.

(3)Auto,不用多解释,从单词的含义就知道了,就是根内容自动调整。

列的定义与行是相类似的,只不过列定义宽度,行定义高度而已。
如果以上三种值同时出现呢?原理是一样的,自己思考一下吧,不懂的就多写代码观察。

那么,我们如何把内容放到对应的单元格内呢?Grid的行序号和列序号是从0开始的,如第一列就是0,第二行就是1等,具体怎么操作呢?
在声明其内容时,通过附加属性来确定内容应放在哪个单元格,如下面例子。

[html]
  1. <Grid x:Name="Root" ShowGridLines="True">  
  2.     <Grid.RowDefinitions>  
  3.         <RowDefinition Height="*"/>  
  4.         <RowDefinition Height="*"/>  
  5.     </Grid.RowDefinitions>  
  6.     <Grid.ColumnDefinitions>  
  7.         <ColumnDefinition Width="*"/>  
  8.         <ColumnDefinition Width="*"/>  
  9.     </Grid.ColumnDefinitions>  
  10.     <!-- 内容 -->  
  11.     <TextBlock Grid.Column="0" Grid.Row="0" Text="第1行第1列" FontSize="35"/>  
  12.     <Rectangle Fill="Yellow" Grid.Column="1" Grid.Row="0" Margin="68"/>  
  13.     <Button Grid.Column="0" Grid.Row="1" Content="第2行第1列" FontSize="32"/>  
  14.     <Ellipse Fill="Blue" Height="95" Width="180" Grid.Column="1" Grid.Row="1"/>  
  15. </Grid>  

运行效果如下:

 

 

好了,网格布局就吹到这里,下面接着看另一个较简单的布局——StackPanel,嗯,它是一个面板,它的子内容的布局非常简单,就两种方式:横向和纵向,它是沿直线分布的,要么水平,要么垂直,反正是线性分布,就类似于我们说的数据结构中的栈队列,先进后出。
例一,水平布局。

[html]
  1. <StackPanel Orientation="Horizontal" Height="100">  
  2.     <Button Content="按钮1"/>  
  3.     <Button Content="按钮2"/>  
  4.     <Button Content="按钮3"/>  
  5. </StackPanel>  

效果如下:

 

例二:垂直布局。

[html]
  1. <StackPanel Orientation="Vertical" Width="300">  
  2.     <TextBlock Text="文本一" FontSize="80"/>  
  3.     <TextBlock Text="文本二" FontSize="80"/>  
  4.     <TextBlock Text="文本三" FontSize="80"/>  
  5. </StackPanel>  


运行效果如下:
(图6)运行效果如下:

 

最后,我们来看看还有一种通过绝对定位的布局控件——Canvas。
它就像我们的二维坐标系,但与我们在平面几何中不同的是,Canvas的原点在左上角,相信写过可视化程序的朋友都知道了。
要注意的是,Canvas不知道具体要为哪些子内容设置坐标,所以,它的Top和Left值视具体情况而定,因此这两个属性都是附加属性,也就是它附加在放置在Canvas中的子元素要设置的具本位置而使用,所以每个子元素的定位都通过附加的Canvas.Top和Canvas.Left来设置。

[html]
  1. <Canvas>  
  2.     <Rectangle Fill="Orange" Canvas.Left="37" Canvas.Top="116" Height="165" Width="220" />  
  3.     <Path Data="M0,0 L0,8 L12,8 Z" Fill="Silver"  
  4.           Canvas.Left="127"  
  5.           Canvas.Top="204"  
  6.           Width="260"  
  7.           Height="235" Stretch="Fill"/>  
  8. </Canvas>  


 

还有的是,ZIndex是用于设置子元素的顺序,从0开始,默认为0,值越大,它越在顶层,比如上面的例子,我们发现,后面添加的三角形把前一个矩形挡住了,那如何让矩形在其它图形之上呢?对,把ZIndex设置一个较大的值就行了,如:

[html]
  1. <Canvas>  
  2.     <Rectangle Fill="Orange" Canvas.Left="37" Canvas.Top="116"  
  3.                Height="165" Width="220"  
  4.                Canvas.ZIndex="1"/>  
  5.     <Path Data="M0,0 L0,8 L12,8 Z" Fill="Silver"  
  6.           Canvas.Left="127"  
  7.           Canvas.Top="204"  
  8.           Width="260"  
  9.           Height="235" Stretch="Fill"/>  
  10. </Canvas>  


 

换一批

延伸阅读

[真心话] 在美国的电子工程师看中国电子行业,为什么不受发达国家待见?

在美国的电子工程师看中国电子行业,为什么不受发达国家待见?

首先声明我承认中国有很多问题。但我个人是不太相信那种把中国的各种问题一罗列,就得出结论迟早要完之类结论的。这种论证太廉价。要说问题,三四十年前问题更多,八十年代的公知讲喊的是“河殇”,但中国没有完蛋,还是走过来了。风物长宜放眼量。......

关键字:美国 电子工程师 中国 电子行业

[真心话] 单片机大师郭天祥的大学六年,看看与你的有何不同?

单片机大师郭天祥的大学六年,看看与你的有何不同?

在哈尔滨工程大学五年,我在学校电子创新实验室呆了四年,这四年里创新实验室给我提供了良好的学习环境和完善的实验设备;在这里与众多电子爱好者的交流中,使我学到了更多的专业知识;在学校老师们的教导下,让我学会了如何做一名合格的大学生。......

关键字:单片机 郭天祥

[真心话] 三大运营商取消流量漫游费,本地流量将被国内流量替代

三大运营商取消流量漫游费,本地流量将被国内流量替代

7月1日,中国移动、中国联通和中国电信正式全面取消流量漫游费,原有套餐中的省内通用流量直接升级为国内流量,但并不包含港澳台地区。目前原来的本地流量已经转化为国内流量。对于本地流量转化为国内流量后价格是否......

关键字:电信 网络流量

[真心话] 资深硬件研发工程师:抄袭可耻!但产品抄袭可用,资料抄袭可笑

资深硬件研发工程师:抄袭可耻!但产品抄袭可用,资料抄袭可笑

硬件研发一般是指电子产品硬件研发,是一种看得见实物的电子产品研发,比如我们所说的手机、鼠标、键盘、音响都是硬件,硬件开发也就是在这些方面进行的一系列研究。本文分享一位资深工程师对硬件研发的一些看法,希望能对大家有所帮助。......

关键字:硬件研发 抄袭 生产体系

[新鲜事] 波士顿动力正在制造令人害怕的“机器狗军队”,明年出货1千台SpotMini机器人

波士顿动力正在制造令人害怕的“机器狗军队”,明年出货1千台SpotMini机器人

波士顿动力公司正在制造令人害怕的“机器狗军队”!目前,该公司表示,到2019年7月,将实现每年量产1000个紧凑型SpotMini机器人。SpotMini是公司研制多款机器狗中体型最小的,身高两英尺9英寸,重量66磅......

关键字:波士顿动力 机器人

[新鲜事] 这家被指抄袭谷歌的红芯浏览器承认基于开源架构,仍称“有创新”

这家被指抄袭谷歌的红芯浏览器承认基于开源架构,仍称“有创新”

深陷“造假”风波的国产浏览器品牌红芯,再度发声。8月16日晚,红芯时代(北京)科技有限公司发布声明称:红芯浏览器内核是基于通用的浏览器内核架构(即Chromium开源项目,但不是Chrome浏览器)的基础上进行......

关键字:浏览器 谷歌 红芯浏览器

[新鲜事] 美国物理学家爆猛料:外星人已经对人类下手了

美国物理学家爆猛料:外星人已经对人类下手了

就在世人对外星人的存在还将信将疑的时候,美国75岁物理学家斯坦顿·弗里德曼(Stanton Friedman)声称,自己确信外星生物曾到访过地球,并且外星生物在地球上停留很长时间。外星人曾经还劫持过地球人去做实验,这些资料目前被美国政府扣押......

关键字:外星人
条评论

我 要 评 论

网友评论

大家都爱看

  • 扇出型晶圆级封装的优势和挑战!

    我们有能力创造一些能保持前代性能并且更好更小的电子设备,例如今天的可穿戴设备、智能手机或平板电脑,这是由于很多因素超过摩尔定律而快速发展,从而能够从底层的嵌入组件发展到今天把它们封…

    2018-03-29
  • Xilinx推出革命性的新型自适应计算产品

    自适应和智能计算的全球领先企业赛灵思公司(Xilinx, Inc.,(NASDAQ:XLNX)),近日宣布推出一款超越FPGA功能的突破性新型产品,名为ACAP(Adaptive Compute Acceleration Platform,自适应计算加速…

    2018-03-20
  • 赛普拉斯为树莓派3 B+ IoT单板计算机提供强大稳定的无

    先进嵌入式系统解决方案的领导者赛普拉斯(纳斯达克代码:CY)近日宣布其Wi-Fi&#174;和蓝牙&#174;combo解决方案为全新的树莓派 3 B+(Raspberry Pi 3Model B+)IoT单板计算机提供强大稳定的无线连接…

    2018-03-20
  • 观看直播领红包,SEED-A10加速卡助力人工智能

    随着云服务器、云计算的发展,大家对硬件加速的需求越来越多,但是随着设备功耗的上升、性能需求越来越高,常规加速设备以及开始不能满足需求,因此FPGA逐渐在硬件加速中找到了自己的位置,而艾…

    2018-03-19
  • 特朗普:博通不得以任何形式收购高通

    白宫周一(3月12日)晚发出声明,川普(特朗普)总统出于“国家安全”考量、禁止新加坡博通公司(Broadcom)收购美国高通公司(Qualcomm)。

    2018-03-14