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#加载图片，以及编写鼠标移入移出和单击响应的事件。
Codepublic 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高手指教。
