用Silverlight制作一个广告控件，第一步

以下是代码：

前台XML

< UserControl  x:Class ="SilverlightApplication1.MainPage"
    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"  d:DesignWidth ="640"  d:DesignHeight ="480"  Loaded ="UserControl_Loaded" >
     < UserControl.Resources >
         < Storyboard  x:Name ="Storyboard1"  AutoReverse ="False" >
             < DoubleAnimationUsingKeyFrames  BeginTime ="00:00:00"  Storyboard.TargetProperty ="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" >
                 < EasingDoubleKeyFrame  KeyTime ="00:00:00"  Value ="640" />
                 < EasingDoubleKeyFrame  KeyTime ="00:00:01"  Value ="0" >
                     < EasingDoubleKeyFrame.EasingFunction >
                         < QuinticEase  EasingMode ="EaseInOut" />
                     </ EasingDoubleKeyFrame.EasingFunction >
                 </ EasingDoubleKeyFrame >
             </ DoubleAnimationUsingKeyFrames >
         </ Storyboard >
         < Storyboard  x:Name ="Storyboard2" >
             < DoubleAnimationUsingKeyFrames  BeginTime ="00:00:00"  Storyboard.TargetName ="rectangle"  Storyboard.TargetProperty ="(UIElement.Effect).(DropShadowEffect.BlurRadius)" >
                 < EasingDoubleKeyFrame  KeyTime ="00:00:00"  Value ="0" />
                 < EasingDoubleKeyFrame  KeyTime ="00:00:00.5000000"  Value ="10" />
             </ DoubleAnimationUsingKeyFrames >
         </ Storyboard >
         < Storyboard  x:Name ="Storyboard3" >
             < DoubleAnimationUsingKeyFrames  BeginTime ="00:00:00"  Storyboard.TargetName ="rectangle"  Storyboard.TargetProperty ="(UIElement.Effect).(DropShadowEffect.BlurRadius)" >
                 < SplineDoubleKeyFrame  KeyTime ="00:00:00"  Value ="10" />
                 < SplineDoubleKeyFrame  KeyTime ="00:00:00.5000000"  Value ="0" />
             </ DoubleAnimationUsingKeyFrames >
         </ Storyboard >
     </ UserControl.Resources >
   < Grid  x:Name ="LayoutRoot" >
         < Grid  x:Name ="grid1"  RenderTransformOrigin ="0,0" >
             < Grid.RenderTransform >
                 < TransformGroup >
                     < ScaleTransform />
                     < SkewTransform />
                     < RotateTransform />
                     < TranslateTransform  X ="640" />
                 </ TransformGroup >
             </ Grid.RenderTransform >
             < Grid.Background >
                 < ImageBrush  ImageSource ="1.jpg" />
             </ Grid.Background >
         </ Grid >
         < Grid  x:Name ="grid2"  RenderTransformOrigin ="0,0" >
             < Grid.RenderTransform >
                 < TransformGroup >
                     < ScaleTransform />
                     < SkewTransform />
                     < RotateTransform />
                     < TranslateTransform  X ="640" />
                 </ TransformGroup >
             </ Grid.RenderTransform >
             < Grid.Background >
                 < ImageBrush  ImageSource ="2.jpg" />
             </ Grid.Background >
         </ Grid >
         < Grid  x:Name ="grid3"  RenderTransformOrigin ="0,0" >
             < Grid.RenderTransform >
                 < TransformGroup >
                     < ScaleTransform />
                     < SkewTransform />
                     < RotateTransform />
                     < TranslateTransform  X ="640" />
                 </ TransformGroup >
             </ Grid.RenderTransform >
             < Grid.Background >
                 < ImageBrush  ImageSource ="3.jpg" />
             </ Grid.Background >
         </ Grid >
         < Grid  x:Name ="grid4"  RenderTransformOrigin ="0,0" >
             < Grid.RenderTransform >
                 < TransformGroup >
                     < ScaleTransform />
                     < SkewTransform />
                     < RotateTransform />
                     < TranslateTransform  X ="640" />
                 </ TransformGroup >
             </ Grid.RenderTransform >
             < Grid.Background >
                 < ImageBrush  ImageSource ="4.jpg" />
             </ Grid.Background >
         </ Grid >
         < Canvas  Height ="40"  Margin ="0,0,0,0"  VerticalAlignment ="Bottom" >
             < Canvas.Background >
                 < SolidColorBrush  Color ="#FF820000"  Opacity ="0.5" />
             </ Canvas.Background >
             < Rectangle  Name ="rec1"  Stroke ="Black"  Height ="30"  Width ="30"  Canvas.Left ="548"  Canvas.Top ="5"  RadiusX ="5.5"  RadiusY ="5.5"  RenderTransformOrigin ="0.5,0.5"  
                       MouseEnter ="rectangle_MouseEnter"
                       MouseLeave ="rectangle_MouseLeave"
                        >
                 < Rectangle.Effect >
                     < DropShadowEffect  ShadowDepth ="0"  Color ="#FFFFD400"  BlurRadius ="0" />
                 </ Rectangle.Effect >
                 < Rectangle.RenderTransform >
                     < TransformGroup >
                         < ScaleTransform />
                         < SkewTransform  AngleX ="0"  AngleY ="0" />
                         < RotateTransform  Angle ="0" />
                         < TranslateTransform />
                     </ TransformGroup >
                 </ Rectangle.RenderTransform >
                 < Rectangle.Fill >
                     < LinearGradientBrush  EndPoint ="0.5,1"  StartPoint ="0.5,0" >
                         < GradientStop  Color ="White"  Offset ="0" />
                         < GradientStop  Color ="#FF932525"  Offset ="1" />
                     </ LinearGradientBrush >
                 </ Rectangle.Fill >
             </ Rectangle >

             < Rectangle  Name ="rec2"  Stroke ="Black"  Height ="30"  Width ="30"  Canvas.Left ="446"  Canvas.Top ="5"  RadiusX ="5.5"  RadiusY ="5.5"  RenderTransformOrigin ="0.5,0.5"  
                       MouseEnter ="rectangle_MouseEnter"
                       MouseLeave ="rectangle_MouseLeave"
                        >
                 < Rectangle.Effect >
                     < DropShadowEffect  ShadowDepth ="0"  Color ="#FFFFD400"  BlurRadius ="0" />
                 </ Rectangle.Effect >
                 < Rectangle.RenderTransform >
                     < TransformGroup >
                         < ScaleTransform />
                         < SkewTransform  AngleX ="0"  AngleY ="0" />
                         < RotateTransform  Angle ="0" />
                         < TranslateTransform />
                     </ TransformGroup >
                 </ Rectangle.RenderTransform >
                 < Rectangle.Fill >
                     < LinearGradientBrush  EndPoint ="0.5,1"  StartPoint ="0.5,0" >
                         < GradientStop  Color ="White"  Offset ="0" />
                         < GradientStop  Color ="#FF932525"  Offset ="1" />
                     </ LinearGradientBrush >
                 </ Rectangle.Fill >
             </ Rectangle >
            
             < Rectangle  Name ="rec3"  Stroke ="Black"  Height ="30"  Width ="30"  Canvas.Left ="480"  Canvas.Top ="5"  RadiusX ="5.5"  RadiusY ="5.5"  RenderTransformOrigin ="0.5,0.5"  
                       MouseEnter ="rectangle_MouseEnter"
                       MouseLeave ="rectangle_MouseLeave"
                        >
                 < Rectangle.Effect >
                     < DropShadowEffect  ShadowDepth ="0"  Color ="#FFFFD400"  BlurRadius ="0" />
                 </ Rectangle.Effect >
                 < Rectangle.RenderTransform >
                     < TransformGroup >
                         < ScaleTransform />
                         < SkewTransform  AngleX ="0"  AngleY ="0" />
                         < RotateTransform  Angle ="0" />
                         < TranslateTransform />
                     </ TransformGroup >
                 </ Rectangle.RenderTransform >
                 < Rectangle.Fill >
                     < LinearGradientBrush  EndPoint ="0.5,1"  StartPoint ="0.5,0" >
                         < GradientStop  Color ="White"  Offset ="0" />
                         < GradientStop  Color ="#FF932525"  Offset ="1" />
                     </ LinearGradientBrush >
                 </ Rectangle.Fill >
             </ Rectangle >
            
             < Rectangle  Name ="rec4"  Stroke ="Black"  Height ="30"  Width ="30"  Canvas.Left ="514"  Canvas.Top ="5"  RadiusX ="5.5"  RadiusY ="5.5"  RenderTransformOrigin ="0.5,0.5"  
                       MouseEnter ="rectangle_MouseEnter"
                       MouseLeave ="rectangle_MouseLeave"
                        >
                 < Rectangle.Effect >
                     < DropShadowEffect  ShadowDepth ="0"  Color ="#FFFFD400"  BlurRadius ="0" />
                 </ Rectangle.Effect >
                 < Rectangle.RenderTransform >
                     < TransformGroup >
                         < ScaleTransform />
                         < SkewTransform  AngleX ="0"  AngleY ="0" />
                         < RotateTransform  Angle ="0" />
                         < TranslateTransform />
                     </ TransformGroup >
                 </ Rectangle.RenderTransform >
                 < Rectangle.Fill >
                     < LinearGradientBrush  EndPoint ="0.5,1"  StartPoint ="0.5,0" >
                         < GradientStop  Color ="White"  Offset ="0" />
                         < GradientStop  Color ="#FF932525"  Offset ="1" />
                     </ LinearGradientBrush >
                 </ Rectangle.Fill >
             </ Rectangle >
         </ Canvas >
     </ Grid >
