January 2010 - Posts

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:

 Capture1

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:

capture2

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:

capture3

 

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:

capture4

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:

Capture5

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.

Technorati Tags:
del.icio.us Tags:
Posted Monday, January 11, 2010 7:58 AM by kashyapa | 3 comment(s)
Filed under:

Technorati Blog Claim

I am trying to claim my blog through Technorati. Need to have a post with their token. Y6MKJTS5QTX2

So created this post.

Posted Friday, January 01, 2010 9:51 PM by kashyapa | with no comments

MVVM – Sample applications index

Its been quite a while i took up blogging. I haven’t had many blog posts. So thought of adding one blog post on the hottest topic MVVM.

Lately i have been trying to understand MVVM pattern for WPF development. As any MVVM novice i am also very much confused as to where to start. So i started hunting for sample applications that have been posted for MVVM. Looked at John Gossman, Josh Smith, Karl Shifflet etc. These three being the pioneers of the MVVM, the sample applications they have are the finest and the best examples you can get. But for a beginner you would always look out for a light weight ones.

So i thought let me put all the sample application i found as a link at one place. So here it goes:

Excellent article by the maestro. Explains the concept very clean and crisply. The only problem with this article was that – it had too much knowledge for a first timer starting on MVVM. If you searched on MVVM the top link is Josh Smith article in MSDN. Kudos to Josh for this. So i set myself for searching a more simpler application which a novice can get hands on to.

Karl Shifflet as everybody knows is a maestro in this area. I liked all his postings on MVVM. Some very good examples from Karl – the line of business applications, the password manager are just a few to name. Karl’s demo application will educate you on the architecture front and are an excellent source of knowledge.

A simple and neat example which uses entity framework for data access. But a very good start. Has a simple search button to search employee by last name. When a employee is selected brings orders for that employee. A good start to understand the MVVM pattern.

This is the simplest…… example you can find on internet for MVVM example. All it does is to show names in a editable text box and a label. Changes done in the text box are bound to the label. So gives a overview of the MVVM usage. This gentleman has a lot of code samples on MVVM. The code samples are for variety of topics on MVVM. I likes most of the samples explained on MVVM. So worth a look at this site. 

This is another very good demo application from Jeremy Alles. The demo application lists person names, allows to search and data binds the selected person to a form. Also showcases the navigational aspects of CollectionViewSource object. I though this showed a very good example of some key MVVM concept. What i liked was a small feature that it show cases – when you search for a person name and search results are 0, the search text box changes its color. If you go through the code its just a simple concept of DataTemplate and DataTriggers. I give a thumbs up for this. Note that i am still a novice in this area – so i see as a fascinating piece of code :).

I was planning a sample application of mine. What i wanted to do was some asynchronous data processing. So all the demo applications above talked about either building a customer observable collection or a person collection. But none of them were having a scenario where they showcased the asynchronous data processing.  Brian demo application is a real world application. When i say real world what it means is – his demo app has a search box which searches twitter for the entered text. It then displays the search results in a grid. Brian has showcased how you will go about putting the asynchronous behavior in MVVM model. May be Josh Smith and Karl Shifflet would have this architecture in some of their demo applications. But as a novice i wanted the app to be small enough so that i can digest :). So this served that purpose.

Also there are some good work being done for making  MVVM frameworks. Following link is an outstanding collection of all the available frameworks which support MVVM. This is a silverlight application which lists out all the frameworks and a rating by the author:

Jeremy Alles – Discover and compare existing MVVM frmeworks

I hope those who are starting on MVVM would find this useful. I wanted to give a one stop place for finding simple applications for reference. If some of you have other sample apps which i can put it in this index – let me know, i will add them to the list

Till next time, happy coding – develop with passion.

Technorati Tags:
,
del.icio.us Tags:
,
Posted Friday, January 01, 2010 9:34 AM by kashyapa | 8 comment(s)
Filed under:
More Posts