1、WindowsPhone7第第7章章布局控件布局控件第第7章章WindowsPhone7第第7章章布局系統(tǒng)布局系統(tǒng)nGridnCanvasnStackPanelWindowsPhone7第第7章章沒有布局系統(tǒng)時(shí)的困惑沒有布局系統(tǒng)時(shí)的困惑n當(dāng)程序支持手機(jī)垂直或水平時(shí)當(dāng)程序支持手機(jī)垂直或水平時(shí)n手機(jī)翻轉(zhuǎn)手機(jī)翻轉(zhuǎn)n布局亂布局亂n丟失控件丟失控件n如何解決？如何解決？n布局系統(tǒng)！布局系統(tǒng)！WindowsPhone7第第7章章Grid網(wǎng)格布局控件網(wǎng)格布局控件n用途用途n多用在多用在布局參考布局參考，類似網(wǎng)頁中的，類似網(wǎng)頁中的tablen當(dāng)手機(jī)垂直和水平翻轉(zhuǎn)時(shí)，用來布局當(dāng)手機(jī)垂直和水平翻轉(zhuǎn)時(shí)，用來布局Wi

2、ndowsPhone7第第7章章幾個(gè)注意事項(xiàng)幾個(gè)注意事項(xiàng)n默認(rèn)已有了一個(gè)默認(rèn)已有了一個(gè)2行行1列的列的Gridn行行n行們，行的集合行們，行的集合nRowDefinitionsn列列n列們，列的集合列們，列的集合nColumnDefinitionsWindowsPhone7第第7章章一個(gè)十字架布局的一個(gè)十字架布局的GridWindowsPhone7第第7章章高和寬值的含義高和寬值的含義n列：列：n寬寬 Widthn行行n高高HeightnP82、84n=“*”表示除上面幾行以外的高度或?qū)挾缺硎境厦鎺仔幸酝獾母叨然驅(qū)挾萵=“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以上兩個(gè)屬性

4、不寫為以上兩個(gè)屬性不寫為0，表示第一行，第，表示第一行，第一列一列nGrid.RowSpann合并的行有幾個(gè)，默認(rèn)為合并的行有幾個(gè)，默認(rèn)為1nGrid.ColumnSpann合并的列有幾個(gè)，默認(rèn)為合并的列有幾個(gè)，默認(rèn)為1WindowsPhone7第第7章章橫屏、豎屏控件位置改變橫屏、豎屏控件位置改變n解決方法有兩種：解決方法有兩種：n1：將：將Grid的的行和列行和列設(shè)為設(shè)為固定值或比例值固定值或比例值 并在手機(jī)并在手機(jī)水平時(shí)水平時(shí)，將，將TitlePanel不可不可見見(Why?)。WindowsPhone7第第7章章解決方法解決方法2n在代碼中更改在代碼中更改Grid的行高和列寬的行高和列

5、寬事件：事件： 代碼：見下頁代碼：見下頁ncs代碼設(shè)置控件的行和列代碼設(shè)置控件的行和列n (控件名，行控件名，行index)WindowsPhone7第第7章章代碼設(shè)置代碼設(shè)置grid的行和列的行和列Grid的的名字名字Grid的的行們行們數(shù)值可以數(shù)值可以通過界面通過界面設(shè)置知道設(shè)置知道WindowsPhone7第第7章章注意！注意！n解決方法解決方法1中，手機(jī)的橫屏豎屏的變化中，中，手機(jī)的橫屏豎屏的變化中，原來的行會(huì)變?yōu)樽兓蟮牧校瓉淼牧性瓉淼男袝?huì)變?yōu)樽兓蟮牧校瓉淼牧袝?huì)變?yōu)樽兓蟮男校瑫?huì)變?yōu)樽兓蟮男校?即，即，在手機(jī)變化時(shí)在手機(jī)變化時(shí)網(wǎng)格線方向不動(dòng)網(wǎng)格線方向不動(dòng))因此，若不在乎行列變

6、因此，若不在乎行列變化，化，或行列比例都為或行列比例都為1:1可用此方法，否可用此方法，否則不建議使用！則不建議使用！n因此方法因此方法1簡(jiǎn)單但不能被經(jīng)常使用！簡(jiǎn)單但不能被經(jīng)常使用！WindowsPhone7第第7章章多控件布局多控件布局放一個(gè)放一個(gè)Grid控件，控件，容納容納4個(gè)按鈕個(gè)按鈕放一個(gè)放一個(gè)Grid控件，控件，容納容納2個(gè)按鈕個(gè)按鈕WindowsPhone7第第7章章布局練習(xí)布局練習(xí)WindowsPhone7第第7章章更多參考更多參考nMSDNWindowsPhone7第第7章章讀懂代碼讀懂代碼nP85WindowsPhone7第第7章章小課中常見問題小課中常見問題n問題問題1：G

