SilverLight入门实例（一）

时间：2010-09-07 来源：风的家园

大家好，在学习Silverlight的朋友门，如果你刚刚开始学习银光，那就和我一起来探讨这个神奇的东东，或者也可以加我的QQ：16853655，注明“博客园：银光”

我们先开始做一个图片滚动展览店

第一步，相信各位都会操作吧，添加一个Silverlight的应用程序项目

在Silverlight程序项目下(非WEB项目哦)，添加一下两个文件

建立“ShopShow.xaml” 控件文件,代码如下：

ShopShow.xaml 1 <UserControl x:Class="SilverlightDemo.ShopShow"
2     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4              Width="1280" Height="800"
5              >
6     <Grid>
7         <Grid.Background>
8             <ImageBrush ImageSource="http://localhost:2149/Images/bg.jpg" Stretch="Fill" />
9         </Grid.Background>
10         <Image x:Name="shower" Width="400" Height="300" Stretch="Fill" Visibility="Collapsed">
11             <Image.Effect>
12                 <DropShadowEffect Color="Aqua" BlurRadius="10" Opacity="0.8" ShadowDepth="0"/>
13             </Image.Effect>
14         </Image>
15         <Canvas x:Name="moveCanvas" Margin="250 160 0 0"></Canvas>
16         <StackPanel Orientation="Horizontal" Margin="500 500 0 0">
17             <Button Width="50" Height="30" Content="Play" Margin="10" x:Name="btnStart" Click="btnStart_Click"></Button>
18             <Button Width="50" Height="30" Content="Stop" Margin="10" x:Name="btnStop" Click="btnStop_Click"></Button>
19         </StackPanel>
20     </Grid>
21 </UserControl>
22

ShopShop.xaml.cs 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.Threading;
using System.Windows.Media.Imaging;

namespace SilverlightDemo
{
    public partial class ShopShow : UserControl
    {
        private double centerX = 400;
        private double centerY = 300;
        private double width = 400;
        private double height = 60;
        private double degree = 0;//度数值
        List<ShopItem> objList = new List<ShopItem>();//项集合类
        private double itemWidth = 160;
        private double itemHeight = 80;
        private double count = 14;
        private double currentOpacity = 0;
        private DispatcherTimer timer;

        public ShopShow()
        {
            InitializeComponent();
            this.Loaded +=new RoutedEventHandler(ShopShow_Loaded);
        }

        private void ShopShow_Loaded(object sender, RoutedEventArgs e)
        {
            this.timer = new DispatcherTimer();
            for (var i = 1; i <= this.count; i++)
            {
                //实例化用户控件
                ShopItem myShopItem = new ShopItem();
                Image myImage = myShopItem.obj;

                //加载唱片图片
                Uri myUri = new Uri(String.Format("http://localhost:2149/Images/album{0}.jpg", i));
                BitmapImage bitmap = new BitmapImage(myUri);
                myImage.Source = bitmap;

                //绑定控件事件
                myImage.MouseEnter +=new MouseEventHandler(myImage_MouseEnter);
                myImage.MouseLeave +=new MouseEventHandler(myImage_MouseLeave);
                myImage.MouseLeftButtonDown +=new MouseButtonEventHandler(myImage_MouseLeftButtonDown);

                //添加到用户控件里
                this.objList.Add(myShopItem);
                moveCanvas.Children.Add(myShopItem);
            }
            timer.Tick += new EventHandler(timer_Tick);
            TimeSpan sp = new TimeSpan(0, 0, 0, 0, 10);
            timer.Interval = sp;
            timer.Start();
        }

        public void myImage_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            Image img = sender as Image;
            shower.Visibility = Visibility.Visible;
            shower.Source = img.Source;
        }

        public void myImage_MouseEnter(object sender, MouseEventArgs e)
        {
            timer.Stop();
            Image img = sender as Image;
            currentOpacity = img.Opacity;
            img.Opacity = 1;
        }

        public void myImage_MouseLeave(object sender, MouseEventArgs e)
        {
            timer.Start();
            Image img = sender as Image;
            img.Opacity = currentOpacity;
        }

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

        private void StartMove()
        {
            for (var i = 0; i < objList.Count;i++ )
            {
                //根据控件数量总数和周圆计算一个平均值
                var tmp = (this.degree + (360 / this.count * i)) % 360;
                tmp = tmp * Math.PI / 180;
                var posX = (this.width) * Math.Sin(tmp);//更新X坐标
                var posY = (this.height) * Math.Cos(tmp);//更新Y坐标
                ShopItem obj = this.objList[i];
                //根据高宽计算缩放比例
                double scale = (2 * this.height - posY) / (3 * this.height + this.itemHeight / 2);
                Canvas.SetLeft(obj, centerX + posX - (itemWidth / 2) * scale);
                Canvas.SetTop(obj, centerY - posY - (itemHeight / 2) * scale);
                Canvas.SetZIndex(obj, int.Parse(Math.Ceiling(count * scale).ToString()));
                //创建并应用变形属性
                ScaleTransform st = new ScaleTransform();
                st.ScaleX = scale;
                st.ScaleY = scale;
                obj.RenderTransform = st;
                obj.Opacity = scale;
            }
            this.degree = this.degree - 0.3;
        }

        private void btnStart_Click(object sender, RoutedEventArgs e)
        {
            timer.Start();
        }

        private void btnStop_Click(object sender, RoutedEventArgs e)
        {
            timer.Stop();
        }
    }
}

建立 “ShopItem.xaml” 控件文件，代码如下：

后台CS文件无需添加代码。

建立以上两个文件后，在App.xaml.cs的启动函数里修改如下：

        private void Application_Startup(object sender, StartupEventArgs e)
        {
            this.RootVisual = new ShopShow();
        }

然后在准备一个背景图片和14个类似海报的图片。

好了，开始运行去吧，别忘记先编译Silverlight程序项目后，再测试WEB浏览！