Silerlight实例（1）

开通了园里的博客，总得写点东西，不然感觉对不起园主和园友了。呵呵。

好了，今天来个Silerlight动画相册的实例，希望对初学者有点帮助。

废话就不多说了，打开你的Vs2008，新建一个Silerlight应用程序，具体怎么新建，你可以去参考一下资料。

下一步，我们该做什么呢？

恩。先弄个界面出来吧。打开MainPage.XAML 当然，这里不一定是MainPage.XAML。具体视你的项目了。我这里初始页面是MainPage.XAML。

首先，我们先弄个布局。

用Grid布局吧，Silerlight下最灵活的布局方式.

放上这么一句话

<Grid x:Name="LayoutRoot" Background="White" Clip="M0.5,0.5 L639.5,0.5 L639.5,479.5 L0.5,479.5 z">
</Grid>

这段意思，我想大家都很清楚。要不是不清楚的话，可能是Grid的Clip这个属性吧。这个表示名字叫"LayoutRoot"的Grid的剪切区域，你也可以利用Blend 3来做布局。

好了，下面我该放一张图片了。做相册，怎么能没有图片呢？

 

 完成后是这样的。

<Grid x:Name="LayoutRoot" Background="White" Clip="M0.5,0.5 L639.5,0.5 L639.5,479.5 L0.5,479.5 z">
        <Image x:Name="Image1" Margin="0,0,0,0"
                       Source="/Photo/Photo01_640480.JPG"
                       Stretch="Fill" />
</Grid>

好了，是不是感觉还少了点什么？来点提示文字吧 ，或是来点音乐也行啊。没问题，看下面，我们加入一个TextBlock和一个MediaElement进来。

最终效果：

 

<UserControl x:Class="Silverlight.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">
    <Grid x:Name="LayoutRoot" Background="White" Clip="M0.5,0.5 L639.5,0.5 L639.5,479.5 L0.5,479.5 z">
         <!-- 相册的图片 -->
        <Image x:Name="Image1" Margin="0,0,0,0"
                       Source="/Photo/Photo01_640480.JPG"
                       Stretch="Fill" />
         <!-- 相册的提示文字 -->
        <TextBlock Height="21.75" Margin="93,0,74,0" VerticalAlignment="Bottom" Text="照片的介绍文字" TextWrapping="Wrap" FontSize="16" Foreground="#FF323ECC" TextAlignment="Center" x:Name="labelText" FontWeight="Bold" FontFamily="Arial"/>

         <!-- 播放背景音乐 -->
        <MediaElement Source="/Media/title.wma" AutoPlay="True" Volume="1" HorizontalAlignment="Right" VerticalAlignment="Bottom" Width="25" Margin="0,0,34,8" Height="11" MediaEnded="MediaElement1_MediaEnded" x:Name="MediaElement1" />
    </Grid>
</UserControl>

我说明一下：Silerlight应用程序页面都是在XAML文件表示，当然你也可以利用我们上面说Microsoft Expression Blend 3 可视化的来制作界面

MediaElement标签下，我们定义了一个MediaElement.MediaEnded 事件：MediaEnded="MediaElement1_MediaEnded"，表示当播放完成后要做什么。

Ok ，我们的界面做好了。先预览一下吧。

恩，感觉好不错。有图片了，有音乐了。

下面，我们就让它动起来。打开MainPage.xmal.cs文件，我们来代码实现动画。就是今天的主题了。

首先我们写一个让图片动起来的方法如下：

       // 宣告一个动画型别的变数。
        Storyboard sb;
        // 建立一个用来储存照片相对路径的阵列。
        string[] photoArray = new string[12];
        // 建立一个用来储存照片说明文字的阵列。
        string[] photoToolTipArray = new string[12];
        // 建立一个变数来代表目前所要显示之照片的索引。
        int photoIndex = 0;
       private void LoadPhotos()
        {
        }

