3. 

        <meter id="pryje"><nav id="pryje"><delect id="pryje"></delect></nav></meter>
          <label id="pryje"></label>
          
	
	
          
		
			
		
          
    
    	
          
  		
          
		    
          
		      
		      
		      
		    
          
  		
          
  		
          
	
          


	


          
		
          
		            
            
        		
          
		
          







          


          
	
	
          
		
          新聞中心
          
	
          
	
          
	
          EEPW首頁 
	 > 嵌入式系統(tǒng) > 設(shè)計應(yīng)用 > Windows Phone開發(fā)（5）：室內(nèi)裝修
          
    
          

          

          


	
	
	

          
	
          
		
          
			
          Windows Phone開發(fā)（5）：室內(nèi)裝修
          
						
          
				作者：
				時間：2016-09-12
				來源：網(wǎng)絡(luò)
				
				
				
				
				收藏
			
          

			
          
				
				
			
          

			
          
			
			
          
			
			
          
				
				
			
          
                
			
          為什么叫室內(nèi)裝修呢？呵呵，其實說的是布局，具體些嘛，就是在一個頁面中，你如何去擺放你的控件，如何管理它們，你說，像不像我們剛搬進新住所，要  “裝修”一番？買一套什么樣的茶幾和杯具（我說的“杯具”指的是原意，不要理解錯了），或者沙發(fā)什么的，該怎么放，擺在哪里好看，其實，我們做界面設(shè)計也是差不多這個道理。
          本文引用地址：http://www.ex-cimer.com/article/201609/303397.htm
          相信我們下過象棋就知道，棋盤上有橫向的，縱向的很多網(wǎng)格線，而棋子就是參照這些網(wǎng)格線來放置的，對，在WP頁面布局中我們把這樣的布局稱為網(wǎng)格布局，對應(yīng)的控件為Grid。
          千萬別小看這個Grid控件，它可是非常好用的，而且也比較靈活，對的，當(dāng)我們創(chuàng)建一個新頁面時，VS為我們生生的XAML中，正是使用了Grid控件進行布局的。
          既然是網(wǎng)格了，肯定會有行和列的，而我們的控件就是按需要放到由這些行和列共同產(chǎn)生的單元格中，就是我們在做網(wǎng)頁排版時用到的table標(biāo)簽，應(yīng)該說是非常類似的。
          下面我們一起動手做個小練習(xí)，通過這個練習(xí)，我們可以從一種更直觀的角度去了解Grid控件的用法。
          1、啟動VS，新建一個WP應(yīng)用程序，不用我多說了，都會了。
          2、刪除頁面中的根Grid，整個刪除。如下圖所示。
          3、然后，替換為以下XAML代碼。
          [html]
          1. Gridx:Name=Root>
          2. Grid.ColumnDefinitions>
          3. ColumnDefinitionWidth=*/>
          4. ColumnDefinitionWidth=*/>
          5. /Grid.ColumnDefinitions>
          6. Grid.RowDefinitions>
          7. RowDefinitionHeight=*/>
          8. RowDefinitionHeight=*/>
          9. /Grid.RowDefinitions>
          10. /Grid>
          這樣我們就定義了一個兩行兩列的網(wǎng)格布局，也就是整個頁面被劃分為4個方塊。
          先簡單說一下行的高，列的寬的表示方法，如果你用過WPF，你應(yīng)該很清楚了。
          （1）可以用數(shù)值，double類型，如120.667，這個數(shù)字與屏幕分辨率無關(guān)，運行運行庫會自行調(diào)整；
          （2）*：這個星號是什么意思呢？就像上面的例子，我都用了*，這么說是說不清楚的，我舉個例子吧。
          比如，我把一個網(wǎng)格分為3行，而每一行的高度都是*，則表示三個行的高度是平均分配的，都占整個網(wǎng)格高度的1/3.
          如果我第一行的高為2*，第二行的高為*，第三行的高為3*，那么又該如何分配呢？
          先別急，把上面的代碼改一下，我們就可以直觀地看到效果了。為了方便觀察，我把ShowGridLines的值改為True，這樣網(wǎng)格線就會顯示。
          [html]
          1. Gridx:Name=RootShowGridLines=True>
          2. Grid.RowDefinitions>
          3. RowDefinitionHeight=2*/>
          4. RowDefinitionHeight=*/>
          5. RowDefinitionHeight=3*/>
          6. /Grid.RowDefinitions>
          7. /Grid>
          好，現(xiàn)在我們看看設(shè)計視圖上面顯示的結(jié)果。
          其實上面三行的高分別為2*，1*和3*，1可以省略，它的意思就是把整個網(wǎng)格的高度平均分成2 + 1 + 3 =  6份，而2*就占其中2份，1*就占其中1份，3*就占其中3份，也就是說，它們分別占總高度的2/6，1/6，3/6.
          怎么樣，找到規(guī)律了嗎？
          再來一例。
          [html]
          1. Gridx:Name=RootShowGridLines=True>
          2. Grid.RowDefinitions>
          3. RowDefinitionHeight=3*/>
          4. RowDefinitionHeight=7*/>
          5. /Grid.RowDefinitions>
          6. /Grid>
          這時候，我們再看看設(shè)計視圖有啥變化？
          上面的示例是把整個容器的高度平均分為 3 + 7 = 10  份，而第一行的高度占總高度的3/10，第二行的高度占總高度的7/10.
          現(xiàn)在明白了一些了沒？
          再看看下面的例子：
          [html]
          1. Gridx:Name=RootShowGridLines=True>
          2. Grid.RowDefinitions>
          3. RowDefinitionHeight=86/>
          4. RowDefinitionHeight=5*/>
          5. RowDefinitionHeight=3*/>
          6. /Grid.RowDefinitions>
          7. /Grid>
          同理，第一行固定86，這是一個絕對的值，然后呢，把剩下的高度，就是除了86之外的，平均分為 5 + 3 = 8  份，第二行占了剩下的高度的5/8，第三行占了剩下的高度的3/8.
          （3）Auto，不用多解釋，從單詞的含義就知道了，就是根內(nèi)容自動調(diào)整。
          列的定義與行是相類似的，只不過列定義寬度，行定義高度而已。
          如果以上三種值同時出現(xiàn)呢？原理是一樣的，自己思考一下吧，不懂的就多寫代碼觀察。
          那么，我們?nèi)绾伟褍?nèi)容放到對應(yīng)的單元格內(nèi)呢？Grid的行序號和列序號是從0開始的，如第一列就是0，第二行就是1等，具體怎么操作呢？
          在聲明其內(nèi)容時，通過附加屬性來確定內(nèi)容應(yīng)放在哪個單元格，如下面例子。
          [html]
          1. Gridx:Name=RootShowGridLines=True>
          2. Grid.RowDefinitions>
          3. RowDefinitionHeight=*/>
          4. RowDefinitionHeight=*/>
          5. /Grid.RowDefinitions>
          6. Grid.ColumnDefinitions>
          7. ColumnDefinitionWidth=*/>
          8. ColumnDefinitionWidth=*/>
          9. /Grid.ColumnDefinitions>
          10. !--內(nèi)容-->
          11. TextBlockGrid.Column=0Grid.Row=0Text=第1行第1列FontSize=35/>
          12. RectangleFill=YellowGrid.Column=1Grid.Row=0Margin=68/>
          13. ButtonGrid.Column=0Grid.Row=1Content=第2行第1列FontSize=32/>
          14. EllipseFill=BlueHeight=95Width=180Grid.Column=1Grid.Row=1/>
          15. /Grid>
          運行效果如下：
          好了，網(wǎng)格布局就吹到這里，下面接著看另一個較簡單的布局——StackPanel，嗯，它是一個面板，它的子內(nèi)容的布局非常簡單，就兩種方式：橫向和縱向，它是沿直線分布的，要么水平，要么垂直，反正是線性分布，就類似于我們說的數(shù)據(jù)結(jié)構(gòu)中的棧隊列，先進后出。
          例一，水平布局。
          [html]
          1. StackPanelOrientation=HorizontalHeight=100>
          2. ButtonContent=按鈕1/>
          3. ButtonContent=按鈕2/>
          4. ButtonContent=按鈕3/>
          5. /StackPanel>
          效果如下：
          例二：垂直布局。
          [html]
          1. StackPanelOrientation=VerticalWidth=300>
          2. TextBlockText=文本一FontSize=80/>
          3. TextBlockText=文本二FontSize=80/>
          4. TextBlockText=文本三FontSize=80/>
          5. /StackPanel>

          運行效果如下：
          （圖6）運行效果如下：
          最后，我們來看看還有一種通過絕對定位的布局控件——Canvas。
          它就像我們的二維坐標(biāo)系，但與我們在平面幾何中不同的是，Canvas的原點在左上角，相信寫過可視化程序的朋友都知道了。
          要注意的是，Canvas不知道具體要為哪些子內(nèi)容設(shè)置坐標(biāo)，所以，它的Top和Left值視具體情況而定，因此這兩個屬性都是附加屬性，也就是它附加在放置在Canvas中的子元素要設(shè)置的具本位置而使用，所以每個子元素的定位都通過附加的Canvas.Top和Canvas.Left來設(shè)置。
          [html]
          1. Canvas>
          2. RectangleFill=OrangeCanvas.Left=37Canvas.Top=116Height=165Width=220/>
          3. PathData=M0,0L0,8L12,8ZFill=Silver
          4. Canvas.Left=127
          5. Canvas.Top=204
          6. Width=260
          7. Height=235Stretch=Fill/>
          8. /Canvas>

          還有的是，ZIndex是用于設(shè)置子元素的順序，從0開始，默認(rèn)為0，值越大，它越在頂層，比如上面的例子，我們發(fā)現(xiàn)，后面添加的三角形把前一個矩形擋住了，那如何讓矩形在其它圖形之上呢？對，把ZIndex設(shè)置一個較大的值就行了，如：
          [html]
          1. Canvas>
          2. RectangleFill=OrangeCanvas.Left=37Canvas.Top=116
          3. Height=165Width=220
          4. Canvas.ZIndex=1/>
          5. PathData=M0,0L0,8L12,8ZFill=Silver
          6. Canvas.Left=127
          7. Canvas.Top=204
          8. Width=260
          9. Height=235Stretch=Fill/>
          10. /Canvas>

                                               
				
            
                
			
							
          
                
			              
              
            
          
		
          
		
          
		
          
		
          
		
          
			
            
				
          • 
					
					
			  	
            • 
			  	
          • 
					
					
			  	
            • 
			  	
          • 
					
					
			  	
            • 
				
          • 
					
					
				
            • 
				
          • 
					
					
				
            • 
			
          
			
          
		
          
		
		
          
		
          
			
			
		
          
        
		
          
			
          關(guān)鍵詞：
            			            Windows
                        Phone
                        
                        
            
          
            
			
          
		
          	
		

	

          
	
	
          
		
          
			
          評論
          					
		
          
		
          
			
          
			
				
          
					
					
          
						
                        
					
          
				
          
                		
						
						
			
          
		
          
		
          
		
          
            
			
            
		
          
	
          
	
          
	
          
		

          
	
          
		
          相關(guān)推薦
          					
	
          
	
    
	

          		

          


	
          
	
          
		
		
	
          


    
          
        
          技術(shù)專區(qū)
          
      
          
      
          
			
      
           
       

          

   











          
	
          
	    關(guān)閉
	
          
	
	

          







	
	





          



          


看屁屁www成人影院,亚洲人妻成人图片,亚洲精品成人午夜在线,日韩在线 欧美成人

(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
    }
    else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();