explorer style thumbnailviewer : The Official Microsoft Silverlight.NET Forums

Sincerely,
Allen Chen
Microsoft Online Community Support

Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Re: Re: explorer style thumbnailviewer

Jun 18, 2008 05:20 PM | LINK

Hi

Yes I have seen all these examples but I want a thumbnail explorer lookalike.

E.g. you have 4 image colums and multiple rows (with vertical scrolling)

Allen Chen –...

Star

13909 Points

1810 Posts

Microsoft

Reply

Re: Re: explorer style thumbnailviewer

Jun 19, 2008 04:58 AM | LINK

Hi:

We can write custom control to do so. Here I wrote a simple one. You can custom it to meet your needs.

ImageList.cs:

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Collections;
using System.Windows.Media.Imaging;
using System.Collections.Generic;

namespace SilverlightApplication12
{
    public class ImageList : Control
    {
        public double ImageWidth { get; set; }
        public double ImageHeight { get; set; }
        private EventHandler<MouseButtonEventArgs> _imageclicked;

        public event EventHandler<MouseButtonEventArgs> ImageClicked
        {
            add
            {
                this._imageclicked = (EventHandler<MouseButtonEventArgs>)Delegate.Combine(this._imageclicked, value);
            }
            remove
            {
                this._imageclicked = (EventHandler<MouseButtonEventArgs>)Delegate.Remove(this._imageclicked, value);
            }
        }
        public int ColumnNumber { get; set; }
        public static readonly DependencyProperty ItemsSourceProperty = DependencyProperty.Register(
              "ImageSource", typeof(List<Uri>), typeof(ImageList), null);
        public List<Uri> ImageSource
        {
            get
            {
                return (this.GetValue(ItemsSourceProperty) as List<Uri>);
            }
            set
            {
                base.SetValue(ItemsSourceProperty, value);
            }
        }

        public ImageList()
        {
            DefaultStyleKey = typeof(ImageList);

}

        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();
            Grid imagegrid = (Grid)GetTemplateChild("ImageGrid");
            int currentcolumn = 0;
            int currentrow=0;
            //populate columns
            for (int i = 0; i < Math.Min(ColumnNumber,ImageSource.Count); i++) {
                imagegrid.ColumnDefinitions.Add(new ColumnDefinition());
            }
            //populate first row
            imagegrid.RowDefinitions.Add(new RowDefinition());
            foreach (Uri uri in ImageSource)
            {
                if (currentcolumn == ColumnNumber)
                {
                    imagegrid.RowDefinitions.Add(new RowDefinition());
                    currentrow++;
                    currentcolumn = 0;
                }
                Image img = new Image();
                img.Width = ImageWidth; img.Height = ImageHeight;     img.Stretch = Stretch.Fill;
                img.DataContext = uri;
                img.MouseLeftButtonUp += new MouseButtonEventHandler(img_MouseLeftButtonUp);
                BitmapImage bmi = new BitmapImage();
                bmi.UriSource = uri;
                img.Source = bmi;
                img.SetValue(Grid.ColumnProperty,currentcolumn);
                img.SetValue(Grid.RowProperty,currentrow);
                imagegrid.Children.Add(img);
                currentcolumn++;
            }

        }

        void img_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            this._imageclicked(sender, e);
        }
    }
}

generic.xaml:

Page.xaml:

</StackPanel>
</UserControl>

Page.xaml.cs:

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 System.Windows.Markup;
using System.Text;
using System.Reflection;
using System.Windows.Browser;

namespace SilverlightApplication12
{

    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();

            List<Uri> source = new List<Uri>();
            for (int i = 1; i < 11; i++) {
                source.Add(new Uri(i.ToString() + ".jpg", UriKind.Relative));
            }
            this.ImageList1.ImageClicked += new EventHandler<MouseButtonEventArgs>(ImageList1_ImageClicked);
            this.ImageList1.ImageSource = source;

}

        void ImageList1_ImageClicked(object sender, MouseButtonEventArgs e)
        {
          Image img=sender as Image;
          HtmlPage.Window.Alert(((Uri)img.DataContext).ToString());
        }

}

Regards

Sincerely,
Allen Chen
Microsoft Online Community Support

Please remember to mark the replies as answers if they help and unmark them if they provide no help.

PanzerMan

Member

7 Points

23 Posts

Reply

Re: Re: explorer style thumbnailviewer

Jun 19, 2008 09:58 AM | LINK

Hi

I tried this but I get a AG_E_UNKNOWN_ERROR error.

Here are the exact steps I use to create the control library.

1. Create a new project.

Template: Silverlight Class Library

Name: SilverlightClassLibrary12

2. Rename Class1 to ImageList and copy your ImageList code (change namespace to SilverlightClassLibrary12)

3. Create a new text file named generic.xaml file. added this code. Here I had to modify yours as it gave me warnings

Error 1 The property 'mce_src' was not found in type 'ResourceDictionary'. C:\Users\arnmob.ERGOGROUP\Documents\Visual Studio 2008\Projects\SilverlightClassLibrary12\SilverlightClassLibrary12\generic.xaml 5 5 SilverlightClassLibrary12
Warning 2 The property 'mce_src' does not exist on the type 'ResourceDictionary' in the XML namespace 'http://schemas.microsoft.com/client/2007'. C:\Users\arnmob.ERGOGROUP\Documents\Visual Studio 2008\Projects\SilverlightClassLibrary12\SilverlightClassLibrary12\generic.xaml 5 5 SilverlightClassLibrary12
Warning 4 The type 'List`1' is inside a ResourceDictionary and does not have a key. C:\Users\arnmob.ERGOGROUP\Documents\Visual Studio 2008\Projects\SilverlightClassLibrary12\SilverlightClassLibrary12\generic.xaml SilverlightClassLibrary12
Warning 3 The property '_UnknownContent' does not exist on the type 'ResourceDictionary' in the XML namespace 'http://schemas.microsoft.com/client/2007'. C:\Users\arnmob.ERGOGROUP\Documents\Visual Studio 2008\Projects\SilverlightClassLibrary12\SilverlightClassLibrary12\generic.xaml SilverlightClassLibrary12

