WindowsPhone7第7章课件

1、WindowsPhone7第第7章章布局控件布局控件第第7章章WindowsPhone7第第7章章布局系统布局系统nGridnCanvasnStackPanelWindowsPhone7第第7章章没有布局系统时的困惑没有布局系统时的困惑n当程序支持手机垂直或水平时当程序支持手机垂直或水平时n手机翻转手机翻转n布局乱布局乱n丢失控件丢失控件n如何解决？如何解决？n布局系统！布局系统！WindowsPhone7第第7章章Grid网格布局控件网格布局控件n用途用途n多用在多用在布局参考布局参考，类似网页中的，类似网页中的tablen当手机垂直和水平翻转时，用来布局当手机垂直和水平翻转时，用来布局Wi

2、ndowsPhone7第第7章章几个注意事项几个注意事项n默认已有了一个默认已有了一个2行行1列的列的Gridn行行n行们，行的集合行们，行的集合nRowDefinitionsn列列n列们，列的集合列们，列的集合nColumnDefinitionsWindowsPhone7第第7章章一个十字架布局的一个十字架布局的GridWindowsPhone7第第7章章高和宽值的含义高和宽值的含义n列：列：n宽宽 Widthn行行n高高HeightnP82、84n=“*”表示除上面几行以外的高度或宽度表示除上面几行以外的高度或宽度n=“100”表示固定值表示固定值n=“100*”表示比例表示比例Windo

3、wsPhone7第第7章章可以通过文档视图看到可以通过文档视图看到WindowsPhone7第第7章章拖拉控件到拖拉控件到Grid中的方法中的方法阴影阴影清晰清晰WindowsPhone7第第7章章Grid重要属性重要属性nShowGridLines bool类型类型n是否是否显示显示Grid线线nRowDefinitions RowDefinition类型类型n行行们们nColumnDefinitions ColumnDefinition 类型类型n列列们们WindowsPhone7第第7章章XAML中中控件控件的的Grid的属性的属性nGrid.RownGrid.Columnn以上两个属性

4、不写为以上两个属性不写为0，表示第一行，第，表示第一行，第一列一列nGrid.RowSpann合并的行有几个，默认为合并的行有几个，默认为1nGrid.ColumnSpann合并的列有几个，默认为合并的列有几个，默认为1WindowsPhone7第第7章章横屏、竖屏控件位置改变横屏、竖屏控件位置改变n解决方法有两种：解决方法有两种：n1：将：将Grid的的行和列行和列设为设为固定值或比例值固定值或比例值 并在手机并在手机水平时水平时，将，将TitlePanel不可不可见见(Why?)。WindowsPhone7第第7章章解决方法解决方法2n在代码中更改在代码中更改Grid的行高和列宽的行高和列

5、宽事件：事件： 代码：见下页代码：见下页ncs代码设置控件的行和列代码设置控件的行和列n (控件名，行控件名，行index)WindowsPhone7第第7章章代码设置代码设置grid的行和列的行和列Grid的的名字名字Grid的的行们行们数值可以数值可以通过界面通过界面设置知道设置知道WindowsPhone7第第7章章注意！注意！n解决方法解决方法1中，手机的横屏竖屏的变化中，中，手机的横屏竖屏的变化中，原来的行会变为变化后的列，原来的列原来的行会变为变化后的列，原来的列会变为变化后的行，会变为变化后的行，(即，即，在手机变化时在手机变化时网格线方向不动网格线方向不动)因此，若不在乎行列变

6、因此，若不在乎行列变化，化，或行列比例都为或行列比例都为1:1可用此方法，否可用此方法，否则不建议使用！则不建议使用！n因此方法因此方法1简单但不能被经常使用！简单但不能被经常使用！WindowsPhone7第第7章章多控件布局多控件布局放一个放一个Grid控件，控件，容纳容纳4个按钮个按钮放一个放一个Grid控件，控件，容纳容纳2个按钮个按钮WindowsPhone7第第7章章布局练习布局练习WindowsPhone7第第7章章更多参考更多参考nMSDNWindowsPhone7第第7章章读懂代码读懂代码nP85WindowsPhone7第第7章章小课中常见问题小课中常见问题n问题问题1：G

7、rid在水平翻转中发生奇怪的左在水平翻转中发生奇怪的左移现象移现象n问题问题2：以：以Grid命名项目，然后不能用命名项目，然后不能用Grid这个类的任何属性和方法了这个类的任何属性和方法了n问题问题3：cs代码写控件代码写控件WindowsPhone7第第7章章本节主要内容本节主要内容nCWindowsPhone7第第7章章Canvas画布布局画布布局n在画布布局中在画布布局中n可以任意移动控件可以任意移动控件位置位置n可以任意移动控件可以任意移动控件层次层次n用途：用途：弹出框弹出框、或需要层次叠放的地方、或需要层次叠放的地方nP87n演示：移动的小球演示：移动的小球WindowsPhon

8、e7第第7章章Canvas类主要方法类主要方法WindowsPhone7第第7章章StackPaneln堆叠布局堆叠布局n可以将自己的子元素按可以将自己的子元素按水平水平或或垂直垂直方向方向依次排依次排开开n排排坐吃果果排排坐吃果果n重要属性重要属性nOrientationnHorizontal水平水平nVertical垂直垂直nP89WindowsPhone7第第7章章P90n读代码读代码WindowsPhone7第第7章章自定义面板自定义面板n有兴趣可以自学有兴趣可以自学n不明白的可以问老师不明白的可以问老师WindowsPhone7第第7章章边距和对齐边距和对齐nMarginn即为边距，

9、每个控件都对应有即为边距，每个控件都对应有Margin属属性，该属性决定了每个性，该属性决定了每个UI元素的布局元素的布局n演示演示nMargin的值有时候会看起来不起作用的值有时候会看起来不起作用n那是因为需要和那是因为需要和HorizontalAlignment和和VerticalAlignment属性相结合属性相结合n注意看点击控件时的注意看点击控件时的箭头箭头WindowsPhone7第第7章章补充补充n删除控件的删除控件的宽、高、宽、高、Margin属性，可以属性，可以使该控件四周紧贴父控件。使该控件四周紧贴父控件。n类的创建和应用类的创建和应用n演示演示n学会用学会用Tab Tab

10、在属性中切换在属性中切换n学会调用类的方法学会调用类的方法WindowsPhone7第第7章章作业作业n无间道无间道(UnderCover)n背景：你是一名隐职业人员，要查出卧背景：你是一名隐职业人员，要查出卧底的身份和相关信息底的身份和相关信息WindowsPhone7第第7章章作业作业ListBox布局不限制格式布局不限制格式可用自己喜欢的布局可用自己喜欢的布局自己定义布局自己定义布局WindowsPhone7第第7章章作业要求作业要求n新建一个类名叫新建一个类名叫underCovern类有类有5个属性个属性1个方法个方法属性名属性名释义释义Name名字IsUnderCover是否是卧底CodeName代号Skill技能SaveDate记录时间WindowsPhone7第第7章章作业要求作业要求n方法为方法为Save方法，暂时不写任何东西方法，暂时不写任何东西n要求点过要求点过It is you 按钮之后，实例化按钮之后，实例化underCover类，给类，给5个属性赋值，并调个属性赋值，并调用用Save方法保存。方法保存。n最后清空各个控件最后清空各个控件n作业可以写的不够完整，或者有很多作业可以写的不够