WPF笔记(1.4 布局)——Hello,WPF!

原文:WPF笔记(1.4 布局)——Hello,WPF!

这一节只是第2章的引子。
布局要使用Panel控件,有四种Panel,如下:
DockPanel,就是设置停靠位置布局模型。
StackPanel,提供一个从左至右或从上至下放置内容的堆栈模型。
Grid,提供一个允许进行 行/网格定位的模型。可使用表格。
Canvas,可精确定位。

其中,Grid是最常用的,vs2005自动生成的Page和window都默认带有这个标签:

WPF笔记(1.4 布局)——Hello,WPF!Example 1-25. A sample usage of the Grid panel
WPF笔记(1.4 布局)——Hello,WPF!
<Window WPF笔记(1.4 布局)——Hello,WPF!>
WPF笔记(1.4 布局)——Hello,WPF!  
<Grid>
WPF笔记(1.4 布局)——Hello,WPF!    
<Grid.RowDefinitions>
WPF笔记(1.4 布局)——Hello,WPF!      
<RowDefinition />
WPF笔记(1.4 布局)——Hello,WPF!      
<RowDefinition />
WPF笔记(1.4 布局)——Hello,WPF!      
<RowDefinition />
WPF笔记(1.4 布局)——Hello,WPF!    
</Grid.RowDefinitions>
WPF笔记(1.4 布局)——Hello,WPF!    
<Grid.ColumnDefinitions>
WPF笔记(1.4 布局)——Hello,WPF!      
<ColumnDefinition />
WPF笔记(1.4 布局)——Hello,WPF!      
<ColumnDefinition />
WPF笔记(1.4 布局)——Hello,WPF!      
<ColumnDefinition />
WPF笔记(1.4 布局)——Hello,WPF!    
</Grid.ColumnDefinitions>
WPF笔记(1.4 布局)——Hello,WPF!    
<Button Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2">A</Button>
WPF笔记(1.4 布局)——Hello,WPF!    
<Button Grid.Row="0" Grid.Column="2">C</Button>
WPF笔记(1.4 布局)——Hello,WPF!    
<Button Grid.Row="1" Grid.Column="0" Grid.RowSpan="2">D</Button>
WPF笔记(1.4 布局)——Hello,WPF!    
<Button Grid.Row="1" Grid.Column="1">E</Button>
WPF笔记(1.4 布局)——Hello,WPF!    
<Button Grid.Row="1" Grid.Column="2">F</Button>
WPF笔记(1.4 布局)——Hello,WPF!    
<Button Grid.Row="2" Grid.Column="1">H</Button>
WPF笔记(1.4 布局)——Hello,WPF!    
<Button Grid.Row="2" Grid.Column="2">I</Button>
WPF笔记(1.4 布局)——Hello,WPF!  
</Grid>
WPF笔记(1.4 布局)——Hello,WPF!
</Window>
这段程序产生一个3x3表格。注意,先定义行格式,再定义列格式,最后是往单元格放入button。

WPF笔记(1.4 布局)——Hello,WPF!Example 1-26. Arranging an image and text in a grid
WPF笔记(1.4 布局)——Hello,WPF!
<Button Width="100" Height="100">
WPF笔记(1.4 布局)——Hello,WPF!  
<Button.Content>
WPF笔记(1.4 布局)——Hello,WPF!    
<Grid>
WPF笔记(1.4 布局)——Hello,WPF!      
<Grid.RowDefinitions>
WPF笔记(1.4 布局)——Hello,WPF!        
<RowDefinition />
WPF笔记(1.4 布局)——Hello,WPF!        
<RowDefinition />
WPF笔记(1.4 布局)——Hello,WPF!      
</Grid.RowDefinitions>
WPF笔记(1.4 布局)——Hello,WPF!      
<Image Grid.Row="0" Source="tom.png" />
WPF笔记(1.4 布局)——Hello,WPF!      
<TextBlock
WPF笔记(1.4 布局)——Hello,WPF!        Grid.Row
="1"
WPF笔记(1.4 布局)——Hello,WPF!        HorizontalAlignment
="Center">Tom</TextBlock>
WPF笔记(1.4 布局)——Hello,WPF!    
</Grid>
WPF笔记(1.4 布局)——Hello,WPF!  
</Button.Content>
WPF笔记(1.4 布局)——Hello,WPF!
</Button>
这段程序是在图片下面加了一行Caption,也是用的Grid下表格排版。

以上两个例子都有Grid.Row=1这样的语法——attached-property牵连属性。即在Grid内部定义(),在外部控件Button中指定属性值。
牵连属性的用途,事先不一定用Button填充单元格,这样对所有控件就有任意性——暂时这么想,因为没看第二章。
上一篇:CSDN-markdown编辑器插入网上或本地电脑上的图片


下一篇:Flash/Flex学习笔记(1):Hello World!