Silverlight开发实践--My Album(源)

 

Silverlight是微软一个跨浏览器、跨客户平台的技术，能够设计、开发和发布有多媒体体验与富交互(RIA)的网络交互程序。

最近在花一部分时间学习Silverlight，虽然有时会遇到一些莫名其妙的错误，但是总的感觉还可以，它给我们带来的Rich Application真的很棒。值得一学！

我会将我学习到的成果分享给大家，希望能对大家有帮助，也希望和大家一起学习Sliverlight！

 

今天和大家分享的是一个图片相册，功能很简单，SL高手见笑啦！效果如下：

制作过程：

首先用Canves来布局相册列表，并在每一个子Canves中添加Image对象。

Code
<Canvas Width="170" Height="130" Background="AliceBlue"  x:Name="album0" Opacity="1" Canvas.Left="15" Canvas.Top="55">
            <!--应用变化特效-->
            <Canvas.RenderTransform>
                <TransformGroup>
                    <!--缩放变化-->
                    <ScaleTransform ScaleX="1" ScaleY="1"></ScaleTransform>
                    <!--扭曲变化-->
                    <SkewTransform  AngleX="0" AngleY="0"></SkewTransform>
                    <!--移动变化-->
                    <TranslateTransform X="0" Y="0"></TranslateTransform>
                    <!--旋转变化-->
                    <RotateTransform Angle="0"></RotateTransform>
                </TransformGroup>
            </Canvas.RenderTransform>
            <Image x:Name="Image0" Width="160" Height="120" Canvas.Left="5" Canvas.Top="5" Stretch="Fill"></Image>
        </Canvas>

 

其中利用了一些简单的变化效果。创建了第一个元素，接下来的11个元素基本上是一样的，要修改的就是相对于主Canves的位置和相应的x：Name的值。

然后就是给每一个图片对象添加4个Storyboard：

鼠标经过故事板，鼠标移出故事板，鼠标第一次单击故事板，鼠标再次单击故事板。

当然，这个工作最好用Blend来搞定。

 

Code
            <!--鼠标进入时，图片放大一倍-->
            <Storyboard x:Name="mouseEnter0">
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="album0"
                                               Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">                    
                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"></SplineDoubleKeyFrame>
                    <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="1.1"></SplineDoubleKeyFrame>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="album0"
                                               Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"></SplineDoubleKeyFrame>
                    <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="1.1"></SplineDoubleKeyFrame>
                </DoubleAnimationUsingKeyFrames>   
            </Storyboard>
            <!--鼠标移出时，图片变回原大小-->
            <Storyboard x:Name="mouseLeave0">
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="album0"
                                               Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"></SplineDoubleKeyFrame>
                    <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1.1"></SplineDoubleKeyFrame>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="album0"
                                               Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"></SplineDoubleKeyFrame>
                    <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1.1"></SplineDoubleKeyFrame>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
            <!--鼠标左键单击时，设置图片为画布大小-->
            <Storyboard x:Name="PicZoomIn0">
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="album0" Duration="00:00:00.0010000"
                                               Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1.1"></SplineDoubleKeyFrame>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="album0" Duration="00:00:00.0010000"
                                               Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1.1"></SplineDoubleKeyFrame>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="album0"
                                               Storyboard.TargetProperty="(FrameworkElement.Width)">
                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="170"></SplineDoubleKeyFrame>
                    <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="300"></SplineDoubleKeyFrame>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="album0"
                                               Storyboard.TargetProperty="(FrameworkElement.Height)">
                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="130"></SplineDoubleKeyFrame>
                    <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="300"></SplineDoubleKeyFrame>
                </DoubleAnimationUsingKeyFrames>
                
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Image0"
                                               Storyboard.TargetProperty="(FrameworkElement.Width)">
                    <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="300"></SplineDoubleKeyFrame>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Image0"
                                               Storyboard.TargetProperty="(FrameworkElement.Height)">
                    <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="300"></SplineDoubleKeyFrame>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
            <!--鼠标再次单击是，图片变回原来大小-->
            <Storyboard x:Name="PicZoomOut0">
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="album0" Duration="00:00:00.0010000"
                                               Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1.1"></SplineDoubleKeyFrame>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="album0" Duration="00:00:00.0010000"
                                               Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1.1"></SplineDoubleKeyFrame>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="album0"
                                               Storyboard.TargetProperty="(FrameworkElement.Width)">
                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="170"></SplineDoubleKeyFrame>
                    <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="170"></SplineDoubleKeyFrame>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="album0"
                                               Storyboard.TargetProperty="(FrameworkElement.Height)">
                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="130"></SplineDoubleKeyFrame>
                    <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="130"></SplineDoubleKeyFrame>
                </DoubleAnimationUsingKeyFrames>

                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Image0"
                                               Storyboard.TargetProperty="(FrameworkElement.Width)">
                    <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="160"></SplineDoubleKeyFrame>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Image0"
                                               Storyboard.TargetProperty="(FrameworkElement.Height)">
                    <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="120"></SplineDoubleKeyFrame>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>

