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

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

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

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

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

获取 Microsoft Silverlight

制作过程:

首先用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开发实践系列(提供源码)

你可能感兴趣的:(工作,浏览器,网络应用,silverlight,Blend)