ARTICLE

Working with WPF Table using XAML - Part I

Posted by Bechir Bejaoui in Articles | WPF on August 12, 2008

In this article, I will use WPF table in XAML format. This one defines a flexible grid area that contains rows and columns. At the contrast of the Grid object witch is defined in the System.Windows.Controls, the table object is defined in the System.Windows.Documents namespace.

Tweet
25195
0

Reader Level: Intermediate

In this article, I will try to make a representation of the Table object. This one defines a flexible grid area that contains rows and columns. At the contrast of the Grid object witch is defined in the System.Windows.Controls, the table object is defined in the System.Windows.Documents namespace. Even though the Table object and the Grid object have several common features, there are some differences such as the Grid objects elements are based on row and column index, in the other hand, the Table elements are based on a sub element that called TableRow, TableColumn and TableCell as we will see in the later example. Moreover, and at the contrast of the grid element, the Table element must be contained in one of those containers.

FlowDocuement
TableCell
ListBoxItem
ListViewItem
Section
Floater
Figure

In the other hand, Table object has more capabilities over the grid element. However, it needs more resources. Within a Table object, Rows must be contained in a TableRowGroup element. Each row in the table contains one or more Table cells objects represented by TableCell elements, the number of the Table cells must be equal to the defined columns number. The columns are defined first, then come the rows groups those host table rows elements witches host the Tab cells witches host the blocs such as Paragraph elements. I guess it isn't very clear until now; therefore, I invite you to parse the following representation.

Figure 1

Now, let's see how to define a table using XAML through this example:

In this followed example, I will make a representation sample of the North African countries except the Egypt using a table object. To do so, copy and paste the bellow code in the XAML editor:

<Window x:Class="myWpfApplication.Window1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:wf="clr-namespace:System.Windows.Forms.Integration;assembly=WindowsFormsIntegration"

Title="Window1" Height="287" Width="596" xmlns:my="clr-namespace:System.Windows.Forms.Integration;assembly=WindowsFormsIntegration"

Loaded="Window_Loaded" >

<Table>

<Table.Columns>

<Table.Columns/>

<Paragraph FontSize="14"

FontWeight="Bold"

Foreground="White">

Country

</Paragraph>

</TableCell>

<Paragraph FontSize="14"

FontWeight="Bold"

Foreground="White">

Flag

</Paragraph>

</TableCell>

<Paragraph FontSize="14"

FontWeight="Bold"

Foreground="White">

Calling code

</Paragraph>

</TableCell>

<Paragraph FontSize="14"

FontWeight="Bold"

Foreground="White">

Internet TLD

</Paragraph>

</TableCell>

<Paragraph FontSize="14"

FontWeight="Bold"

Foreground="White">

Time zone

</Paragraph>

</TableCell>

</TableRow>

<Paragraph FontSize="12"

Foreground="Navy">

Lybia

</Paragraph>

</TableCell>

<Paragraph FontSize="12"

Foreground="Navy">

</Paragraph>

</TableCell>

<Paragraph FontSize="12"

Foreground="Navy">

218

</Paragraph>

</TableCell>

<Paragraph FontSize="12"

Foreground="Navy">

.ly

</Paragraph>

</TableCell>

<Paragraph FontSize="12"

Foreground="Navy">

GMT + 2

</Paragraph>

</TableCell>

</TableRow>

<Paragraph FontSize="12"

Foreground="Navy">

Tunisia

</Paragraph>

</TableCell>

<Paragraph FontSize="12"

Foreground="Navy">

</Paragraph>

</TableCell>

<Paragraph FontSize="12"

Foreground="Navy">

216

</Paragraph>

</TableCell>

<Paragraph FontSize="12"

Foreground="Navy">

.tn

</Paragraph>

</TableCell>

<Paragraph FontSize="12"

Foreground="Navy">

GMT + 1

</Paragraph>

</TableCell>

</TableRow>

<Paragraph FontSize="12"

Foreground="Navy">

Algeria

</Paragraph>

</TableCell>

<Paragraph FontSize="12"

Foreground="Navy">

</Paragraph>

</TableCell>

<Paragraph FontSize="12"

Foreground="Navy">

213

</Paragraph>

</TableCell>

<Paragraph FontSize="12"

Foreground="Navy">

.dz

</Paragraph>

</TableCell>

<Paragraph FontSize="12"

Foreground="Navy">

GMT + 1

</Paragraph>

</TableCell>

</TableRow>

<Paragraph FontSize="12"

Foreground="Navy">

Morroco

</Paragraph>

</TableCell>

<Paragraph FontSize="12"

Foreground="Navy">

</Paragraph>

</TableCell>

<Paragraph FontSize="12"

Foreground="Navy">

212

</Paragraph>

</TableCell>

<Paragraph FontSize="12"

Foreground="Navy">

.ma

</Paragraph>

</TableCell>

<Paragraph FontSize="12"

Foreground="Navy">

GMT

</Paragraph>

</TableCell>

</TableRow>

<Paragraph FontSize="12"

Foreground="Navy">

Mauritania

</Paragraph>

</TableCell>

<Paragraph FontSize="12"

Foreground="Navy">

</Paragraph>

</TableCell>

<Paragraph FontSize="12"

Foreground="Navy">

222

</Paragraph>

</TableCell>

<Paragraph FontSize="12"

Foreground="Navy">

.mr

</Paragraph>

</TableCell>

<Paragraph FontSize="12"

Foreground="Navy">

GMT

</Paragraph>

</TableCell>

</TableRow>

</TableRowGroup>

</Table>

</FlowDocument>

</Window>

Then download the flags images and name them as follow:

Image reachable from	Rename it as
http://en.wikipedia.org/wiki/Tunisia	TunisianFlag.png
http://en.wikipedia.org/wiki/Algeria	AlgerianFlag.png
http://en.wikipedia.org/wiki/Morroco	MorrocoFlag.png
http://en.wikipedia.org/wiki/Lybia	LybianFlag.png
http://en.wikipedia.org/wiki/Mauritania	MauritanianFlag.png