</ UserControl >

 

后台C#

namespace  SilverlightApplication1
{
     public   partial   class  MainPage : UserControl
    {
         public  MainPage()
        {
            InitializeComponent();
        }

         private   void  UserControl_Loaded( object  sender, System.Windows.RoutedEventArgs e)
        {
        }

         private   void  rectangle_MouseEnter( object  sender, System.Windows.Input.MouseEventArgs e)
        {
             this .Storyboard1.Stop();
             this .Storyboard2.Stop();
             switch  ((sender  as  Rectangle).Name) { 
                 case   " rec1 "  :
                    Storyboard.SetTarget( this .Storyboard1, grid1);
                     break ;
                 case   " rec2 " :
                    Storyboard.SetTarget( this .Storyboard1, grid2);
                     break ;
                 case   " rec3 " :
                    Storyboard.SetTarget( this .Storyboard1, grid3);
                     break ;
                 case   " rec4 " :
                    Storyboard.SetTarget( this .Storyboard1, grid4);
                     break ;
            }
            Storyboard.SetTarget( this .Storyboard2, sender  as  DependencyObject);
             this .Storyboard1.Begin();
             this .Storyboard2.Begin();
        }

         private   void  rectangle_MouseLeave( object  sender, MouseEventArgs e)
        {
            Storyboard3.Stop();
            Storyboard.SetTarget( this .Storyboard3, sender  as  DependencyObject);
            Storyboard3.Begin();
        }
    }
}

 

还有很多不足，这只是第一部，后续会把它完善。
1、要缩减前端XML,多一些动态创建；
2、动画要合理一些，目前太过僵硬；
3、方便用户配制不同的图片和不同数量的数片；
4、加上超级连接；
5、随即几种动画效果。
6、。。。。总之可以达到商用的效果。

以下对代码做了细微调整：