Silverlight图片公告栏正式版

最新推荐文章于 2024-08-08 08:30:00 发布

a564749

最新推荐文章于 2024-08-08 08:30:00 发布

阅读量124

点赞数

原文链接：http://www.cnblogs.com/JerryChin/archive/2008/04/09/1145412.html

版权

      上星期贴出了个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