WPF/C#学习笔记.1：WPF中的布局TabControl，Grid与GridSpliter等

WPF/C#学习笔记.1

WPF中的布局TabControl，Grid与GridSpliter等

---

WPF布局原则

由于WPF窗体中只能包含单个元素。为了在WPF窗体中放置多个元素，需要在窗体中布置一个容器(TablControl，StackPanel，Grid等，其中Grid是WPF中功能最强大的布局控件)，然后在这个容器中添加别的元素。

核心布局面板

• StackPanel 在水平或者垂直的堆栈中放置元素。这个布局容器通常用于更大更复杂的窗体中的一些小区域。
• WrapPanel 在一系列可换行的行中放置元素（默认）:在水平（行）方向上，从左向右放置条目；在垂直（列）方向上，自上而下放置条目。
• DockPanel 根据容器的整个边界调整条目。
• Canvas 使用固定坐标绝对定位元素，不适合用于尺寸可变的窗口。一般用于图形绘制，可以在其外层再布置一个ViewBox以实现对Canvas中的图形动态地等比例缩放。
• Grid 根据不可见的表格在行和列中排列元素，这是最灵活和最常用的容器之一。
• GridSplitter Grid面板的分割条，用以实现让用户在使用APP时自己通过拖动分割条动态地决定各个部分占据窗体的比例。可以与别的元素共享一个表格单元，更好的方法是预留一列或一行来放置分割条，并将预留列或行的Width或Height的属性设置为auto。

容器修饰与封装

• Border 装饰元素只能包含一段嵌套内容（通常是布局面板），并为其添加背景或在其周围添加边框（必须设置其BorderBrush和BorderThickness属性才会显示边框效果）。
• ScrollViewer 可以包含任何内容通常用于封装布局容器，使得面板可以滚动以查看超出当前显示范围的内容。

---

WPF代码实例

    
        
            
                
                     
                    
                    
                    
                
                
                    
                    
                    
                
                

                
                    
                

                

                
                    
                        
                        
                            xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                        
                    
                

                

                
                    
                        
                            
                            
                            xxxxxxxxxxxxxxxxxxxxxxxxxxxx
                            
                        
                    
                

                
                


                
                    
                

                
            
        

        
        
        
        
    

布局结果

• 拉伸前

• 拉伸后

Tips

通用属性

• Margin Margin="3" 在元素四周添加Thickness=new Thickness(3,3,3,3)的空间；Margin="0,3,0,0" 在元素四周添加Thickness=new Thickness(0,3,0,0)（顺序依次为：左，上，右，下）的空间。
• Padding 定义元素的内边距，例如TextBlock中的文本距离其边框的距离
• Opacity 不透明系数1-->0（完全透明）

TabControl

• TabStripPlacement 设置选项卡的停靠位置

TabItem

• Header 选项卡中显示的文本

Grid

• ShowGridLines 是否显示网格虚线
• ColumnDefinition Width="auto"，列的宽度取决于其中所包含的最大元素的宽度；Width="2"/Width="8"，列的宽度占未定义的剩余宽度的权重为2/8，若只有这两个列分割剩下的宽度，则宽度切割为2+8=10份，这两个列分别占2份和8份。行高度（Height）的定义与之相同。

Grid子元素属性

• Grid.Column="1" Grid.Row="0" 该子元素占据Grid的行1列0。
• Grid.RowSpan="3"/Grid.ColumnSpan="2" 该子元素穿越Grid的3列/2行布置。

GridSplitter

• VerticalAlignment/HorizontalAlignment GridSplitter外观在垂直/水平方向上的对齐与拉伸
• ResizeDirection ="Rows"/="Columns" GridSplitter对表格的调整方向

DockPanel

• LastChildFill 最后一个子元素占据DockPanel的所有剩余空间。

DockPanel子元素属性。

• DockPanel.Dock 子元素在DockPanel中的位置。

ScrollViewer

• HorizontalScrollBarVisibility/VerticalScrollBarVisibility ="Auto"，APP运行时根据其中具体元素大小自行决定是否启用滚动条。

TextBlock

• TextWrapping 定义当前句子超出文本框时文本框的行为（=“Wrap”,自动排版到下一行）。