你好,游客 登录 注册 搜索
背景:
阅读新闻

[WPF] 使用Grid与GridSplitter排版布局 -

[日期:2013-04-04] 来源:  作者: [字体: ]

前言

 

在开发应用程序时,一个很重要的工作项目就是设计用户接口的排版布局。WPF中所提供的Grid控件,让开发人员拥有将版面分割为栏列交错表格区域的能力。而开发人员在使用Grid控件分割版面之后,还可以在版面中加入GridSplitter控件,用以在执行期间提供用户动态调整表格区域大小的功能。

 

本篇文章介绍使用Grid控件与GridSplitter控件,来设计几个常见的基本排版布局,为自己留个纪录也希望能帮助到有需要的开发人员。

 

一上二下布局

 

 

上图是一个一上二下的布局样式,MSDN网站采用这个布局样式来提供各种信息内容。

 

 

  

    
    


    
    



  


  



 

加入GridSplitter控件:
*在第0列、第0栏表格区域下方,附加一个定义为Grid.ColumnSpan="2"的GridSplitter控件,用以提供动态调整上下两列表格区域高度的功能。
*在第1列、第0栏表格区域右方,附加一个GridSplitter控件,用以提供动态调整下方左右两栏表格区域宽度的功能。

 

 

    

        
  
        
            
            
        
        
            
            
        

        
  
        
        
  
        
        

    

 

在完成加入这些Grid控件、GridSplitter控件之后,记得将GridSplitter控件的背景颜色定义为透明色(Background="Transparent"),用以提供漂亮的排版布局。

 

一左二右布局

 

 

上图是一个一左二右的布局样式,Outlook采用这个布局样式来提供各种信息内容。

 

 

  

    
    


    
    



  



  



 

加入GridSplitter控件:
*在第0列、第0栏表格区域右方,附加一个定义为Grid.RowSpan="2"的GridSplitter控件,用以提供动态调整左右两栏表格区域宽度的功能。
*在第0列、第1栏表格区域下方,附加一个GridSplitter控件,用以提供动态调整右方上下两栏表格区域高度的功能。

 

 

    

        
  
        
            
            
        
        
            
            
        

        
  
        
        
        
  
        
        

    

 

在完成加入这些Grid控件、GridSplitter控件之后,记得将GridSplitter控件的背景颜色定义为透明色(Background="Transparent"),用以提供漂亮的排版布局。

 

四分割布局

 

 

上图是一个四分割的布局样式,电视墙采用这个布局样式来提供各种信息内容。

 

 

  

    
    


    
    



  




 

完成这个布局样式可以透过Grid控件,将版面切割为2栏2列的表格。

 

  



 

加入GridSplitter控件:
*在第0列、第0栏表格区域下方,附加一个定义为Grid.ColumnSpan="2"的GridSplitter控件,用以提供动态调整上下两列表格区域高度的功能。
*在第0列、第0栏表格区域右方,附加一个定义为Grid.RowSpan="2"的GridSplitter控件,用以提供动态调整左右两栏表格区域宽度的功能。

 

 

    

        
  
        
            
            
        
        
            
            
        

        
  
        
        
        
        

        
  
        
        

    

 

在完成加入这些Grid控件、GridSplitter控件之后,记得将GridSplitter控件的背景颜色定义为透明色(Background="Transparent"),用以提供漂亮的排版布局。

 

原始码下载

 

点此下载原始码:GridLayoutSample.rar







收藏 推荐 打印 | 录入:admin | 阅读:
相关新闻