XAML 实例演示之三 – Grid 控件的使用

【 tulaoshi.com - Web开发 】

　　下面是一个简单的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仅仅提供结构定义。