接下来，具体实现这个方法：

        private void LoadPhotos()
        {
            // 将各张照片的相对路径存入阵列中。
            photoArray[0] = "/Photo/Photo01_640480.JPG";
            photoArray[1] = "/Photo/Photo02_640480.JPG";
            photoArray[2] = "/Photo/Photo03_640480.JPG";
            photoArray[3] = "/Photo/Photo04_640480.JPG";
            photoArray[4] = "/Photo/Photo05_640480.JPG";
            photoArray[5] = "/Photo/Photo06_640480.JPG";
            photoArray[6] = "/Photo/Photo07_640480.JPG";
            photoArray[7] = "/Photo/Photo08_640480.JPG";
            photoArray[8] = "/Photo/Photo09_640480.JPG";
            photoArray[9] = "/Photo/Photo10_640480.JPG";
            photoArray[10] = "/Photo/Photo11_640480.JPG";
            photoArray[11] = "/Photo/Photo12_640480.JPG";

            // 将各张照片的说明文字存入阵列中。
            photoToolTipArray[0] = "图片1";
            photoToolTipArray[1] = "图片2";
            photoToolTipArray[2] = "图片3";
            photoToolTipArray[3] = "图片4";
            photoToolTipArray[4] = "图片5";
            photoToolTipArray[5] = "图片6";
            photoToolTipArray[6] = "图片7";
            photoToolTipArray[7] = "图片8";
            photoToolTipArray[8] = "图片9";
            photoToolTipArray[9] = "图片10";
            photoToolTipArray[10] = "图片11";
            photoToolTipArray[11] = "图片12";

            // 显示照片的介绍文字。
            labelText.Text = (photoIndex + 1) + "∕" + photoArray.Count() + "－" + photoToolTipArray[photoIndex];

            // 建立转换群组。
            TransformGroup tg = new TransformGroup();

            // 建立 ScaleTransform 物件。
            ScaleTransform st = new ScaleTransform()
            {
                ScaleX = 1,
                ScaleY = 1
            };


            // 将 ScaleTransform 物件加入转换群组中。
            tg.Children.Add(st);

            // 将转换群组指派给 Image 控制项的 RenderTransform 属性，以便套用转换。
            Image1.RenderTransform = tg;

            // 设定 Image 控制项之转换的中心点。
            Image1.RenderTransformOrigin = new Point(0.5, 0.5);

            // 建立动画物件。
            sb = new Storyboard();

            // 设定当动画播放完成时所要执行的事件处理常式。
            sb.Completed += new EventHandler(sb_Completed);

            // 建立 DoubleAnimation 类型的动画。
            DoubleAnimation animationScaleX = new DoubleAnimation();
            DoubleAnimation animationScaleY = new DoubleAnimation();

            // 设定开始时间。
            animationScaleX.BeginTime = animationScaleY.BeginTime = new TimeSpan(0, 0, 0, 0, 0);
            // 设定动画的时间长短。
            animationScaleX.Duration = animationScaleY.Duration = new Duration(TimeSpan.FromMilliseconds(3500));

            sb.Children.Add(animationScaleX);
            sb.Children.Add(animationScaleY);

            // 以 Image 控制项做为动画的目标物件。
            Storyboard.SetTarget(animationScaleX, Image1);
            Storyboard.SetTarget(animationScaleY, Image1);

            // 设定动画的目标属性。
            Storyboard.SetTargetProperty(animationScaleX, new PropertyPath("(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"));
            Storyboard.SetTargetProperty(animationScaleY, new PropertyPath("(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"));

            // 设定目标属性的目标值，也就是放大的比例。
            animationScaleX.To = 2;
            animationScaleY.To = 2;

            // 播放动画。
            sb.Begin();

        }
        //动画完成后的事件
        private void sb_Completed(object sender, EventArgs e)
        {
            sb.Stop();

            photoIndex++;

            if (photoIndex > photoArray.Count() - 1)
            {
                photoIndex = 0;
            }

            // 变换照片。
            Image1.Source = new BitmapImage(new Uri(photoArray[photoIndex], UriKind.Relative));

            // 变换介绍文字。
            labelText.Text = (photoIndex + 1) + "∕" + photoArray.Count() + "－" + photoToolTipArray[photoIndex];

            // 再次播放动画来形成循环的效果。
            sb.Begin();
        }

Ok，我们还差一点东西，那就是程序启动时，让它动起来。

加上这么一段代码：

 

public MainPage()
        {
            InitializeComponent();
            //开始动画啦。。呵呵
            LoadPhotos();
        }

万事OK，现在来看下。美哉。动画出来了，还有音乐。呵呵。

希望和大家多多交流。

参考资料：章立民的《大事讲堂Silerlight 2.0 开发技术精粹C#版》