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.
![XamlTableImg1.jpg]()
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" >
<FlowDocument>
<Table>
<Table.Columns>
<TableColumn/>
<TableColumn/>
<TableColumn/>
<TableColumn/>
<Table.Columns/>
<TableRowGroup>
<!--Row header-->
<TableRow Background="Navy">
<TableCell>
<Paragraph FontSize="14"
FontWeight="Bold"
Foreground="White">
Country
</Paragraph>
</TableCell>
<TableCell>
<Paragraph FontSize="14"
FontWeight="Bold"
Foreground="White">
Flag
</Paragraph>
</TableCell>
<TableCell>
<Paragraph FontSize="14"
FontWeight="Bold"
Foreground="White">
Calling code
</Paragraph>
</TableCell>
<TableCell>
<Paragraph FontSize="14"
FontWeight="Bold"
Foreground="White">
Internet TLD
</Paragraph>
</TableCell>
<TableCell>
<Paragraph FontSize="14"
FontWeight="Bold"
Foreground="White">
Time zone
</Paragraph>
</TableCell>
</TableRow>
<!--Lybia data-->
<TableRow Background="White">
<TableCell>
<Paragraph FontSize="12"
Foreground="Navy">
Lybia
</Paragraph>
</TableCell>
<TableCell>
<Paragraph FontSize="12"
Foreground="Navy">
<Image Source="LybianFlag.png" Width="30" Height="15"></Image>
</Paragraph>
</TableCell>
<TableCell>
<Paragraph FontSize="12"
Foreground="Navy">
218
</Paragraph>
</TableCell>
<TableCell>
<Paragraph FontSize="12"
Foreground="Navy">
.ly
</Paragraph>
</TableCell>
<TableCell>
<Paragraph FontSize="12"
Foreground="Navy">
GMT + 2
</Paragraph>
</TableCell>
</TableRow>
<!--Tunisia data-->
<TableRow Background="Azure">
<TableCell>
<Paragraph FontSize="12"
Foreground="Navy">
Tunisia
</Paragraph>
</TableCell>
<TableCell>
<Paragraph FontSize="12"
Foreground="Navy">
<Image Source="TunisianFlag.png" Width="30" Height="15"></Image>
</Paragraph>
</TableCell>
<TableCell>
<Paragraph FontSize="12"
Foreground="Navy">
216
</Paragraph>
</TableCell>
<TableCell>
<Paragraph FontSize="12"
Foreground="Navy">
.tn
</Paragraph>
</TableCell>
<TableCell>
<Paragraph FontSize="12"
Foreground="Navy">
GMT + 1
</Paragraph>
</TableCell>
</TableRow>
<!--Algeria data-->
<TableRow Background="White">
<TableCell>
<Paragraph FontSize="12"
Foreground="Navy">
Algeria
</Paragraph>
</TableCell>
<TableCell>
<Paragraph FontSize="12"
Foreground="Navy">
<Image Source="AlgerianFlag.png" Width="30" Height="15"></Image>
</Paragraph>
</TableCell>
<TableCell>
<Paragraph FontSize="12"
Foreground="Navy">
213
</Paragraph>
</TableCell>
<TableCell>
<Paragraph FontSize="12"
Foreground="Navy">
.dz
</Paragraph>
</TableCell>
<TableCell>
<Paragraph FontSize="12"
Foreground="Navy">
GMT + 1
</Paragraph>
</TableCell>
</TableRow>
<!--Morroco data-->
<TableRow Background="Azure">
<TableCell>
<Paragraph FontSize="12"
Foreground="Navy">
Morroco
</Paragraph>
</TableCell>
<TableCell>
<Paragraph FontSize="12"
Foreground="Navy">
<Image Source="MorrocoFlag.png" Width="30" Height="15"></Image>
</Paragraph>
</TableCell>
<TableCell>
<Paragraph FontSize="12"
Foreground="Navy">
212
</Paragraph>
</TableCell>
<TableCell>
<Paragraph FontSize="12"
Foreground="Navy">
.ma
</Paragraph>
</TableCell>
<TableCell>
<Paragraph FontSize="12"
Foreground="Navy">
GMT
</Paragraph>
</TableCell>
</TableRow>
<!--Mauritania data-->
<TableRow Background="White">
<TableCell>
<Paragraph FontSize="12"
Foreground="Navy">
Mauritania
</Paragraph>
</TableCell>
<TableCell>
<Paragraph FontSize="12"
Foreground="Navy">
<Image Source="MauritanianFlag.png" Width="30" Height="15"></Image>
</Paragraph>
</TableCell>
<TableCell>
<Paragraph FontSize="12"
Foreground="Navy">
222
</Paragraph>
</TableCell>
<TableCell>
<Paragraph FontSize="12"
Foreground="Navy">
.mr
</Paragraph>
</TableCell>
<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 |
Then add them within the Debug project file. Finally, run the project and the result will be:
|
![XamlTableImg2.jpg]()
|
|
Figure2 |
You can configure the table as you wish, it is a flexible object, the only think that you need is the imagination. That's it.
Good Dotneting!!!