7、rid在水平翻轉(zhuǎn)中發(fā)生奇怪的左在水平翻轉(zhuǎn)中發(fā)生奇怪的左移現(xiàn)象移現(xiàn)象n問題問題2：以：以Grid命名項(xiàng)目，然后不能用命名項(xiàng)目，然后不能用Grid這個(gè)類的任何屬性和方法了這個(gè)類的任何屬性和方法了n問題問題3：cs代碼寫控件代碼寫控件WindowsPhone7第第7章章本節(jié)主要內(nèi)容本節(jié)主要內(nèi)容nCWindowsPhone7第第7章章Canvas畫布布局畫布布局n在畫布布局中在畫布布局中n可以任意移動(dòng)控件可以任意移動(dòng)控件位置位置n可以任意移動(dòng)控件可以任意移動(dòng)控件層次層次n用途：用途：彈出框彈出框、或需要層次疊放的地方、或需要層次疊放的地方nP87n演示：移動(dòng)的小球演示：移動(dòng)的小球WindowsPhon

8、e7第第7章章Canvas類主要方法類主要方法WindowsPhone7第第7章章StackPaneln堆疊布局堆疊布局n可以將自己的子元素按可以將自己的子元素按水平水平或或垂直垂直方向方向依次排依次排開開n排排坐吃果果排排坐吃果果n重要屬性重要屬性nOrientationnHorizontal水平水平nVertical垂直垂直nP89WindowsPhone7第第7章章P90n讀代碼讀代碼WindowsPhone7第第7章章自定義面板自定義面板n有興趣可以自學(xué)有興趣可以自學(xué)n不明白的可以問老師不明白的可以問老師WindowsPhone7第第7章章邊距和對(duì)齊邊距和對(duì)齊nMarginn即為邊距，

9、每個(gè)控件都對(duì)應(yīng)有即為邊距，每個(gè)控件都對(duì)應(yīng)有Margin屬屬性，該屬性決定了每個(gè)性，該屬性決定了每個(gè)UI元素的布局元素的布局n演示演示nMargin的值有時(shí)候會(huì)看起來不起作用的值有時(shí)候會(huì)看起來不起作用n那是因?yàn)樾枰湍鞘且驗(yàn)樾枰虷orizontalAlignment和和VerticalAlignment屬性相結(jié)合屬性相結(jié)合n注意看點(diǎn)擊控件時(shí)的注意看點(diǎn)擊控件時(shí)的箭頭箭頭WindowsPhone7第第7章章補(bǔ)充補(bǔ)充n刪除控件的刪除控件的寬、高、寬、高、Margin屬性，可以屬性，可以使該控件四周緊貼父控件。使該控件四周緊貼父控件。n類的創(chuàng)建和應(yīng)用類的創(chuàng)建和應(yīng)用n演示演示n學(xué)會(huì)用學(xué)會(huì)用Tab Tab

10、在屬性中切換在屬性中切換n學(xué)會(huì)調(diào)用類的方法學(xué)會(huì)調(diào)用類的方法WindowsPhone7第第7章章作業(yè)作業(yè)n無間道無間道(UnderCover)n背景：你是一名隱職業(yè)人員，要查出臥背景：你是一名隱職業(yè)人員，要查出臥底的身份和相關(guān)信息底的身份和相關(guān)信息WindowsPhone7第第7章章作業(yè)作業(yè)ListBox布局不限制格式布局不限制格式可用自己喜歡的布局可用自己喜歡的布局自己定義布局自己定義布局WindowsPhone7第第7章章作業(yè)要求作業(yè)要求n新建一個(gè)類名叫新建一個(gè)類名叫underCovern類有類有5個(gè)屬性個(gè)屬性1個(gè)方法個(gè)方法屬性名屬性名釋義釋義Name名字IsUnderCover是否是臥底CodeName代號(hào)Skill技能SaveDate記錄時(shí)間WindowsPhone7第第7章章作業(yè)要求作業(yè)要求n方法為方法為Save方法，暫時(shí)不寫任何東西方法，暫時(shí)不寫任何東西n要求點(diǎn)過要求點(diǎn)過It is you 按鈕之后，實(shí)例化按鈕之后，實(shí)例化underCover類，給類，給5個(gè)屬性賦值，并調(diào)個(gè)屬性賦值，并調(diào)用用Save方法保存。方法保存。n最后清空各個(gè)控件最后清空各個(gè)控件n作業(yè)可以寫的不夠完整，或者有很多作業(yè)可以寫的不夠