<code>

<ResourceDictionary

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local="clr-namespace:SilverlightClassLibrary12;assembly=SilverlightClassLibrary12">

<Setter.Value>

<Grid x:Name="ImageGrid"

Background="{TemplateBinding Background}">

</Grid>

</ScrollViewer>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</ResourceDictionary>

</code>

4. Add a new Project to this solution

Template: Silverlight Application

Name: SilverlightApplicationx

Create an HTML Test Page

5. Add the SilverlightClassLibrary12 dll to the SilverlightApplicationx references.

6. Set the code in Page.xaml to

<code>

<UserControl

x:Class="SilverlightApplicationx.Page"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:c="clr-namespace:SilverlightClassLibrary12;assembly=SilverlightClassLibrary12"

Width="1400" Height="1300">

<c:ImageList Width="1000" Height="800" Background="Red" x:Name="ImageList1" ColumnNumber="4" ImageWidth="200" ImageHeight="200">

</c:ImageList>

</StackPanel>

</UserControl>

</code>

7. Set the code in Page.xaml.cs to

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 System.Windows.Markup;

using System.Text;

using System.Reflection;

using System.Windows.Browser;

namespace SilverlightApplicationx

{

public partial class Page : UserControl

{

public Page()

{

InitializeComponent();

List<Uri> source = new List<Uri>();for (int i = 1; i < 11; i++)

{

source.Add(new Uri(i.ToString() + ".jpg", UriKind.Relative));

}

this.ImageList1.ImageClicked += new EventHandler<MouseButtonEventArgs>(ImageList1_ImageClicked);

this.ImageList1.ImageSource = source;

}

void ImageList1_ImageClicked(object sender, MouseButtonEventArgs e)

{

Image img = sender as Image;HtmlPage.Window.Alert(((Uri)img.DataContext).ToString());

}

my project structure

SOLUTION SILVERLIGHTCLASSLIBRARY12
SilverlightApplicationx
--References
---- ....
---- SilverlightClassLibrary12
--App.xaml
----App.xaml
.cs
--Page.xaml
----Page.xaml
.cs
SilverlightClassLibrary12
--generic.xaml
--ImageList.cs

Can you see what I am doing wrong. The application builds without exceptions or warning. The error occurs when I try to run the application on the

InitializeComponent(); in Page.xaml.cs

System.Windows.Markup.XamlParseException: AG_E_UNKNOWN_ERROR [Line: 11 Position: 22]
   at System.Windows.Application.LoadComponent(Object component, Uri xamlUri)
   at SilverlightApplicationx.Page.InitializeComponent()
   at SilverlightApplicationx.Page..ctor()
   at SilverlightApplicationx.App.Application_Startup(Object sender, StartupEventArgs e)
   at System.Windows.CoreInvokeHandler.InvokeEventHandler(Int32 typeIndex, Delegate handlerDelegate, Object sender, Object args)
   at MS.Internal.JoltHelper.FireEvent(IntPtr unmanagedObj, IntPtr unmanagedObjArgs, Int32 argsTypeIndex, String eventName)}

I am running on vs2008 siliverlight 2 beta 2

Allen Chen –...

Star

13909 Points

1810 Posts

Microsoft

Reply

Re: Re: explorer style thumbnailviewer

Jun 19, 2008 10:26 AM | LINK

Hi:

PanzerMan

3. Create a new text file named generic.xaml file. added this code. Here I had to modify yours as it gave me warnings

Error 1 The property 'mce_src' was not found in type 'ResourceDictionary'

Please remove mce_src=.... It's auto generated when posting...

Could you post this project?

Thanks

Sincerely,
Allen Chen
Microsoft Online Community Support

Please remember to mark the replies as answers if they help and unmark them if they provide no help.

PanzerMan

Member

7 Points

23 Posts

Reply

Re: Re: Re: explorer style thumbnailviewer

Jun 19, 2008 11:28 AM | LINK

How can I post this project in this forum?

Allen Chen –...

Star

13909 Points

1810 Posts

Microsoft

Reply

Re: Re: Re: explorer style thumbnailviewer

Jun 19, 2008 11:38 AM | LINK

Hi:

You can upload your solution here

http://skydrive.live.com/welcome.aspx?provision=1

and paste the link.

Regards

Sincerely,
Allen Chen
Microsoft Online Community Support

Please remember to mark the replies as answers if they help and unmark them if they provide no help.

PanzerMan

Member

7 Points

23 Posts

Reply

Re: Re: Re: Re: explorer style thumbnailviewer

Jun 19, 2008 11:46 AM | LINK

http://cid-e20db49df7d9f1fa.skydrive.live.com/browse.aspx/Public/Silverlight%20Project?wa=wsignin1.0

Allen Chen –...

Star

13909 Points

1810 Posts

Microsoft

Reply

Re: Re: Re: Re: explorer style thumbnailviewer

Jun 19, 2008 12:03 PM | LINK

Hi:

I created a new classlibrary and it works fine. The code is same. Please try again.

Regards

Sincerely,
Allen Chen
Microsoft Online Community Support

Please remember to mark the replies as answers if they help and unmark them if they provide no help.

explorer style thumbnailviewer RSS

20 replies

PanzerMan