Do Less Get More: Photo Gallery Application for Your Desktop as well as Online

Hi All,

As promised, I am back with modified Photo Gallery Application with three new features and if you want you can add more as per your convenience. Those three new features are as below -

1) You can now Drag & Drop Your own Images from your machine directly on my photo Gallery and view your own pictures online.

2) You can install this application on your Desktop (Out-Of-Browser feature of Silverlight 4.0) and then Drag & Drop your Images on my Photo Gallery and view your own pictures offline.

3) If you don’t want this application offline and you want your pictures should be saved and the same view you should get when you login next time, this feature is also available with this Photo Gallery Application.

So, now question comes how can I achieve these all features from Silverlight!! Simple Use Silverlight 4.0!!.

Let’s See the Steps and few views of the same -

Views of Photo Gallery Application -

1) The Below Image shows that I am dragging & dropping a butterfly picture on the left hand side thumbnail.

2) The below Image shows that you can install the application offline and view your images in the same way.

3) The below Image shows that you can save your view and when you next time login you can see your all pictures in Photo Gallery. You will have to Click the button Save This Image Gallery.

Important – Things which I have not implemented are as below -

1) I did not authenticate the users. You can do that using ASP.NET Forms Authentication!!

2) Checking User Authentication.

3) I am not saving the images when the application is offline. User when next time starts the application, will have to drag and drop the images again.

4) Retrive the pictures back again from the database server after login.

So, let’s Begin to our steps which you can use to create the same Photo Gallery but this time for your own Images -

1) Create Silverlight 4.0 Application using your tool (Expression Blend 4 or VS 2010 Beta).

2) Design the application as shown in above images -

Controls which I have used – Border, Button, Image, StackPanel, TextBlock.

I have designed this application using Microsoft Expression Blend 4.0 Preview For .NET 4.0. All the animation is created by this tool only.

3) Code for MainPage.XAML -

4) Code Behind for MainPage.XAML.CS -

using System;
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.Windows.Media.Imaging;
using System.Collections.ObjectModel;
using System.IO;

namespace PhotoGallaryApplication
{
    public class FileInformation
    {
        public string SenderName { get; set; }
        public string FileName { get; set; }
    }
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            // Required to initialize variables
            InitializeComponent();
            this.MainImageAnimation1.Completed += new EventHandler(MainImageAnimation1_Completed);
            MainImageAnimation1.Begin();
            txtFooter.Text = "Silverlight 4.0 Photo Gallery !! WOW";
            //txtFooterReflection.Text = "Silverlight 4.0 Photo Gallery !! WOW";
            this.Loaded += new RoutedEventHandler(MainPage_Loaded);
        }
        private static string GetSenderName(object sender)
        {
            FrameworkElement fe = sender as FrameworkElement;
            return fe.Name;
        }
        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
        }
        ObservableCollection<FileInformation> fileInfoCollection = new ObservableCollection<FileInformation>();
        ObservableCollection<FileInfo> ImageCollection = new ObservableCollection<FileInfo>();
        ObservableCollection<string> ImageNameCollection = new ObservableCollection<string>();
        string senderName, fileName;

        int imgCount=1;
        void MainImageAnimation1_Completed(object sender, EventArgs e)
        {
            if (imgCount == 16)
            {
                imgCount = 1;
            }
            else
            {
                imgCount++;
            }
            Image Img = new Image();
            Img = ((Image)this.FindName("Img" + imgCount));

            MainImage.Source = Img.Source;
            //MainImage1.Source = Img.Source;
            Img = null;
            MainImageAnimation2.Begin();
            MainImageAnimation2.Completed += new EventHandler(MainImageAnimation2_Completed);
        }

        void MainImageAnimation2_Completed(object sender, EventArgs e)
        {
            MainImageAnimation1.Begin();
        }

        private void B_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e)
        {
            ThumbNailBorderAnimation.Stop();
            Border b = (Border)sender;
            Storyboard.SetTarget(ThumbNailBorderAnimation, b);
            ThumbNailBorderAnimation.Begin();
        }

        private void B_MouseLeave(object sender, System.Windows.Input.MouseEventArgs e)
        {
            ThumbNailBorderAnimationReverse.Stop();
            Border b = (Border)sender;
            Storyboard.SetTarget(ThumbNailBorderAnimationReverse, b);
            ThumbNailBorderAnimationReverse.Begin();
        }

        private void Img1_DragEnter(object sender, System.Windows.DragEventArgs e)
        {
            senderName = GetSenderName(sender);
        }

        private void Img1_Drop(object sender, System.Windows.DragEventArgs e)
        {
            if ((e.Data != null) && (e.Data.GetDataPresent(DataFormats.FileDrop)))
            {
                //return;
                IDataObject dataObject = e.Data as IDataObject;
                FileInfo[] files = dataObject.GetData(DataFormats.FileDrop) as FileInfo[];

                foreach (FileInfo fileInfo in files)
                {
                    fileInfoCollection.Add(new FileInformation() { SenderName = senderName, FileName = fileInfo.Name });

                    try
                    {
                        using (var img = fileInfo.OpenRead())
                        {
                            var imageSource = new BitmapImage();
                            imageSource.SetSource(img);
                            ImageCollection.Add(fileInfo);
                            Image Img=new Image();
                            Img = ((Image)sender);
                            Img.Source = imageSource;
                            ImageNameCollection.Add(Img.Name);
                            Img.AllowDrop = false;
                        }
                    }
                    catch (Exception ex)
                    {
                    }

                }
            }
        }

        private void Img_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
        {
            MainImageAnimation2.Stop();
            MainImageAnimation2.Begin();
            MainImage.Source = ((Image)sender).Source;
            //MainImage1.Source = ((Image)sender).Source;

}

