XAML 实例演示之三 – Grid 控件的使用
XAML 系列文章为学习笔记，这是我今年春节期间安排的学习任务。
前面系列文章：
本文简单介绍Grid 控件的使用。标识（Markup）语言的一个挑战是实现准确的页面元素布局，XAML 实现的方法是采用Panel元素。最灵活的Panel可能就是Grid了，Grid 允许控制行、列，就像HTML语言中的table一样。
下面是一个简单的Grid控件的范例：
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Programming .NET 3.5 | Understanding Grids">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock TextBlock.FontSize="36"
TextBlock.Foreground="White"
Background="Blue"
Grid.Column="0"
Grid.Row="0"
Grid.RowSpan="2">1</TextBlock>
<TextBlock TextBlock.FontSize="36"
Background="Gold"
Grid.Column="1"
Grid.Row="0" >2</TextBlock>
<TextBlock TextBlock.FontSize="36"
TextBlock.Foreground="White"
Background="Crimson"
Grid.Column="2"
Grid.Row="0" >3</TextBlock>
<TextBlock TextBlock.FontSize="36"
Background="White"
Grid.Column="1"
Grid.Row="1"
Grid.ColumnSpan="2">4</TextBlock>
<TextBlock TextBlock.FontSize="36"
TextBlock.Foreground="White"
Background="Purple"
Grid.Column="0"
Grid.Row="2" >5</TextBlock>
<TextBlock TextBlock.FontSize="36"
TextBlock.Foreground="White"
Background="Green"
Grid.Column="1"
Grid.Row="2" >6</TextBlock>
<TextBlock TextBlock.FontSize="36"
TextBlock.Foreground="White"
Background="Black"
Grid.Column="2"
Grid.Row="2" >7</TextBlock>
</Grid>
</Window>
在Kaxaml 工具中的演示效果如下：
本范例代码首先定义一个Grid 元素，接着分别定义三个 RowDefinitions 和 ColumnDefinitions。接下来逐个定义TextBox元素：
<TextBlock TextBlock.FontSize="36"
TextBlock.Foreground="White"
Background="Blue"
Grid.Column="0"
Grid.Row="0"
Grid.RowSpan="2">1</TextBlock>
FontSize 指定字体大小，Foreground 指定文字颜色，Column和Row 属性分别指定列、行位置坐标，RowSpan 与 HTML 基本一致，表示占用多少行，类似的一个属性是ColumnSpan。
有趣的是，Grid 控件自身没有颜色，Grid中的TextBlocks 控件提供颜色，Grid仅仅提供结构定义。