silverlight 跑马灯 轮播 demo

<navigation:Page x:Class="SilverlightApplication1.ProductListSwitch" 
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
           xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
           mc:Ignorable="d"
           xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           xmlns:ctrl="clr-namespace:SilverlightApplication1.cls;assembly=SilverlightApplication1"
           Loaded="Page_Loaded">
    <Canvas x:Name="myCanvas" Background="Orange" Margin="0">
        <Canvas.Resources>
            <Storyboard x:Name="myStoryBoard"/>
        </Canvas.Resources>
        <Grid x:Name="grdHeader" Height="50">
            <TextBlock x:Name="txtTitle" Margin="10" FontSize="20" Foreground="White" TextWrapping="Wrap"></TextBlock>
        </Grid>
        <Grid x:Name="grdProducts" Background="Orange" Margin="0" Canvas.Top="50" />
    </Canvas>
</navigation:Page>
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.Navigation;

namespace SilverlightApplication1
{
    public partial class ProductListSwitch : Page
    {
        private const int pageSize = 5;
        private const double amimationSwitchSpeed = 0.5;
        private const int animationSwitchDuration = 3;

        public ProductListSwitch()
        {
            InitializeComponent();
        }

        public List<KeyValuePair<string,List<object>>> GetProductData()
        {
            var result = new List<KeyValuePair<string,List<object>>>() ;
            var productList1 = new List<object> 
            {
                new 
                {
                    ImageUrl="/Images/none.png",
                    Title = "Panasonic松下GF3 GK微单相机 双镜套机白色 含14mm",
                    Price = 1000
                },
                new 
                {
                    ImageUrl="/Images/none.png",
                    Title = "Panasonic松下GF3 GK微单相机 双镜套机白色 含14mm",
                    Price = 1000
                },
                new 
                {
                    ImageUrl="/Images/none.png",
                    Title = "Panasonic松下GF3 GK微单相机 双镜套机白色 含14mm",
                    Price = 1000
                },
                new 
                {
                    ImageUrl="/Images/none.png",
                    Title = "Panasonic松下GF3 GK微单相机 双镜套机白色 含14mm",
                    Price = 1000
                },
                new 
                {
                    ImageUrl="/Images/none.png",
                    Title = "Panasonic松下GF3 GK微单相机 双镜套机白色 含14mm",
                    Price = 1000
                },
                new 
                {
                    ImageUrl="/Images/none.png",
                    Title = "Panasonic松下GF3 GK微单相机 双镜套机白色 含14mm",
                    Price = 1000
                },
                new 
                {
                    ImageUrl="/Images/none.png",
                    Title = "Panasonic松下GF3 GK微单相机 双镜套机白色 含14mm",
                    Price = 1000
                },
                new 
                {
                    ImageUrl="/Images/none.png",
                    Title = "Panasonic松下GF3 GK微单相机 双镜套机白色 含14mm",
                    Price = 1000
                }
                
            };
            
            result.Add(new KeyValuePair<string,List<object>>("限时抢购",productList1));


            var productList2 = new List<object> 
            {
                new 
                {
                    ImageUrl="/Images/none.png",
                    Title = "Joyang 九阳 豆浆机DJ13B-D08",
                    Price = 380
                },
                new 
                {
                    ImageUrl="/Images/none.png",
                    Title = "Joyang 九阳 豆浆机DJ13B-D08",
                    Price = 380
                }
            };
            result.Add(new KeyValuePair<string, List<object>>("店家推荐", productList2));
            return result;
        }

