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
Grid element. Then we declare a set of four
RowDefinitions without any properties, and then we declare three
ColumnDefinitions the 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
TextBlock declaration. First we specified the
FontSize to be
36, this size will reflect on the number displayed in the
TextBlock (refer to the screen shot). Then we set the
Foreground to the color
Peru and the
Bisque. The row and column position on the grid is also declared. We set the first
TextBlock to the Column 0 (the first column) and Row 0 (the first row), and this
TextBlock will span 2 columns declared by the
RowSpan property. After all this is done, moving forward we set the text for the
1. Below is a code snippet that demonstrates the
ColumnSpan attribute for
ColumnSpan is almost the same as a
RowSpan except this
TextBlock will span 3 columns, it's pretty much self explanatory.
So the code declares that the first
TextBlock will show the number "
1" with a font size of
36 with the
foreground color as
Peru and the
background color as
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