I am in the process of teaching myself WPF, XAML and basically general .NET development. Although I am not a professional developer, my goal is to become a good developer one day. This is my first article and it shows how one can use XAML to create grids in a WPF panel. A Grid is probably the most extensible panel available. A Grid gives the developer control over both rows and columns. One can consider a Grid to be similar to a database table, a data grid control in a WinForms application or maybe an HTML Table, but Grids work differently than tables. Grids are probably a better setup than their table counterpart. The screenshot below is what the end product will look like.
Creating the Grid!
A Grid is composed of rows and columns similar to a table. We first start by declaring the
Gridelement. Then we declare a set of four
RowDefinitionswithout any properties, and then we declare three
ColumnDefinitionsthe same way we declared the
RowDefinitions, without any properties. See the code snippet below:
Title="Sundeepan's Panel Grids Example" Width="356">
After the Rows and Columns are defined, we declare the
TextBlocks. Below is the code for the first
Let's see what we did in the
TextBlockdeclaration. First we specified the
36, this size will reflect on the number displayed in the
TextBlock(refer to the screen shot). Then we set the
Foregroundto the color
Bisque. The row and column position on the grid is also declared. We set the first
TextBlockto the Column 0 (the first column) and Row 0 (the first row), and this
TextBlockwill span 2 columns declared by the
RowSpanproperty. After all this is done, moving forward we set the text for the
1. Below is a code snippet that demonstrates the
ColumnSpanis almost the same as a
TextBlockwill span 3 columns, it's pretty much self explanatory.
So the code declares that the first
TextBlockwill show the number "
1" with a font size of
Bisque. The placement of the block will be in column 0, row 0 of the grid spanning two rows. Keep in mind that the grid has no colors. It is simply supplying the configuration, the
TextBlocks inside the grids provide all the attributes.
- 17th March, 2010: Initial post