Silverlight ItemViewer

This Silverlight only ItemViewer allows you to group similar items together in an area that will automatically wrap when resized and is easy to implement on your Silverlight driven website and is also customizable to provide a visual feel suitable for any site design.

To use the ItemViewer control you will need to add a reference to Liquid.dll in your project.

How to Use the ItemViewer Control

To use the ItemViewer on your Silverlight page:

<UserControl x:Class="ItemViewer.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:liquid="clr-namespace:Liquid;assembly=Liquid"
    Width="400" Height="300">
     <liquid:ItemViewer x:Name="myList" Width="400" Height="300" DoubleClick="Items_DoubleClick">
          <liquid:ItemViewer.Items>
               <liquid:FileItem Text="My File.pdf" OtherText="300KB" Icon="images/large/pdf.png" />
               <liquid:FileItem Text="My File 2.doc" OtherText="360KB" Icon="images/large/doc.png" />
               <liquid:FileItem Text="My File 3.xls" OtherText="100KB" Icon="images/large/xls.png" />
               <liquid:FileItem Text="My File 4.xaml" OtherText="40KB" Icon="images/large/xaml.png" />
               <liquid:FileItem Text="My File 5.jpg" OtherText="167KB" Icon="images/large/jpg.png" />
               <liquid:FileItem Text="My File 6.mp3" OtherText="96KB" Icon="images/large/mp3.png" />
          </liquid:ItemViewer.Items>
     </liquid:ItemViewer>
</UserControl>
 

The ItemViewer can render controls that derive from the base ItemViewerItem class such as the included FileItem control which, in conjunction with the TreeView control, allows you to build complex file explorer components with relatively small amounts of code.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Liquid;
namespace ItemViewer
{
     public partial class Page : UserControl
     {
          public Page()
          {
               InitializeComponent();
          }
          private void Items_DoubleClick(object sender, EventArgs e)
          {
               FileItem selected = myList.Selected;
               // Process your double-click action here
          }
     }
}
 

Example Silverlight ItemViewer Control:

Silverlight ItemViewer Control

Your Comments and Questions Answered

 You are not logged in. You need to login to post new messages, if you do not have a login you can register for free!

dan said:

Hi mrLIS,

Yes there is a problem with the scrollbars on the ItemViewer, which is being fixed in the next version of the library. Thanks!

06/19/2009 11:25
 
mrLIS said:


Hi. TreeView and ItemViewer. In ItemViewer when creating a large number of Items is not a scroll. In the tree if you open it using a scroll ExpandAll just does not appear. Is there a solution to these problems?

05/28/2009 05:35
 
RBC said:

Hi Dan,

I get following error running your sample:

Cannot implicitly convert type 'Liquid.ItemViewerItem' to 'Liquid.FileItem'. An explicit conversion exists (are you missing a cast?)

In Page.xaml.cs

FileItem selected = myList.Selected;

myList.Selected;


private void Items_DoubleClick(object sender, EventArgs e)
{
FileItem selected = myList.Selected;

// Process your double-click action here
}

Thank you,
Rune

04/29/2009 10:29
 
otamayo said:

Hi Dan,

Got the latest version 5.1.7 and trying to use the new IconSource property but keep getting an exception in Liquid.ItemViewerItem.UpdateIcon(). I tried reverting back to using an icon from a file as before but still get the same exception. Below is the code I am using:

fileManagementItems.Clear();
fileManagementItems.Add(from m in _imageList
                                select new ItemViewerItem
                                {
                                        ID = m.ImageID,
                                        Icon = "images/jpg.png",
                                        Text = m.Name,
                                        OtherText = Utils.BytesToString((double)m.FileSize)
                                });

I noticed that in your example that you still use a FileItem and add that to List<ItemViewerItem> however, there doesn’t seem to a method to add a IEnumerable<FileItem> into the ItemViewer directly. So am I doing something wrong or is it a small bug?

Regards,

Oliver

02/09/2009 09:25
 
dan said:

Hi Oliver,

There wasn't any plan for this but it's a good suggestion and one which I'm sure we can get implemented in the next version, not just for the item viewer but other controls too. Thanks!

01/30/2009 11:40
 
otamayo said:

Hi Dan,

Any plans to allow the FileItem icon to set using a bitmap in; for example:

                BitmapImage b = new BitmapImage();
                b.SetSource = ( IsolatedStorageFile.OpenFile("MylocalFile.jpg", System.IO.FileMode.Open) );
                FileItem.IconSource = b;

This would allow the use of images from local storage and/or from embedded resources

Thanks

Oliver

01/29/2009 07:35
 
dan said:

Hi fiannolo,

Have you tried the Explorer Demo which uses the ItemViewer control? Alternatively, could you email the project and we can take a look at it for you?

11/06/2008 02:48
 
fiannolo said:

Hi, great post.
I try to run it with the final version of silverlight 2.0 and does not work. Can you help me to run it?

11/05/2008 10:45
 
dan said:

Hi,

Thanks for the post, I will check this error out more and let you know what I find out. Thanks!

10/30/2008 05:08
 
mrLIS said:

Hello .. If ItemViewer arrange for TabControl when filling ItemViewer error:
Object reference not set to an instance of an object.

foreach (var BD in BORT_DOCS_FILES)
                         (
                                FileItem ivi = new FileItem ();
                                ivi.Text = BD.FILE_NAME.ToString ();
                                ivi.OtherText = BD.DOC_NAME.ToString ();
                                ivi.Icon = "img / large / jpg.png";
                                ivi.LiquidTag = 0;
                                ListIVI.Add (ivi);
                                / / ivDocs.Items.Add (ivi);
                                i;
                         )
                        
                                ivDocs.Add ((List <FileItem>) ListIVI);

10/28/2008 06:26

Silverlight 3

Latest News

  • Silverlight 2 Controls V5.2.1 Released
    Jul, 03 2009

    After several months since the last release we have implemented many fixes to the controls library. The Rich TextBox has been improved with Links...

  • Silverlight 3 BETA Controls Released
    Mar, 30 2009

    As Silverlight 3 BETA is available now to test we thought we would present the Liquid Controls library for Silverlight 3. This BETA...

Silverlight 2 Controls

  • Rich TextBox

    Create and edit rich content with this slick and expandable Rich TextBox...

  • TreeView

    This easy to use TreeView comes with drag and drop, sorting, searching and much more...

  • Context Menu

    You too can have cool popup context menus in your Silverlight applications...

  • Resizable Dialog

    Draggable and resizable popup dialogs are what serious Silverlight developers need...

  • Spell Checker

    Real-time spell checking in Silverlight? We did it first here...