Important Note – I have not written Button Click Event in the above class. Because it requires WCF Service To save the Images on SQL Server database.

5) To Save all the images to SQL Server 2005/2008, I have created a below table with the name UserImages with below structure -

Column Name	Data Type
YourName	Varchar(50)
ImageStored	Image
ImageName	Varchar(50)

6) Once your table is created, now let’s create a WCF Service with a method which will take user name, image as a collection, and image name as collection as parameters. The code is as below -

using System;
using System.Collections.ObjectModel;
using System.Linq;
using System.IO;
using System.Data;
using System.Data.SqlClient;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;

[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class PhotoGalleryService
{
    [OperationContract]
    public string DoWork(string userName,ObservableCollection<FileInfo> allImages,ObservableCollection<string> allImageNames)
    {
        int i;
        for (i = 1; i <= allImages.Count; i++)
        {
            SqlConnection myConnection = new SqlConnection(@"Server=.\SQLExpress;Database=PhotoGalleryDB;Integrated Security=true");
            SqlCommand storeimage = new SqlCommand("INSERT INTO UserImages " + "(UserName, ImageStored, ImageName) " + " values (@userName, @imageStored, @imageName)", myConnection);
            storeimage.Parameters.Add("@userName", SqlDbType.VarChar, 100).Value = "Pravinkumar";
            storeimage.Parameters.Add("@imageStored", SqlDbType.Image).Value = allImages[i];
            storeimage.Parameters.Add("@imageName", SqlDbType.VarChar, 100).Value = allImageNames[i];

            myConnection.Open();
            storeimage.ExecuteNonQuery();
            myConnection.Close();
        }
        return "Image Gallery has been created successfully!!";
    }

// Add more operations here and mark them with [OperationContract]
}

My Service name is PhotoGalleryService -

7) Now, let’s add a service reference into our Silverlight Application with the name PhotoGalleryProxy as below -

8) Now, let’s add a code for our Button Click event which will use this added service proxy and pass the values like user name, image collection and image names to WCF Service which will save this information into the database -

private void btnSavePhotoGallery_Click(object sender, System.Windows.RoutedEventArgs e)
       {
           try
           {
               PhotoGalleryProxy.PhotoServiceClient proxy = new PhotoGalleryProxy.PhotoServiceClient();
               proxy.DoWorkCompleted += new EventHandler<PhotoGalleryProxy.DoWorkCompletedEventArgs>(proxy_DoWorkCompleted);
               proxy.DoWorkAsync("Pravinkumar", ImageCollection, ImageNameCollection);
           }
           catch (Exception ex)
           {

MessageBox.Show(ex.Message);
}

}

       void proxy_DoWorkCompleted(object sender, PhotoGalleryProxy.DoWorkCompletedEventArgs e)
       {
           MessageBox.Show(e.Result);
       }

9) Now change the Silverlight application properties to make this application as a Offline application that is Out-Of-Browser Application!! as below -

Right click to your Silverlight application and go to Properties. Check the check box “Enable running application out of the browser” as shown above. If you want to set height and width of the application of set some other properties, you can click on “Out-Of-Browser Settings …” button.

10) That’s all you are done with the application which can be used to view your own photos online as well as offline by just dragging and dropping it on the images thumbnails. If you want to save these images you can click on the button as well.

Important – According to me you can try some things like below -

1) When you make application out-of-browser, you can save all the images into Isolated storage and read those images as soon as your application starts next time.

2) Give different effects to images when they are loading on the right side.

3) Implementing Authentication & Authorization of the users using ASP.NET forms authentication.

4) Sharing those images with friends.

and lot more.. Enjoy!!

Do Less Get More

Sunday, January 31, 2010

Photo Gallery Application for Your Desktop as well as Online

1 comment:

Do Less Get More

Blog Archive

About Me

Followers

World Wide Visitors