SilverLight入门实例（一）

大家好，在学习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” 控件文件，代码如下：

 

< UserControl x:Class = " SilverlightDemo.ShopItem "
    xmlns = " http://schemas.microsoft.com/winfx/2006/xaml/presentation "  
    xmlns:x = " http://schemas.microsoft.com/winfx/2006/xaml "  
    Width = " 135 "  Height = " 135 " >
     < Grid x:Name = " LayoutRoot "  Background = " White " >
         < Image x:Name = " obj "
           Width = " 135 "
           Height = " 135 "
           Stretch = " Fill " />
     </ Grid >
</ UserControl >

 

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

 

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

 

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

 

 

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

 

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