Silverlight 2 Beta 2 - Using Animation for Sorting Image Items

• Download source - 1.76 MB

Introduction

This is a simple Silverlight application to apply drag and drop shopping and use animation on sorting items.

Background

You need to have some Silverlight knowledge.

And some common sense to do computer programming. :)

Using the Code

You must install Silverlight 2 beta 2 tool to edit this project.

First of all, Product class is a template that contains all information for a product and Image object of the product and two DoubleAnimation objects for moving the Image object to the calculated point.

public class Product
{
    public int ProductId
    {
        get;
        set;
    }
    public string ProductName
    {
        get;
        set;
    }
    public int ProductPrice
    {
        get;
        set;
    }
    public string ProductPhoto
    {
        get;
        set;
    }
    public int Recommend
    {
        get;
        set;
    }
    public Image ProductImage
    {
        get;
        set;
    }
    public DoubleAnimation MoveAnimationX
    {
        get;
        set;
    }
    public DoubleAnimation MoveAnimationY
    {
        get;
        set;
    }
    public Product(int productId, string productName, int productPrice, string productPhoto, int recommend)
    {
        this.ProductId = productId;
        this.ProductName = productName;
        this.ProductPrice = productPrice;
        this.ProductPhoto = productPhoto;
        this.Recommend = recommend;
    }
}

And Products class has static product list that has type of List<Product>.

public class Products
{
    public static List<Product> products = new List<Product>();
    static Products()
    {
        products.Add(new Product(1, "Flower 1", 3000, "Flower (1).png", 4));
        products.Add(new Product(2, "Flower 2", 4000, "Flower (2).png", 1));
        products.Add(new Product(3, "Flower 3", 2500, "Flower (3).png", 2));
        products.Add(new Product(4, "Flower 4", 3600, "Flower (4).png", 8));
        products.Add(new Product(5, "Flower 5", 3000, "Flower (5).png", 5));
        products.Add(new Product(6, "Flower 6", 4000, "Flower (6).png", 2));
        products.Add(new Product(7, "Flower 7", 2500, "Flower (7).png", 3));
        products.Add(new Product(8, "Flower 8", 3600, "Flower (8).png", 1));
    }        
}

And all of the core logic is placed in Page.xaml.cs.

You can see that two DoubleAnimation XAML tags are in the <Canvas.Resource>.

Because of some change in Storyboard.SetTargetProperty() method that is not mentioned in MSDN, I couldn't use that method directly. So, I declared those properties on the resource (moveAnimationX, moveAnimationY) and used them like below:

Storyboard.SetTargetProperty(product.MoveAnimationX, 
	Storyboard.GetTargetProperty(moveAnimationX));
Storyboard.SetTargetProperty(product.MoveAnimationY, 
	Storyboard.GetTargetProperty(moveAnimationY));

Next, put items on the canvas by their size, and put additional tooltip rectangle for showing a product's Id, price, recommend, etc.

And attach event handlers for drag and drop like below:

private void AddEventHandler(FrameworkElement shape)
        {
            shape.MouseEnter += onMouseEnter;
            shape.MouseLeave += onMouseLeave;
            shape.MouseLeftButtonDown += onMouseLeftButtonDown;
            shape.MouseLeftButtonUp += onMouseLeftButtonUp;
            shape.MouseMove += onMouseMove;
        } 

In event handler methods, there's nothing special but to do hittest between Image object and Cart rectangle object. If hittest is positive, then add the Image object to cart list.

IEnumerable<UIElement> shapes = shape.HitTest(new Rect
	(Canvas.GetLeft(Cart), Canvas.GetTop(Cart), 
	Cart.ActualWidth, Cart.ActualHeight));
if (shapes.Count<UIElement>() > 0)
{
    Cart_MouseLeftButtonUp(Cart, new MouseButtonEventArgs());
}

And you can see three buttons each for sort items by Id, price, recommend.

Sorting animation logic is simple. Save the original position of an item and calculate the new position that the item should be in. And set the values to DoubleAnimation's From and To property.

product.MoveAnimationX.From = Canvas.GetLeft(product.ProductImage);
product.MoveAnimationY.From = Canvas.GetTop(product.ProductImage);
product.MoveAnimationX.To = accumulatedWidth;
product.MoveAnimationY.To = accumulatedHeight;

When setting of all of item is over, fire animation.

moveStoryboard.Begin();

Finally, the way to sort is apply the sort algorithm to the item list itself by using List<>.Sort() method.

It's one of the methods that describes the sorting algorithm.

 private int SortById(Product x, Product y)
        {
            if (x == null)
            {
                if (y == null)
                {
                    // If x is null and y is null, they're
                    // equal. 
                    return 0;
                }
                else
                {
                    // If x is null and y is not null, y
                    // is greater. 
                    return -1;
                }
            }
            else
            {
                // If x is not null...
                //
                if (y == null)
                // ...and y is null, x is greater.
                {
                    return 1;
                }
                else
                {
                    // ...and y is not null, compare the 
                    // lengths of the two strings.
                    //
                    int retval = x.ProductId.CompareTo
			(y.ProductId);//x.Length.CompareTo(y.Length);
                    if (retval != 0)
                    {
                        // If the strings are not of equal length,
                        // the longer string is greater.
                        //
                        return retval;
                    }
                    else
                    {
                        // If the strings are of equal length,
                        // sort them with ordinary string comparison.
                        //
                        return x.ProductId.CompareTo(y.ProductId);
                    }
                }
            }
        }

And it's the button event handler that applies sorting algorithm to the item list itself.

private void SortById_Click(object sender, RoutedEventArgs e)
        {
            //moveStoryboard.Begin();
            Products.products.Sort(SortById);
            LoadProducts();            
        }

The CanvasInitialized variable is used to indicate whether the main canvas is initialized or not.

At first, LoadProducts() method loads items to the canvas.

Secondly, LoadProducts() method sorts items by condition.

I know it's not a good article. :)

But I hope this helps.

Points of Interest

It was study for my work.

I'm trying to develop some food management and recipe community web site.

History

• 9^th July, 2008: Initial post