Introduction
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:
<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>
After the Rows and Columns are defined, we declare the TextBlocks. Below is the code for the first TextBlock:
<TextBlock TextBlock.FontSize="36"
TextBlock.Foreground="Peru"
Background="Bisque"
Grid.Column="0"
Grid.Row="0"
Grid.RowSpan="2">1</TextBlock>
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 Background to 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 TextBlock to 1. Below is a code snippet that demonstrates the ColumnSpan attribute for TextBlock number 8. ColumnSpan is almost the same as a RowSpan except this TextBlock will span 3 columns, it's pretty much self explanatory.
<TextBlock TextBlock.FontSize="36"
Background="Gold"
Grid.Column="0"
Grid.Row="4"
Grid.ColumnSpan="3">8</TextBlock>
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.
History
- 17th March, 2010: Initial post
