Silverlight跑马灯

这个效果实在太多了，不管是flash版还是html（javascript）版都屡见不鲜了，这里就上一个Silverlight版本的，直接上代码（这里的跑马灯其实也可以说是一个图片展示（旋转）的动画效果）：

1. 我们会新建一个ShopItem的UserControl，也即用来放置一张图片的容器，xaml部分：

<Grid x:Name="LayoutRoot" BACkground="White">
        <Image x:Name="obj" Width="288" Height="512" Stretch="Fill"/>
</Grid>

对应的C#部分代码不用写。

2. 在我们的MainPage里使用我们的ShopItem的UserControl，XAML部分：

<Grid x:Name="LayoutRoot" BACkground="#ff333333">
        <Image x:Name="shower" Width="180" Height="180" Stretch="Fill" Visibility="Collapsed">
            <Image.Effect>
                <DropShadowEffect Color="White" BlurRadius="10" Opacity=".8" ShadowDepth="0"/>
            </Image.Effect>
        </Image>
        <Canvas x:Name="moveCanvas"/>
        <StackPanel Orientation="Horizontal" Margin="300,500,0">
            <Button Width="50" Height="30" Content="Play" x:Name="btnStart" Click="btnStart_Click"/>
            <Button Width="50" Height="30" Content="Stop" Margin="10" x:Name="btnStop" Click="btnStop_Click"/>
        </StackPanel>
    </Grid>

对应的C#代码：

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 SilverlightApplication1.Assets;
using System.Windows.Threading;
using System.ComponentModel;
using System.Collections.ObjectModel;
using System.Windows.Media.Imaging;

namespace SilverlightApplication1
{
    public partial class MainPage : UserControl
    {
        #region Field
        private DispatcherTimer timer;
        private int count = 10;
        private List<ShopItem> objList = new List<ShopItem>();
        private double degree = 10;
        privatE int width = 400;
        privatE int height = 100;
        privatE int itemHeight = 180;
        privatE int itemWidth = 100;
        #endregion

        #region Constructor
        public MainPage()
        {
            InitializeComponent();

            this.Loaded += new RoutedEventHandler(MainPage_Loaded);
        }
        #endregion

        #region Event
        void MainPage_Loaded(object sender,RoutedEventArgs E)
        {
            timer = new DispatcherTimer();
            for (int i = 0; i < count; i++)
            {
                ShopItem item = new ShopItem();
                Image image = item.obj;

                Uri uri = new Uri(String.Format("Assets/Images/{0}.jpg",(i + 1)),UriKind.RelativE);
                BitmapImage bitmap = new BitmapImage(uri);
                image.source = bitmap;

                image.MouseEnter += new MouseEventHandler(image_MouseEnter);
                image.MouSELEave += new MouseEventHandler(image_MouSELEavE);
                image.MouSELEftButtonDown += new MouseButtonEventHandler(image_MouSELEftButtonDown);

                objList.Add(item);
                moveCanvas.Children.Add(item);
            }
            timer.Tick += new EventHandler(timer_Tick);
            TimeSpan ts = new TimeSpan(0,20);
            timer.Interval = ts;
            timer.Start();
        }

        void timer_Tick(object sender,EventArgs E)
        {
            StartMove();
        }

        void image_MouSELEftButtonDown(object sender,MouseButtonEventArgs E)
        {

        }

        void image_MouSELEave(object sender,MouseEventArgs E)
        {

        }

        void image_MouseEnter(object sender,MouseEventArgs E)
        {

        }

        private void btnStart_Click(object sender,RoutedEventArgs E)
        {

        }

        private void btnStop_Click(object sender,RoutedEventArgs E)
        {

        }
        #endregion

        #region Helper
        private void StartMove()
        {
            for (int i = 0; i < objList.Count; i++)
            {
                double offset = (degree + (360 / count) * i) % 360;
                offset = offset * Math.PI / 180;
                double posx = width * Math.Sin(offset);
                double posy = height * Math.Cos(offset);
                ShopItem obj = objList[i];

                //For the scale:
                double scale = (2 * height - posy) / (3 * height + itemHeight / 2);
                Canvas.SetLeft(obj,this.width / 2 + 300 + posx - (itemWidth / 2) * scalE);
                Canvas.SetTop(obj,this.height / 2 + 180 - posy - (itemHeight / 2) * scalE);
                Canvas.SetZIndex(obj,int.Parse(Math.Ceiling(count * scalE).ToString()));

                //Transform:
                ScaleTransform st = new ScaleTransform();
                st.ScaleX = scale;
                st.ScaleY = scale;
                obj.RenderTransform = st;
                obj.opacity = scale;
            }
            degree -= .3;
        }
        #endregion


        
    }


}

添加的按钮事件可以自行添加一些控制逻辑，比如旋转方向，Stop,Start的简单逻辑。