Image Gallery: UserControl in table style Grid

10-29-2009 10:51 PM |

I need to implement a paged table view of images for an image gallery.  As an example, there might be 100 images and each page might  show 20 images (5x4 table), in such a case there will be 5 different pages of images. In reality the number of rows and columns will be dictated by the image size and screen size.

 Requirements:

1. The table must be evenly spaced on all sides
   
2. Metadata is displayed with each image (name and tag state)
   
3. The user can double click on a image to fire an event to view a larger version of the image.
   

I have played with a ListBox control but it isn't providing the control needed meet the spacing requirement of #1.  Because of this, I am thinking the best approach is to do the math to determine the number of rows and columns, then simply use a Grid control and create the correct number of rows and columns.

I have created a UserControl to display the image and it's metadata, which will be displayed in each cell of the grid.  The Image control in this UserControl has the mouse event to implement requirement #3.  

Of course the big advantage to using a ListBox is the whole data binding and ItemTemplate.  Is there some way I can implement data binding and the item template concept with the DataGrid?

Sam

Re: Image Gallery: UserControl in table style Grid

10-29-2009 11:34 PM |

Take a look at the FlowControl.

Edit:

Sorry, I meant WrapPanel, from the controls toolkit

Re: Image Gallery: UserControl in table style Grid

10-29-2009 11:43 PM |

http://blogs.silverlight.net/blogs/justinangel/archive/2008/11/05/silverlight-toolkit-wrappanel.aspx

Re: Image Gallery: UserControl in table style Grid

10-29-2009 11:55 PM |

I have played with the WrapPanel and it has the same spacing issues that the ListControl. The spacing needs to be even on all sides of all the images and the control frame. What happens with both the ListBox and WrapPanel is that there is more space to the right of each row. Depending on the heigth, images are cut off in the middle or there is dead space at the bottom. I need it to be nice and even all the way around the control. It needs to loom like a... Table! Sam

Re: Image Gallery: UserControl in table style Grid

10-30-2009 9:59 AM |

You could just use a grid as you said, and populate it at runtime when you know the actual space it has to take up, then deside how many columns/rows it gets:

            RowDefinition row = new RowDefinition();
            ColumnDefinition column = new ColumnDefinition();
            LayoutRoot.RowDefinitions.Add(row);
            LayoutRoot.ColumnDefinitions.Add(column);

Re: Image Gallery: UserControl in table style Grid

10-30-2009 10:10 AM |

That is exactly what I am currently planing to do, which is why I initially asked:

 Is there some way I can implement data binding and the item template concept with the DataGrid?

Maybe I should have simply said "Grid" rather then "DataGrid", my mistake.

Sam

Re: Image Gallery: UserControl in table style Grid

11-06-2009 9:41 PM |

Jonathan,

Thank you, I did not know about the DataPager.  The backend is NOT Microsoft technology, so it looks like I will need to implement System.ComponentModel.IPagedCollectionView to get the data from the web service.  When I try to create a class that implements System.ComponentModel.IPagedCollectionView, the interface is not found.  What am I missing?

Sam