初学者 WPF 面板 Grid 和 TextBlocks 示例

• 下载源码 - 24.53 KB

引言

我正在自学 WPF， XAML 以及基本的 .NET 开发。虽然我不是专业开发人员，但我的目标是有一天成为一名优秀的开发人员。 这是我的第一篇文章，它展示了如何使用 XAML 在 WPF 面板中创建网格。 Grid 可能是最可扩展的面板。 Grid 让开发人员可以控制行和列。 可以将 Grid 视为类似于数据库表、WinForms 应用程序中的 数据网格控件 或者可能是一个 HTML 表格，但 Grid 的工作方式与表格不同。 Grid 可能是比表格更好的设置。 下面的截图是最终产品将显示的样子。 

创建 Grid！

Grid 由行和列组成，类似于表格。 我们首先声明 Grid 元素。 然后我们声明一组四个没有任何属性的 RowDefinitions，然后我们声明三个 ColumnDefinitions，与我们声明 RowDefinitions 的方式相同，没有任何属性。 请参阅下面的代码片段

<Window x:Class="WPFPanels_Grid.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Sundeepan's Panel Grids Example" Width="356">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions> 

定义行和列后，我们声明 TextBlock。 以下是第一个 TextBlock 的代码

<TextBlock TextBlock.FontSize="36"
TextBlock.Foreground="Peru"
Background="Bisque"
Grid.Column="0"
Grid.Row="0"
Grid.RowSpan="2">1</TextBlock>   

让我们看看我们在 TextBlock 声明中做了什么。 首先，我们将 FontSize 指定为 36，此大小将反映在 TextBlock 中显示的数字上（请参阅屏幕截图）。 然后，我们将 Foreground 设置为颜色 秘鲁，并将 Background 设置为 米色。 还声明了网格上的行和列位置。 我们将第一个 TextBlock 设置为列 0（第一列）和行 0（第一行），并且此 TextBlock 将跨越由 RowSpan 属性声明的 2 列。 完成所有操作后，接下来我们将 TextBlock 的文本设置为 1。 以下是演示 TextBlock 数字 8 的 ColumnSpan 属性的代码片段。 ColumnSpan 几乎与 RowSpan 相同，只是此 TextBlock 将跨越 3 列，它是不言自明的。

<TextBlock TextBlock.FontSize="36"
Background="Gold"
Grid.Column="0"
Grid.Row="4"
Grid.ColumnSpan="3">8</TextBlock> 

因此，代码声明第一个 TextBlock 将显示数字 "1"，字体大小为 36，foreground 颜色为 秘鲁，background 颜色为 米色。 该块的放置位置将在网格的第 0 列、第 0 行，跨越两行。 请记住，网格没有颜色。 它只是提供配置，网格内的 TextBlock 提供所有属性。

历史

• 2010年3月17日：初始发布