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