HTML Like table Creation in WPF
This blog post i am going talk about HTML like table creation in WPF.
Currently i am looking into a project which is used to verify data of a product. As any verification process we have some rules that have been defined. There rules are simple ones like check a field for null or numeric or check for a particular length. If we find any field with the exception against the rules we are to flag them and show it to the user. The business analyst wanted us to create a XAML which was like “Know how to fix the exception”. His vision was to put a static table with information like – For a field, it is having a particular exception – here is what you need to do as a user to fix that exception. So he sent me the below screenshot and asked me if we can create something like this:
My first reaction to this was – well – this is just a table with color styling. I must tell that, this reaction of “oh this is just a table” is because of the fact that i come from a Web applications background and HTML & CSS is what i know better. So from a html perspective this is just a table with couple of rows and 3 columns. So i quickly fired up a editor and coded the HTML equivalent of the above requirement. Following is the code snippet of the same
As you can see all i had to do was to create a tabular grid and put the static data. I come from a web application background and my first instinct was a table and bunch of styles that i can put. Here is the code snippet for the same:
1: <table width="50%" align="center" bgcolor="lightyellow" border="0" cellspacing="1" cellpadding="0">
2: <tr>
3: <td colspan="3" class="ProductNameStyle">Product : Product 1</td>
4: </tr>
5: <tr>
6: <td colspan="3" class="SubjectAreaNameStyle">Subject Area : Area 1</td>
7: </tr>
8: 9: <tr>
10: <td class="ExceptionHeaderStyle">UI Field</td>
11: <td class="ExceptionHeaderStyle">Exception</td>
12: <td class="ExceptionHeaderStyle">Action</td>
13: </tr>
14: <tr>
15: <td class="ExceptionCellStyle">Field 1</td>
16: <td class="ExceptionCellStyle">Missing Data</td>
17: <td class="ExceptionCellStyle">Enter information</td>
18: </tr>
19: <tr>
20: <td class="ExceptionCellStyle">Field 2</td>
21: <td class="ExceptionCellStyle">Wrong format </td>
22: <td class="ExceptionCellStyle">Enter right format</td>
23: </tr>
24: <tr>
25: <td class="ExceptionCellStyle">Field 3</td>
26: <td class="ExceptionCellStyle">Missing Data</td>
27: <td class="ExceptionCellStyle">Enter information</td>
28: </tr>
29: 30: 31: </table>
As you can see its pretty easy to do it HTML. Well i need the solution in WPF. So lets see what i got hold of in WPF.
FlowDocumentPageViewer:
i set out to see if there is any Table support in WPF. What it led me was to something known as FlowPageDocumentPageViewer. As the name says it this viewer is a container for FlowDocument’s. I don’t want to get into what is a FlowDocument in this post (That makes me think of a blog post entry :) ). Here is the official overview of FlowDocument - http://msdn.microsoft.com/en-us/library/aa970909.aspx. Table control is supported in FlowDocument. Very similar to HTML, Table control has TableRow and TableCell. I was surprised to see CellSpacing attribute on Table in WPF. I didn’t expect to see that here. Not many people know of the right usage of CellSpacing and CellPadding in HTML. I quickly wrote a snippet using Kaxaml editor and below is the screenshot of the output:
Here is the code snippet of the XAML:
1: <Window x:Class="Scratch.MainWindow"
2: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4: Title="MainWindow" Height="350" Width="525">
5: <Window.Resources>
6: <SolidColorBrush x:Key="ProductNameBackgroundBrush" Color="#C0504D" />
7: <SolidColorBrush x:Key="SubjectAreaBackgroundBrush" Color="#D99795" />
8: <SolidColorBrush x:Key="ExceptionHeaderBackgroundBrush" Color="#E6B9B8" />
9: <SolidColorBrush x:Key="ExceptionCellBackgroundBrush" Color="#F2DDDC" />
10: 11: <Style x:Key="ProductNameStyle" TargetType="{x:Type TableCell}">
12: <Setter Property="Background" Value="{StaticResource ProductNameBackgroundBrush}" />
13: <Setter Property="FontFamily" Value="Trebuchet MS" />
14: <Setter Property="FontWeight" Value="Bold" />
15: <Setter Property="FontSize" Value="15" />
16: <Setter Property="BorderBrush" Value="Black" />
17: <Setter Property="BorderThickness" Value="1" />
18: <Setter Property="Padding" Value="3,6,0,6" />
19: </Style>
20: <Style x:Key="SubjectAreaStyle" TargetType="{x:Type TableCell}">
21: <Setter Property="Background" Value="{StaticResource SubjectAreaBackgroundBrush}" />
22: <Setter Property="FontFamily" Value="Trebuchet MS" />
23: <Setter Property="FontWeight" Value="Bold" />
24: <Setter Property="FontSize" Value="15" />
25: <Setter Property="BorderBrush" Value="Black" />
26: <Setter Property="BorderThickness" Value="1" />
27: <Setter Property="Padding" Value="3,6,0,6" />
28: </Style>
29: <Style x:Key="ExceptionHeaderStyle" TargetType="{x:Type TableCell}">
30: <Setter Property="Background" Value="{StaticResource ExceptionHeaderBackgroundBrush}" />
31: <Setter Property="FontFamily" Value="Trebuchet MS" />
32: <Setter Property="FontWeight" Value="Bold" />
33: <Setter Property="FontSize" Value="15" />
34: <Setter Property="BorderBrush" Value="Black" />
35: <Setter Property="BorderThickness" Value="1" />
36: <Setter Property="Padding" Value="3,6,0,6" />
37: </Style>
38: <Style x:Key="ExceptionCellStyle" TargetType="{x:Type TableCell}">
39: <Setter Property="Background" Value="{StaticResource ExceptionCellBackgroundBrush}" />
40: <Setter Property="FontFamily" Value="Trebuchet MS" />
41: <Setter Property="FontWeight" Value="Normal" />
42: <Setter Property="FontSize" Value="12" />
43: <Setter Property="BorderBrush" Value="Black" />
44: <Setter Property="BorderThickness" Value="1" />
45: <Setter Property="Padding" Value="3,6,0,6" />
46: </Style>
47: </Window.Resources>
48: <Grid>
49: <FlowDocumentPageViewer >
50: <FlowDocument>
51: <Table CellSpacing="1" >
52: <TableRowGroup>
53: <TableRow>
54: <TableCell ColumnSpan="3" Style="{StaticResource ProductNameStyle}">
55: <Paragraph >Product Name : Name 1</Paragraph>
56: </TableCell>
57: </TableRow>
58: <TableRow>
59: <TableCell ColumnSpan="3" Style="{StaticResource SubjectAreaStyle}">
60: <Paragraph>Subject Area : Area 1</Paragraph>
61: </TableCell>
62: </TableRow>
63: <TableRow>
64: <TableCell Style="{StaticResource ExceptionHeaderStyle}" >
65: <Paragraph>UI Field</Paragraph>
66: </TableCell>
67: <TableCell Style="{StaticResource ExceptionHeaderStyle}">
68: <Paragraph>Exception</Paragraph>
69: </TableCell>
70: <TableCell Style="{StaticResource ExceptionHeaderStyle}">
71: <Paragraph>Action</Paragraph>
72: </TableCell>
73: </TableRow>
74: <TableRow>
75: <TableCell Style="{StaticResource ExceptionCellStyle}" >
76: <Paragraph>Field 1</Paragraph>
77: </TableCell>
78: <TableCell Style="{StaticResource ExceptionCellStyle}">
79: <Paragraph>Missing Data</Paragraph>
80: </TableCell>
81: <TableCell Style="{StaticResource ExceptionCellStyle}">
82: <Paragraph>Enter information</Paragraph>
83: </TableCell>
84: </TableRow>
85: <TableRow>
86: <TableCell Style="{StaticResource ExceptionCellStyle}" >
87: <Paragraph>Field 2</Paragraph>
88: </TableCell>
89: <TableCell Style="{StaticResource ExceptionCellStyle}">
90: <Paragraph>Missing Data</Paragraph>
91: </TableCell>
92: <TableCell Style="{StaticResource ExceptionCellStyle}">
93: <Paragraph>Enter information</Paragraph>
94: </TableCell>
95: </TableRow>
96: <TableRow>
97: <TableCell Style="{StaticResource ExceptionCellStyle}" >
98: <Paragraph>Field 3</Paragraph>
99: </TableCell>
100: <TableCell Style="{StaticResource ExceptionCellStyle}">
101: <Paragraph>Missing Data</Paragraph>
102: </TableCell>
103: <TableCell Style="{StaticResource ExceptionCellStyle}">
104: <Paragraph>Enter information</Paragraph>
105: </TableCell>
106: </TableRow>
107: </TableRowGroup>
108: </Table>
109: </FlowDocument>
110: </FlowDocumentPageViewer>
111: </Grid>
112: </Window>
Now everything is great – i get the same syntax almost identical to HTML as i have the support of Table, TableRow, TableCell. But houston i have a problem :). Notice the bottom of the screenshot. I get the Page Number and Zoom controls visible. Well FlowDocument page viewer is built in with these features. I get them out of the box. But that’s not needed for my current assignment. When i went through the overview of FlowDocument, it was clear that FlowDocuments container need not be FlowDocumentPageViewer. When you have a multi page content it makes sense to have page viewer so that you get the nice features of page numbering and zooming. What struck me was the fact that a RichTextBox can be the container of FlowDocument. So all i did was to change the FlowDocumentPageViewer to RichTextBox and voila i get what i am looking for. Check the screen shot after the changes:
Cool. So i can create static tables in WPF too with a HTML like syntax. This was one of the ways of doing this.
Grid:
Well i must say that we often look at a problem and always think hard on the solution ignoring the simplest things on hand. Well for the assignment i just wanted a static data represented in a tabular format. Coming from a web background my brain or i made my brain concentrate on “Table” and it got stuck as a solution space. So i went behind the Table control. But believe me there is a much simpler solution to this. I was laughing at my self when i though of this solution. Yes our good old container friend “Grid” will help us out. Just have a look at the pictures above and try to break it logically into rows and columns. It has 3 columns and 6 rows. That’s it – create a grid with 6 row definitions and 3 column definitions, put labels as each column content and we are done. Check the following screen shot and snippet:
Here is the code snippet:
1: <Window
2: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
4: <Window.Resources>
5: <SolidColorBrush x:Key="ProductNameBackgroundBrush" Color="#C0504D" />
6: <SolidColorBrush x:Key="SubjectAreaBackgroundBrush" Color="#D99795" />
7: <SolidColorBrush x:Key="ExceptionHeaderBackgroundBrush" Color="#E6B9B8" />
8: <SolidColorBrush x:Key="ExceptionCellBackgroundBrush" Color="#F2DDDC" />
9: 10: <Style x:Key="ProductNameStyle" TargetType="{x:Type Label}">
11: <Setter Property="Background" Value="{StaticResource ProductNameBackgroundBrush}" />
12: <Setter Property="FontFamily" Value="Trebuchet MS" />
13: <Setter Property="FontWeight" Value="Bold" />
14: <Setter Property="FontSize" Value="15" />
15: <Setter Property="BorderBrush" Value="Black" />
16: <Setter Property="BorderThickness" Value="1" />
17: <Setter Property="Padding" Value="3,6,0,6" />
18: </Style>
19: <Style x:Key="SubjectAreaStyle" TargetType="{x:Type Label}">
20: <Setter Property="Background" Value="{StaticResource SubjectAreaBackgroundBrush}" />
21: <Setter Property="FontFamily" Value="Trebuchet MS" />
22: <Setter Property="FontWeight" Value="Bold" />
23: <Setter Property="FontSize" Value="15" />
24: <Setter Property="BorderBrush" Value="Black" />
25: <Setter Property="BorderThickness" Value="1" />
26: <Setter Property="Padding" Value="3,6,0,6" />
27: </Style>
28: <Style x:Key="ExceptionHeaderStyle" TargetType="{x:Type Label}">
29: <Setter Property="Background" Value="{StaticResource ExceptionHeaderBackgroundBrush}" />
30: <Setter Property="FontFamily" Value="Trebuchet MS" />
31: <Setter Property="FontWeight" Value="Bold" />
32: <Setter Property="FontSize" Value="15" />
33: <Setter Property="BorderBrush" Value="Black" />
34: <Setter Property="BorderThickness" Value="1" />
35: <Setter Property="Padding" Value="3,6,0,6" />
36: </Style>
37: <Style x:Key="ExceptionCellStyle" TargetType="{x:Type Label}">
38: <Setter Property="Background" Value="{StaticResource ExceptionCellBackgroundBrush}" />
39: <Setter Property="FontFamily" Value="Trebuchet MS" />
40: <Setter Property="FontWeight" Value="Normal" />
41: <Setter Property="FontSize" Value="12" />
42: <Setter Property="BorderBrush" Value="Black" />
43: <Setter Property="BorderThickness" Value="1" />
44: <Setter Property="Padding" Value="3,6,0,6" />
45: </Style>
46: 47: </Window.Resources>
48: <Grid Width="700">
49: <Grid>
50: <Grid.RowDefinitions>
51: <RowDefinition Height="30" />
52: <RowDefinition Height="30"/>
53: <RowDefinition Height="Auto"/>
54: <RowDefinition Height="Auto"/>
55: <RowDefinition Height="Auto"/>
56: <RowDefinition Height="Auto"/>
57: </Grid.RowDefinitions>
58: <Grid.ColumnDefinitions>
59: <ColumnDefinition />
60: <ColumnDefinition />
61: <ColumnDefinition />
62: </Grid.ColumnDefinitions>
63: <!-- Row 0-->
64: <Label Grid.ColumnSpan="3" Grid.Row="0" Style="{StaticResource ProductNameStyle}">Product Name : Product 1</Label>
65: 66: <!-- Row 1-->
67: <Label Grid.ColumnSpan="3" Grid.Row="1" Style="{StaticResource SubjectAreaStyle}">Subject Area : Area 1</Label>
68: 69: <!-- Row 2-->
70: <Label Grid.Column="0" Grid.Row="2" Style="{StaticResource ExceptionHeaderStyle}">UI Field</Label>
71: <Label Grid.Column="1" Grid.Row="2" Style="{StaticResource ExceptionHeaderStyle}">Exception</Label>
72: <Label Grid.Column="2" Grid.Row="2" Style="{StaticResource ExceptionHeaderStyle}">Action</Label>
73: 74: <!-- Row 3-->
75: <Label Grid.Column="0" Grid.Row="3" Style="{StaticResource ExceptionCellStyle}">Field 1</Label>
76: <Label Grid.Column="1" Grid.Row="3" Style="{StaticResource ExceptionCellStyle}">Missing Data</Label>
77: <Label Grid.Column="2" Grid.Row="3" Style="{StaticResource ExceptionCellStyle}">Enter information</Label>
78: 79: <!-- Row 4-->
80: <Label Grid.Column="0" Grid.Row="4" Style="{StaticResource ExceptionCellStyle}">Field 2</Label>
81: <Label Grid.Column="1" Grid.Row="4" Style="{StaticResource ExceptionCellStyle}">Missing Data</Label>
82: <Label Grid.Column="2" Grid.Row="4" Style="{StaticResource ExceptionCellStyle}">Enter information</Label>
83: 84: <!-- Row 5-->
85: <Label Grid.Column="0" Grid.Row="5" Style="{StaticResource ExceptionCellStyle}">Field 3</Label>
86: <Label Grid.Column="1" Grid.Row="5" Style="{StaticResource ExceptionCellStyle}">Missing Data</Label>
87: <Label Grid.Column="2" Grid.Row="5" Style="{StaticResource ExceptionCellStyle}">Enter information</Label>
88: 89: </Grid>
90: </Grid>
91: </Window>
Everything looks perfect. I get the tabular structure with my static data. But wait there is a small glitch. My borders are not fine thin lines. Some cells have the desired thin line borders where as notice the yellow markers in the screen shot – the borders are double edged or appear as thick lines in those areas. The problem appears to be simple. Since we have provided borders for the label, wherever a cell collides with another cell, we now borders aligned together next to each other giving a thick line. The solution is also pretty simple – provide spacing/margin for all the cells. Lets clean up the code and see what happens. Here is the screenshot:
Voila, we got the expected behavior. Here is the code snippet:
1: <Window x:Class="Scratch.Window1"
2: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4: Title="Window1" Height="300" Width="800">
5: <Window.Resources>
6: <SolidColorBrush x:Key="ProductNameBackgroundBrush" Color="#C0504D" />
7: <SolidColorBrush x:Key="SubjectAreaBackgroundBrush" Color="#D99795" />
8: <SolidColorBrush x:Key="ExceptionHeaderBackgroundBrush" Color="#E6B9B8" />
9: <SolidColorBrush x:Key="ExceptionCellBackgroundBrush" Color="#F2DDDC" />
10: 11: <Style x:Key="ProductNameStyle" TargetType="{x:Type Label}">
12: <Setter Property="Background" Value="{StaticResource ProductNameBackgroundBrush}" />
13: <Setter Property="FontFamily" Value="Trebuchet MS" />
14: <Setter Property="FontWeight" Value="Bold" />
15: <Setter Property="FontSize" Value="15" />
16: <Setter Property="BorderBrush" Value="Black" />
17: <Setter Property="BorderThickness" Value="1" />
18: <Setter Property="Padding" Value="3,6,0,6" />
19: </Style>
20: <Style x:Key="SubjectAreaStyle" TargetType="{x:Type Label}">
21: <Setter Property="Background" Value="{StaticResource SubjectAreaBackgroundBrush}" />
22: <Setter Property="FontFamily" Value="Trebuchet MS" />
23: <Setter Property="FontWeight" Value="Bold" />
24: <Setter Property="FontSize" Value="15" />
25: <Setter Property="BorderBrush" Value="Black" />
26: <Setter Property="BorderThickness" Value="1" />
27: <Setter Property="Padding" Value="3,6,0,6" />
28: </Style>
29: <Style x:Key="ExceptionHeaderStyle" TargetType="{x:Type Label}">
30: <Setter Property="Background" Value="{StaticResource ExceptionHeaderBackgroundBrush}" />
31: <Setter Property="FontFamily" Value="Trebuchet MS" />
32: <Setter Property="FontWeight" Value="Bold" />
33: <Setter Property="FontSize" Value="15" />
34: <Setter Property="BorderBrush" Value="Black" />
35: <Setter Property="BorderThickness" Value="1" />
36: <Setter Property="Padding" Value="3,6,0,6" />
37: </Style>
38: <Style x:Key="ExceptionCellStyle" TargetType="{x:Type Label}">
39: <Setter Property="Background" Value="{StaticResource ExceptionCellBackgroundBrush}" />
40: <Setter Property="FontFamily" Value="Trebuchet MS" />
41: <Setter Property="FontWeight" Value="Normal" />
42: <Setter Property="FontSize" Value="12" />
43: <Setter Property="BorderBrush" Value="Black" />
44: <Setter Property="BorderThickness" Value="1" />
45: <Setter Property="Padding" Value="3,6,0,6" />
46: </Style>
47: 48: </Window.Resources>
49: <Grid Width="700">
50: <Grid Background="LightYellow">
51: <Grid.RowDefinitions>
52: <RowDefinition Height="30" />
53: <RowDefinition Height="30"/>
54: <RowDefinition Height="Auto"/>
55: <RowDefinition Height="Auto"/>
56: <RowDefinition Height="Auto"/>
57: <RowDefinition Height="Auto"/>
58: </Grid.RowDefinitions>
59: <Grid.ColumnDefinitions>
60: <ColumnDefinition />
61: <ColumnDefinition />
62: <ColumnDefinition />
63: </Grid.ColumnDefinitions>
64: <!-- Row 0-->
65: <Label Grid.ColumnSpan="3" Grid.Row="0" Style="{StaticResource ProductNameStyle}" Margin="0,0,0,0">Product Name : Product 1</Label>
66: 67: <!-- Row 1-->
68: <Label Grid.ColumnSpan="3" Grid.Row="1" Style="{StaticResource SubjectAreaStyle}" Margin="0,1,0,0">Subject Area : Area 1</Label>
69: 70: <!-- Row 2-->
71: <Label Grid.Column="0" Grid.Row="2" Style="{StaticResource ExceptionHeaderStyle}" Margin="0,1,0,0">UI Field</Label>
72: <Label Grid.Column="1" Grid.Row="2" Style="{StaticResource ExceptionHeaderStyle}" Margin="1,1,0,0">Exception</Label>
73: <Label Grid.Column="2" Grid.Row="2" Style="{StaticResource ExceptionHeaderStyle}" Margin="1,1,0,0">Action</Label>
74: 75: <!-- Row 3-->
76: <Label Grid.Column="0" Grid.Row="3" Style="{StaticResource ExceptionCellStyle}" Margin="0,1,0,0">Field 1</Label>
77: <Label Grid.Column="1" Grid.Row="3" Style="{StaticResource ExceptionCellStyle}" Margin="1,1,0,0">Missing Data</Label>
78: <Label Grid.Column="2" Grid.Row="3" Style="{StaticResource ExceptionCellStyle}" Margin="1,1,0,0">Enter information</Label>
79: 80: <!-- Row 4-->
81: <Label Grid.Column="0" Grid.Row="4" Style="{StaticResource ExceptionCellStyle}" Margin="0,1,0,0">Field 2</Label>
82: <Label Grid.Column="1" Grid.Row="4" Style="{StaticResource ExceptionCellStyle}" Margin="1,1,0,0">Missing Data</Label>
83: <Label Grid.Column="2" Grid.Row="4" Style="{StaticResource ExceptionCellStyle}" Margin="1,1,0,0">Enter information</Label>
84: 85: <!-- Row 5-->
86: <Label Grid.Column="0" Grid.Row="5" Style="{StaticResource ExceptionCellStyle}" Margin="0,1,0,0">Field 3</Label>
87: <Label Grid.Column="1" Grid.Row="5" Style="{StaticResource ExceptionCellStyle}" Margin="1,1,0,0">Missing Data</Label>
88: <Label Grid.Column="2" Grid.Row="5" Style="{StaticResource ExceptionCellStyle}" Margin="1,1,0,0">Enter information</Label>
89: 90: </Grid>
91: </Grid>
92: </Window>
Notice the usage of margins. That’s the key to the whole exercise.
Well that was just a lap around the FlowDocument and Grid. I was trying to understand myself how to do things in WPF. If anyone has any other alternatives to this, let me know. It will help me increase my understanding of how things can be done in WPF.
Now let me check with my colleague which way he wants to implement this :)
Till next time – happy coding, develop with passion.
PS : If somebody has a question why i didn’t use Grid Line's on the Grid – well the official answer from Microsoft guys is that Grid Line's are only for debugging purpose and not be used in production ready code.