其他图片对象的代码请参照源码。

最后的工作就是利用C#加载图片，以及编写鼠标移入移出和单击响应的事件。

 

Code
public string AlbumTitle = "Brian's Constellation Album";//定义页面题目
        public string[] ImageArray = new string[12];//定义图片路径数组
        private bool zoomFlag = false;//判断图片放大还是缩小

        public Page()
        {
            InitializeComponent();
            LoadImages();
        }

        private void InitImagePath()
        {
            ImageArray[0] = "Image/1.jpg";
            ImageArray[1] = "Image/2.jpg";
            ImageArray[2] = "Image/3.jpg";
            ImageArray[3] = "Image/4.jpg";
            ImageArray[4] = "Image/5.jpg";
            ImageArray[5] = "Image/6.jpg";
            ImageArray[6] = "Image/7.jpg";
            ImageArray[7] = "Image/8.jpg";
            ImageArray[8] = "Image/9.jpg";
            ImageArray[9] = "Image/10.jpg";
            ImageArray[10] = "Image/11.jpg";
            ImageArray[11] = "Image/12.jpg";
        }
        private void LoadImages()
        {
            InitImagePath();
            txtTitle.Text = AlbumTitle;
            for (int i = 0; i <=ImageArray.Length-1; i++)
            {
                if(!string.IsNullOrEmpty(ImageArray[i]))
                {
                    string namestr = "album" + i.ToString();


                    Canvas currentCanves = (Canvas)this.FindName(namestr);

                    currentCanves.MouseEnter +=new MouseEventHandler(mouseEnter);
                    currentCanves.MouseLeave += new MouseEventHandler(mouseLeave);
                    currentCanves.MouseLeftButtonDown += new MouseButtonEventHandler(PicZoomIn);
                    currentCanves.Opacity = 1;
                    currentCanves.Visibility = Visibility.Visible;

                    namestr = "Image" + i.ToString();
                    ((Image)this.FindName(namestr)).Source = new BitmapImage(new Uri(ImageArray[i], UriKind.Relative));
                }
            }
        }

        protected void mouseEnter(object sender, MouseEventArgs e)
        {
            //设置ZIndex为0，使其不会被其他画布遮住
            for (int i = 0; i < ImageArray.Length; i++)
            {
                string namestr = "album" + i.ToString();
                ((Canvas)this.FindName(namestr)).SetValue(Canvas.ZIndexProperty, 0);
            }

            string imagepostion = ((Canvas)sender).Name.Substring(5);
            string namestring = "mouseEnter" + imagepostion.ToString();
            ((Storyboard)this.FindName(namestring)).Begin();//调用故事板的Begin方法开始动画
        }
        protected void mouseLeave(object sender, EventArgs e)
        {
            string imagepostion = ((Canvas)sender).Name.Substring(5);//获取5个字符后的数字
            if (zoomFlag)
            {
                string namestring = "PicZoomOut" + imagepostion;
                ((Storyboard)this.FindName(namestring)).Begin();

                namestring = "mouseLeave" + imagepostion;
                ((Storyboard)this.FindName(namestring)).Begin();
                zoomFlag = false;
            }
            else
            {
                string namestring = "mouseLeave" + imagepostion;
                ((Storyboard)this.FindName(namestring)).Begin();
            }
        }
        protected void PicZoomIn(object sender, MouseEventArgs e)
        {
            string imagepostion = ((Canvas)sender).Name.Substring(5);
            if (zoomFlag)
            {
                string namestring = "PicZoomOut" + imagepostion;
                ((Storyboard)this.FindName(namestring)).Begin();
                zoomFlag = false;
            }
            else
            {
                string namestring = "PicZoomIn" + imagepostion;
                ((Storyboard)this.FindName(namestring)).Begin();
                ((Canvas)sender).SetValue(Canvas.ZIndexProperty, 1);
                zoomFlag = true;
            }
        }

 

实现的原理很简单，比较适合学习SL的新手。仅供学习参考。

最后留个问题：我打算实现图片从中心处变大，但是没有成功，只能用改变长度和宽度的方法，希望SL高手指教。

源码：/Files/gaoweipeng/SLAlbum.rar

Silverlight开发实践系列（提供源码）