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

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

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

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

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

制作过程：

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

Code
<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --><CanvasWidth="170"Height="130"Background="AliceBlue"x:Name="album0"Opacity="1"Canvas.Left="15"Canvas.Top="55">
<!--应用变化特效-->
<Canvas.RenderTransform>
<TransformGroup>
<!--缩放变化-->
<ScaleTransformScaleX="1"ScaleY="1"></ScaleTransform>
<!--扭曲变化-->
<SkewTransformAngleX="0"AngleY="0"></SkewTransform>
<!--移动变化-->
<TranslateTransformX="0"Y="0"></TranslateTransform>
<!--旋转变化-->
<RotateTransformAngle="0"></RotateTransform>
</TransformGroup>
</Canvas.RenderTransform>
<Imagex:Name="Image0"Width="160"Height="120"Canvas.Left="5"Canvas.Top="5"Stretch="Fill"></Image>
</Canvas>

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

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

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

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

Code
<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --><!--鼠标进入时，图片放大一倍-->
<Storyboardx:Name="mouseEnter0">
<DoubleAnimationUsingKeyFramesBeginTime="00:00:00"Storyboard.TargetName="album0"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
<SplineDoubleKeyFrameKeyTime="00:00:00"Value="1"></SplineDoubleKeyFrame>
<SplineDoubleKeyFrameKeyTime="00:00:00.2000000"Value="1.1"></SplineDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFramesBeginTime="00:00:00"Storyboard.TargetName="album0"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
<SplineDoubleKeyFrameKeyTime="00:00:00"Value="1"></SplineDoubleKeyFrame>
<SplineDoubleKeyFrameKeyTime="00:00:00.2000000"Value="1.1"></SplineDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<!--鼠标移出时，图片变回原大小-->
<Storyboardx:Name="mouseLeave0">
<DoubleAnimationUsingKeyFramesBeginTime="00:00:00"Storyboard.TargetName="album0"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
<SplineDoubleKeyFrameKeyTime="00:00:00"Value="1"></SplineDoubleKeyFrame>
<SplineDoubleKeyFrameKeyTime="00:00:00.1000000"Value="1.1"></SplineDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFramesBeginTime="00:00:00"Storyboard.TargetName="album0"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
<SplineDoubleKeyFrameKeyTime="00:00:00"Value="1"></SplineDoubleKeyFrame>
<SplineDoubleKeyFrameKeyTime="00:00:00.1000000"Value="1.1"></SplineDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<!--鼠标左键单击时，设置图片为画布大小-->
<Storyboardx:Name="PicZoomIn0">
<DoubleAnimationUsingKeyFramesBeginTime="00:00:00"Storyboard.TargetName="album0"Duration="00:00:00.0010000"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
<SplineDoubleKeyFrameKeyTime="00:00:00"Value="1.1"></SplineDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFramesBeginTime="00:00:00"Storyboard.TargetName="album0"Duration="00:00:00.0010000"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
<SplineDoubleKeyFrameKeyTime="00:00:00"Value="1.1"></SplineDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFramesBeginTime="00:00:00"Storyboard.TargetName="album0"
Storyboard.TargetProperty="(FrameworkElement.Width)">
<SplineDoubleKeyFrameKeyTime="00:00:00"Value="170"></SplineDoubleKeyFrame>
<SplineDoubleKeyFrameKeyTime="00:00:00.3000000"Value="300"></SplineDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFramesBeginTime="00:00:00"Storyboard.TargetName="album0"
Storyboard.TargetProperty="(FrameworkElement.Height)">
<SplineDoubleKeyFrameKeyTime="00:00:00"Value="130"></SplineDoubleKeyFrame>
<SplineDoubleKeyFrameKeyTime="00:00:00.3000000"Value="300"></SplineDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFramesBeginTime="00:00:00"Storyboard.TargetName="Image0"
Storyboard.TargetProperty="(FrameworkElement.Width)">
<SplineDoubleKeyFrameKeyTime="00:00:00.3000000"Value="300"></SplineDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFramesBeginTime="00:00:00"Storyboard.TargetName="Image0"
Storyboard.TargetProperty="(FrameworkElement.Height)">
<SplineDoubleKeyFrameKeyTime="00:00:00.3000000"Value="300"></SplineDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<!--鼠标再次单击是，图片变回原来大小-->
<Storyboardx:Name="PicZoomOut0">
<DoubleAnimationUsingKeyFramesBeginTime="00:00:00"Storyboard.TargetName="album0"Duration="00:00:00.0010000"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
<SplineDoubleKeyFrameKeyTime="00:00:00"Value="1.1"></SplineDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFramesBeginTime="00:00:00"Storyboard.TargetName="album0"Duration="00:00:00.0010000"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
<SplineDoubleKeyFrameKeyTime="00:00:00"Value="1.1"></SplineDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFramesBeginTime="00:00:00"Storyboard.TargetName="album0"
Storyboard.TargetProperty="(FrameworkElement.Width)">
<SplineDoubleKeyFrameKeyTime="00:00:00"Value="170"></SplineDoubleKeyFrame>
<SplineDoubleKeyFrameKeyTime="00:00:00.3000000"Value="170"></SplineDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFramesBeginTime="00:00:00"Storyboard.TargetName="album0"
Storyboard.TargetProperty="(FrameworkElement.Height)">
<SplineDoubleKeyFrameKeyTime="00:00:00"Value="130"></SplineDoubleKeyFrame>
<SplineDoubleKeyFrameKeyTime="00:00:00.3000000"Value="130"></SplineDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>

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

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

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