        private void StartAnimation(List<KeyValuePair<string, List<object>>> data, int dataIndex)
        {
            var pageCount = 0;
            Canvas.SetLeft(grdProducts, 0);
            grdProducts.Width = 0;
            grdProducts.RowDefinitions.Clear();
            grdProducts.ColumnDefinitions.Clear();
            grdProducts.Children.Clear();
            grdProducts.RowDefinitions.Add(new RowDefinition { });
            txtTitle.Text = data[dataIndex].Key;
            for (var i = 0; i < data[dataIndex].Value.Count; i = i + pageSize)
            {
                var grid = new Grid();
                grid.Width = myCanvas.ActualWidth;
                grid.RowDefinitions.Clear();
                grid.ColumnDefinitions.Clear();
                grid.Children.Clear();
                grid.RowDefinitions.Add(new RowDefinition { });
                for (var j = i; j < i + pageSize; j++)
                {
                    grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength((double)1 / (double)pageSize, GridUnitType.Star) });

                    if (j > data[dataIndex].Value.Count - 1)
                    {
                        var productItem = new Grid();
                        Grid.SetRow(productItem, grid.RowDefinitions.Count - 1);
                        Grid.SetColumn(productItem, grid.ColumnDefinitions.Count - 1);
                        grid.Children.Add(productItem);
                    }
                    else
                    {
                        var productItem = new Border { BorderBrush = new SolidColorBrush(Colors.Blue), BorderThickness = new Thickness(10) };
                        //var productItem = new ProductItem();
                        productItem.DataContext = data[dataIndex].Value[j];
                        Grid.SetRow(productItem, grid.RowDefinitions.Count - 1);
                        Grid.SetColumn(productItem, grid.ColumnDefinitions.Count - 1);
                        grid.Children.Add(productItem);
                    }
                }
                grdProducts.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(myCanvas.ActualWidth) });
                Grid.SetRow(grid, grdProducts.RowDefinitions.Count - 1);
                Grid.SetColumn(grid, grdProducts.ColumnDefinitions.Count - 1);
                grid.Children.Add(new TextBlock { Text = "Number:" + i.ToString() });
                grdProducts.Children.Add(grid);
                grdProducts.Width += myCanvas.ActualWidth;
                pageCount++;
            }

            myStoryBoard.Stop();
            myStoryBoard.Children.Clear();

            var doubleAnimation = new DoubleAnimationUsingKeyFrames();
            Storyboard.SetTarget(doubleAnimation, grdProducts);
            Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("(Canvas.Left)"));
            for (var i = 0; i < pageCount; i++)
            {
                var waitFrameStart = new LinearDoubleKeyFrame();
                waitFrameStart.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(animationSwitchDuration * i + amimationSwitchSpeed * i));
                waitFrameStart.Value = 0 - myCanvas.ActualWidth * i;

                var waitFrameEnd = new LinearDoubleKeyFrame();
                waitFrameEnd.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(animationSwitchDuration * i + amimationSwitchSpeed * i + animationSwitchDuration));
                waitFrameEnd.Value = 0 - myCanvas.ActualWidth * i;

                var animationFrame = new LinearDoubleKeyFrame();
                animationFrame.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(animationSwitchDuration * i + amimationSwitchSpeed * i + animationSwitchDuration + amimationSwitchSpeed));
                animationFrame.Value = 0 - myCanvas.ActualWidth * (i + 1);

                doubleAnimation.KeyFrames.Add(waitFrameStart);
                doubleAnimation.KeyFrames.Add(waitFrameEnd);
                if (i < pageCount - 1)
                {
                    doubleAnimation.KeyFrames.Add(animationFrame);
                }

            }
            myStoryBoard.Children.Add(doubleAnimation);
            myStoryBoard.Completed += delegate
            {
                if (++dataIndex < data.Count)
                {
                    StartAnimation(data, dataIndex);
                }
                else if (data.Count > 1)
                {
                    StartAnimation(data, 0);
                }
            };
            myStoryBoard.Begin();
        }

        private void Page_Loaded(object sender, RoutedEventArgs e)
        {
            myCanvas.UpdateLayout();

            grdProducts.Height = myCanvas.ActualHeight - grdHeader.ActualHeight;

            var data = GetProductData();
            StartAnimation(data, 0);
        }

        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            myStoryBoard.Stop();
        }
    }
}

 

posted on 2013-02-02 13:17  空明流光  阅读(536)  评论(0编辑  收藏  举报

导航