zhu894532094 发表于 2015-5-9 09:36:10

Windows phone 7之页面布局

  Windows phone的页面布局方式一般是依赖布局控件实现的,而布局控件有三种Grid,StackPanel和Canvas
  Grid是网格布局方式,相当于一个表格,有行和列,新建一个Windows phone项目,打开MainPage.xaml,页面呈现内容的核心代码如下




      
            
            
      
      
      
            
            
      
      
      
   
  看到代码中用的了两种布局方式Grid和StackPanel,这也是windows phone最常用的两种布局方式,在布局中Canvas不常用,当然这不代表他没用,在一些xaml绘制logo,那Canvas在核实不过了,Grid和StackPanel无法将之取代。
  1、Grid
  看下面的代码




      
            
            
      
      
      
            
            
      
      
      
            
               
               
               
            
            
               
               
               
            
            
            
            
            
            
            
            
            
            
      
   
  运行效果如下图

  在name为ContentPanel的Grid中加入三行三列,也是一个容器,在内部放几个RowDefinition,就表明Grid有几行,中放几个ColumnDefinition就有几列看
还有就是,RowDefinition只是用来定义列的,列中的内容不是直接放在RowDefinition标签下,而是放在Grid标签下,通过Grid.Row和Grid.Column来定义内容属于哪一行哪一列,默认是第0行,第0列,所以如果是放在0行Grid.Row可以不用写,如果是放在0列Grid.Column不用写,就想上面的代码。
  Grid中RowDefinition能够定义Height属性,表示高度,不能定义宽度,ColumnDefinition能够定义Width,表示宽度,不能定义高度,所以最终的宽度和高度是两者共同决定的
  Height和Width属性是枚举类型,可以有三个选项,填入具体是,就是固定的高或宽,填入Auto关键字,就是根据行和咧中的子空间的高和宽决定,一最大的为准,填入星号*,就是占据剩余部分,比如我第一行,Height填入100,升入两行诗*,则表明第一行为100,二三行平分Grid剩余的部分,比如Grid的Height是500,那剩余的部分就是400,而三行每行200.
  实际中很少出现特别正规的行列分布,往往有的子控件要跨行或跨列,Grid.RowSpan表示跨行,Grid.ColumnSpan表示跨列
  看下面的代码




            
               
               
               
            
            
               
               
               
            
            
            
            
            
            
            
            
      
  运行效果如下图

  2、StackPanel
  StackPanel是一个比较简单的容器,可以将子控件进行横排或竖排(默认是竖排),不能同时横排和竖排,如果是想实现横排和竖排一起出现的效果,就要使用子控件嵌套活着布局控件嵌套
  Orientation属性是一个枚举类型,Horizontal表示横排,Vertical表示竖排
  看下面的代码和运行效果




            
               
               
            
            
               
               
               
            
            
               
               
               
            
      

  3、Canvas
  Canvas是画布布局方式,是一个绝对定位的布局控件,他是以左上角(0,0)为标准,将子控件摆放到其中,用Cancas.eft和Cancas.Right决定距离左上角的偏移量,可以是负值,如果出现控件重叠的状况可以通过Canvas.Zindex属性控制,Zindex大的会覆盖小的
  看下面代码和运行效果




               
               
                  
               
               
               
            

  另外,每个控件都有布局的属性,Margin之类的接下来的文章中将介绍不同控件的用法和属性,会介绍布局属性,今天的内容中,有关布局属性,不是很明白的童鞋不用急
  
  我的新浪微博昵称是“@马蔬菜”,希望大家多关注,谢谢
  
页: [1]
查看完整版本: Windows phone 7之页面布局