Code
<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> -->publicstringAlbumTitle="Brian'sConstellationAlbum";//定义页面题目
publicstring[]ImageArray=newstring[12];//定义图片路径数组
privateboolzoomFlag=false;//判断图片放大还是缩小

publicPage()
{
InitializeComponent();
LoadImages();
}

privatevoidInitImagePath()
{
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";
}
privatevoidLoadImages()
{
InitImagePath();
txtTitle.Text=AlbumTitle;
for(inti=0;i<=ImageArray.Length-1;i++)
{
if(!string.IsNullOrEmpty(ImageArray[i]))
{
stringnamestr="album"+i.ToString();


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

currentCanves.MouseEnter+=newMouseEventHandler(mouseEnter);
currentCanves.MouseLeave+=newMouseEventHandler(mouseLeave);
currentCanves.MouseLeftButtonDown+=newMouseButtonEventHandler(PicZoomIn);
currentCanves.Opacity=1;
currentCanves.Visibility=Visibility.Visible;

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

protectedvoidmouseEnter(objectsender,MouseEventArgse)
{
//设置ZIndex为0，使其不会被其他画布遮住
for(inti=0;i<ImageArray.Length;i++)
{
stringnamestr="album"+i.ToString();
((Canvas)this.FindName(namestr)).SetValue(Canvas.ZIndexProperty,0);
}

stringimagepostion=((Canvas)sender).Name.Substring(5);
stringnamestring="mouseEnter"+imagepostion.ToString();
((Storyboard)this.FindName(namestring)).Begin();//调用故事板的Begin方法开始动画
}
protectedvoidmouseLeave(objectsender,EventArgse)
{
stringimagepostion=((Canvas)sender).Name.Substring(5);//获取5个字符后的数字
if(zoomFlag)
{
stringnamestring="PicZoomOut"+imagepostion;
((Storyboard)this.FindName(namestring)).Begin();

namestring="mouseLeave"+imagepostion;
((Storyboard)this.FindName(namestring)).Begin();
zoomFlag=false;
}
else
{
stringnamestring="mouseLeave"+imagepostion;
((Storyboard)this.FindName(namestring)).Begin();
}
}
protectedvoidPicZoomIn(objectsender,MouseEventArgse)
{
stringimagepostion=((Canvas)sender).Name.Substring(5);
if(zoomFlag)
{
stringnamestring="PicZoomOut"+imagepostion;
((Storyboard)this.FindName(namestring)).Begin();
zoomFlag=false;
}
else
{
stringnamestring="PicZoomIn"+imagepostion;
((Storyboard)this.FindName(namestring)).Begin();
((Canvas)sender).SetValue(Canvas.ZIndexProperty,1);
zoomFlag=true;
}
}

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

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

源码：/Files/gaoweipeng/SLAlbum.rar

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