Silverlight 2 Beta 2 - 使用动画对图像项进行排序

• 下载源 - 1.76 MB

引言

这是一个简单的 Silverlight 应用程序，用于应用拖放购物并在排序项目时使用动画。

背景

你需要具备一些 Silverlight 知识。

以及一些进行计算机编程的常识。 :)

Using the Code

你必须安装 Silverlight 2 beta 2 工具才能编辑此项目。

首先，Product 类是一个模板，包含 product 的所有信息和 product 的 Image 对象，以及两个用于将 Image 对象移动到计算点的 DoubleAnimation 对象。

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;
    }
}

并且 Products 类具有 static product 列表，其类型为 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));
    }        
}

所有核心逻辑都放在 *Page.xaml.cs* 中。

你可以看到两个 DoubleAnimation XAML 标签位于 <Canvas.Resource> 中。

由于 Storyboard.SetTargetProperty() 方法中的一些更改（MSDN 中没有提及），我无法直接使用该方法。因此，我在资源 (moveAnimationX, moveAnimationY) 上声明了这些属性，并像下面这样使用它们

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

接下来，根据项目的大小将项目放置在画布上，并放置额外的工具提示矩形以显示产品的 Id、价格、推荐等。

并附加拖放事件处理程序，如下所示

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

在事件处理程序方法中，没有什么特别的，只是在 Image 对象和 Cart 矩形对象之间进行命中测试。如果命中测试为正，则将 Image 对象添加到购物车列表。

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());
}

你可以看到三个按钮，分别用于按 Id、价格、推荐排序项目。

排序动画逻辑很简单。保存项目的原始位置，并计算项目应该位于的新位置。并将这些值设置为 DoubleAnimation 的 From 和 To 属性。

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

当所有项目的设置完成后，触发动画。

moveStoryboard.Begin();

最后，排序方法是将排序算法应用于项目列表本身，通过使用 List<>.Sort() 方法。

这是描述排序算法的方法之一。

 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);
                    }
                }
            }
        }

这是将排序算法应用于项目列表本身的按钮事件处理程序。

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

CanvasInitialized 变量用于指示主画布是否已初始化。

首先，LoadProducts() 方法将项目加载到画布。

其次，LoadProducts() 方法按条件对项目进行排序。

我知道这不是一篇好文章。 :)

但我希望这对您有所帮助。

关注点

这是我工作的研究。

我正在尝试开发一些食物管理和食谱社区网站。

历史

• 2008 年 7 月 9 日：初始发布