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

以下是代码：

<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>

 

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、。。。。总之可以达到商用的效果。

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