Silverlight图片公告栏正式版

上星期贴出了个Silverlight图片公告控件，当时只是初步的实现了效果。今天抽空将它功能完善了并推出正式版。
正式版加入了切换图片动画效果，读取xml文件不再依赖WebService，数字按钮响应功能修正。这次重写了大部分代码，Silverlight的结构也做出了修改，并且对程序进行了“瘦身”，或许细心的人也发现了上次版本中，实现的功能只是很简单可是文件却有300k，经过“瘦身”后Silverlight程序只有8k了。

实现效果：效果测试页

制作所需工具

Visual Studio 2008
Microsoft Expression Blend 2.5 March 2008 Preview

这次我就不制作视频了，Beta版的制作视频：点击进入

改用WebClient来读取Xml文件

读取xml代码

//建立读取xml文件的WebClient

WebClient xmlClient = new WebClient();

xmlClient.DownloadStringCompleted += new DownloadStringCompletedEventHandler(xmlClient_DownloadStringCompleted);

xmlClient.DownloadStringAsync(new Uri(HtmlPage.Document.DocumentUri, "XML/Placard.xml"));

我们再看看Xaml结构上修改了什么。

Placard.xaml文件中Grid代码

<Rectangle.OpacityMask>

</LinearGradientBrush>

</Rectangle.OpacityMask>

</Rectangle>

</StackPanel>

</Grid>

加入了Rectangle （Top）作于鼠标事件获取对象，加入了一个Canvas（temp）用于实现图片切换
现在来说明一下实现动画切换的思路，首先image作为显示图片的主体，实现动画时从后台添加一个图片进temp中，实现的动画的Storyboard都是对这个零时图片进行的，动画完毕后删除加入temp中的图片，并切换image中的图片。这样整个切换流程就完成了。

制作图片切换动画最好能使用Blend来制作这样会简单明了。这个项目中的storyboard我都是用Blend制作的

Storyboard代码

<UserControl.Resources>

</ColorAnimationUsingKeyFrames>

</Storyboard>

</PointAnimationUsingKeyFrames>

</PointAnimationUsingKeyFrames>

</Storyboard>

</PointAnimationUsingKeyFrames>

</PointAnimationUsingKeyFrames>

</Storyboard>

</UserControl.Resources>

自己动手制作一个图片切换动画也很容易，新建一个xaml文件，在文件中加入一个Image，然后开始制作效果。效果做好后就可以把Storyboard代码抄出来复制到Placard中。某些效果不只靠Storyboard就能实现的，Image也会有部分属性作了修改，由于Placard中的切换的图片是在后台代码添加的，所以我们需要按照新xaml中的图片属性来写后台代码。

随机动画切换图片代码

//随机切换图片效果

private void RandomImageAnimation(int nextcurrent)

{

//零时存放下一张图片，用于实现动画切换效果

Image tmpImage = new Image();

tmpImage.SetValue(Image.NameProperty, "tmpimage");

tmpImage.Width = 260;

tmpImage.Height = 195;

tmpImage.Margin = new Thickness(0, 0, 0, 0);

cTimer.Stop();

tmpImage.Source = new BitmapImage(new Uri(pds[nextcurrent].imgurl, UriKind.Relative));

Random sbRandom = new Random();

switch (sbRandom.Next(1, 4))

{

case 1 :

//效果1：图片透明转换

tmpImage.SetValue(OpacityMaskProperty, "#00000000");

temp.Children.Add(tmpImage);

ImageStoryboard1.Begin();

break;

case 2:

//效果2：图片由左下开始往右上透明转换

LinearGradientBrush lgb1 = new LinearGradientBrush();

GradientStop gs1_1 = new GradientStop();

GradientStop gs1_2 = new GradientStop();

gs1_1.SetValue(GradientStop.ColorProperty, "#00000000");

gs1_1.Offset = 0;

gs1_2.SetValue(GradientStop.ColorProperty, "#FFFFFFFF");

gs1_2.Offset = 1;

lgb1.GradientStops.Add(gs1_1);

lgb1.GradientStops.Add(gs1_2);

tmpImage.OpacityMask = lgb1;

temp.Children.Add(tmpImage);

ImageStoryboard2.Begin();

break;

case 3:

//效果3：图片以左上一个点为基点，透明+旋转转换

LinearGradientBrush lgb2 = new LinearGradientBrush();

GradientStop gs2_1 = new GradientStop();

GradientStop gs2_2 = new GradientStop();

gs2_1.SetValue(GradientStop.ColorProperty, "#00000000");

gs2_2.SetValue(GradientStop.ColorProperty, "#FFFFFFFF");

gs2_2.Offset = 1;

lgb2.GradientStops.Add(gs2_1);

lgb2.GradientStops.Add(gs2_2);

lgb2.SetValue(LinearGradientBrush.StartPointProperty, "-0.384999990463257,0.0469999983906746");

lgb2.SetValue(LinearGradientBrush.EndPointProperty, "-0.388000011444092,-0.527999997138977");

tmpImage.OpacityMask = lgb2;

temp.Children.Add(tmpImage);

ImageStoryboard3.Begin();

break;

}

在数字按钮变色处理上也作出了修改，图片轮显使相应的数字按钮也会变色，还有当鼠标指入Top区域时，轮显停止变换，详细的这些内容请查看源码。

源代码：正式版源码

PS：我只制作了3种切换效果，如果大家利用这个源码做了新的切换效果希望能和我交流一下，或者跟帖贴出代码。
大家共同进步！

转载于:https://www.cnblogs.com/JerryChin/archive/2008/04/09/1145412.html

Silverlight图片公告栏正式版相关推荐

Silverlight 4简体中文正式版脱机帮助文档下载
微软官方的帮助文档一直以来都是最好的最全的技术教程,6月17日,微软推出Silverlight 4简体中文正式版脱机帮助文档,希望能够帮助更多中文Silverlight开发人员. Microsoft ...
最新版本的Silverlight Tools For Silverlight 2 RTW正式版
Silverlight Tools RC1 for Visual Studio 2008 SP1 http://www.microsoft.com/downloads/details.aspx?Fam ...
总结一下silverlight文章,然后死等10月10日的正式版
这三天参加了微软关于WPF&Silverlight的培训(昨天结束),与美国微软总部过来的专家Jaime Rodriguez, Laurence Moroney,做了面对面的技术交流,感觉受益 ...
VS2008正式版创建silverlight项目失败的解决办法
安装microsoft express blend2 最新的试用版时,说请安装.net framework3.5 或更新的版本,我一想,我装了vs2008 beta2,有3.5呀, 于是我就下了个vs ...
Silverlight 4正式版发布
微软发布Silverlight 4正式版,Silverlight官方已经更新Silverlight 4开发包. Silverlight 4仅支持在Visual Studio 2010下开发,所以,首先 ...
微软Silverlight 3正式版已经出炉
微软Silverlight 3正式版已经出炉再过几个小时微软才会官方发布,但Silverlight 3正式版(版本号3.0.40624.0)已经新鲜出炉了.如果你感兴趣可以前往其官方网站升级安装. ...
PDF 补丁丁 (修改PDF书签;拆分、合并、制作PDF;提取图片) 0.3.0.8 正式版
PDF 补丁丁 0.3.0.8 正式版新版本已经发布,请到博客首页下载. 软件简介 PDF补丁丁是一个用于修改PDF文件信息的工具.它具有以下功能: ■ 修改文档(带"*"号部分 ...
Silverlight 3正式版新鲜出炉
[IT168资讯]Silverlight 3正式版(版本号3.0.40624.0)已经新鲜出炉,将于今日正式发布.今日在See the light网站将举行线上发布活动,播放视频Keynote和技术演 ...
微软Silverlight 3正式版
微软Silverlight 3正式版已经出炉,下载后, 安装比较顺利,过程如下: 1.先安装Silver Light 3 客户端http://www.microsoft.com/silverlight ...

Silverlight图片公告栏正式版

Silverlight图片公告栏正式版相关推荐

最新文章

热门文章