Click here to Skip to main content
Click here to Skip to main content
Go to top

Beginner WPF Panels Grid with TextBlocks Example

, 17 Mar 2010
Rate this:
Please Sign up or sign in to vote.
How to create TextBlocks inside a WPF Grid

Introduction

I am in the process of teaching myself WPFXAML 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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Sundeepan Sen
Systems Engineer
United States United States
Sundeepan Sen has been involved with technology for as long as he can remember. He got his start with the internet as a sophomore in high school in 1995 at the age of 15 and hasn't stopped since. His first encounter with the Internet was on a 2400 baud modem on a VAX/VMS shell account. The first program he wrote is in assembly for a game called "Core War" it can be found here:
 
http://para.inria.fr/~doligez/corewar/post/JUMP.txt
 
He likes all things technology and loves to learn anything that comes his way.
 
Sundeepan is also artistically gifted with music, graphics, drawing and poetry.
 
He is a Network Consultant providing services with the latest Microsoft technologies.

Comments and Discussions

 
GeneralWPF Grid panel PinmemberWPFAdmin18-Jan-13 23:40 
GeneralMy vote of 5 PinmemberFluffyDucktheLegend29-Oct-10 0:59 
GeneralMy vote of 1 Pinmemberddanz25-Mar-10 8:31 
GeneralRe: My vote of 1 PinmemberFluffyDucktheLegend29-Oct-10 0:59 
GeneralMy vote of 2 PinmemberJohn Brett17-Mar-10 5:47 
GeneralRe: My vote of 2 PinmemberSundeepan Sen17-Mar-10 6:36 
GeneralMy vote of 1 Pinmemberjimmson17-Mar-10 4:00 
GeneralRe: My vote of 1 PinmemberSundeepan Sen17-Mar-10 7:23 
GeneralRe: My vote of 1 [modified] Pinmembereroszamp5-Nov-10 6:19 
I liked it. There are some beginners here too :
)

modified on Monday, November 15, 2010 7:57 AM

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140922.1 | Last Updated 17 Mar 2010
Article Copyright 2010 by Sundeepan Sen
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid