Silverlight图片公告栏正式版

    
   上星期贴出了个Silverlight图片公告控件，当时只是初步的实现了效果。今天抽空将它功能完善了并推出正式版。
   正式版加入了切换图片动画效果，读取XML文件不再依赖WebService，数字按钮响应功能修正。这次重写了大部分代码，Silverlight的结构也做出了修改，并且对程序进行了“瘦身”，或许细心的人也发现了上次版本中，实现的功能只是很简单可是文件却有300k，经过“瘦身”后Silverlight程序只有8k了。
  
   实现效果：效果测试页 http://www.nosame.net/PlacardTest/Default.ASPx
  
  制作所需工具
  
   Visual Studio 2008
   Microsoft Expression Blend 2.5 March 2008 Preview
  
   这次我就不制作视频了，Beta版的制作视频：http://www.cnblogs.com/JerryChin/archive/2008/04/05/1138227.HTML
  改用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代码
  <Grid x:Name="LayoutRoot" Background="White" Loaded="Placard_Loaded">
   <Image x:Name="image" Cursor="Hand" Width="260" Height="195" OpacityMask="#FF000000"/>
   <Canvas x:Name="temp" Margin="0,0,0,0" Width="260" Height="195"/>
   <StackPanel Height="17" x:Name="Foot" VerticalAlignment="Bottom" Orientation="Horizontal">
   <Rectangle Height="17" Width="0" x:Name="g_rect" Fill="#FF000000">
   <Rectangle.OpacityMask>
   <LinearGradientBrush EndPoint="0.688000023365021,0.474000006914139" StartPoint="0.0970000028610229,0.526000022888184">
   <GradientStop Color="#00000000"/>
   <GradientStop Color="#FF000000" Offset="1"/>
   </LinearGradientBrush>
   </Rectangle.OpacityMask>
   </Rectangle>
   <TextBlock Height="17" Width="20" Text="TextBlock" TextWrapping="Wrap" Foreground="#00000000" x:Name="mouseindex" Margin="-70,0,0,0"/>
   <TextBlock Height="17" x:Name="currentindex" Width="20" Foreground="#00000000" Text="TextBlock" TextWrapping="Wrap" Margin="-110,0,0,0"/>
   </StackPanel>
   <!--Top用于捕获鼠标点击-->
   <Rectangle HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Top" Fill="#00000000" Width="260" Height="178" x:Name="Top" Cursor="Hand" MouseEnter="Top_MouseEnter" MouseLeave="Top_MouseLeave" MouseLeftButtonUp="Top_MouseLeftButtonUp"/>
   </Grid>
  
   加入了Rectangle （Top）作于鼠标事件获取对象，加入了一个Canvas（temp）用于实现图片切换
   现在来说明一下实现动画切换的思路，首先image作为显示图片的主体，实现动画时从后台添加一个图片进temp中，实现的动画的Storyboard都是对这个零时图片进行的，动画完毕后删除加入temp中的图片，并切换image中的图片。这样整个切换流程就完成了。
  
   制作图片切换动画最好能使用Blend来制作这样会简单明了。这个项目中的storyboard我都是用Blend制作的
  
  Storyboard代码
  <UserControl.Resources>
   <Storyboard x:Name="ImageStoryboard1" Completed="ImageStoryboard_Completed">
   <ColorAnimationUsingKeyFrames Storyboard.TargetName="tmpimage" Storyboard.TargetProperty="(UIElement.OpacityMask).(SolidColorBrush.Color)" BeginTime="00:00:00">
   <SplineColorKeyFrame KeyTime="00:00:00" Value="#00000000"/>
   <SplineColorKeyFrame KeyTime="00:00:0.600000" Value="#FF000000"/>
   </ColorAnimationUsingKeyFrames>
   </Storyboard>
   <Storyboard x:Name="ImageStoryboard2" Completed="ImageStoryboard_Completed">
   <PointAnimationUsingKeyFrames Storyboard.TargetName="tmpimage" Storyboard.TargetProperty="(UIElement.OpacityMask).(LinearGradientBrush.StartPoint)" BeginTime="00:00:00">
   <SplinePointKeyFrame KeyTime="00:00:00" Value="0.0001,0.9999"/>
   <SplinePointKeyFrame KeyTime="00:00:00.6000000" Value="1,0.0"/>
   </PointAnimationUsingKeyFrames>
   <PointAnimationUsingKeyFrames Storyboard.TargetName="tmpimage" Storyboard.TargetProperty="(UIElement.OpacityMask).(LinearGradientBrush.EndPoint)" BeginTime="00:00:00">
   <SplinePointKeyFrame KeyTime="00:00:00" Value="0,1"/>
   <SplinePointKeyFrame KeyTime="00:00:00.6000000" Value="0,1"/>
   </PointAnimationUsingKeyFrames>
   </Storyboard>
   <Storyboard x:Name="ImageStoryboard3" Completed="ImageStoryboard_Completed">
   <PointAnimationUsingKeyFrames Storyboard.TargetName="tmpimage" Storyboard.TargetProperty="(UIElement.OpacityMask).(LinearGradientBrush.StartPoint)" BeginTime="00:00:00">
   <SplinePointKeyFrame KeyTime="00:00:00" Value="-0.389999985694885,0.0469999983906746"/>
   <SplinePointKeyFrame KeyTime="00:00:00.6000000" Value="-0.601999998092651,-0.237000003457069"/>
   </PointAnimationUsingKeyFrames>
   <PointAnimationUsingKeyFrames Storyboard.TargetName="tmpimage" Storyboard.TargetProperty="(UIElement.OpacityMask).(LinearGradientBrush.EndPoint)" BeginTime="00:00:00">
   <SplinePointKeyFrame KeyTime="00:00:00" Value="-0.382999986410141,-0.527999997138977"/>
   <SplinePointKeyFrame KeyTime="00:00:00.6000000" Value="-0.171000003814697,-0.244000002741814"/>
   </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区域时，轮显停止变换，详细的这些内容请查看源码。
  
   源代码 ：正式版源码 http://www.cnblogs.com/Files/JerryChin/PlacardTest.rar
  
   PS：我只制作了3种切换效果，如果大家利用这个源码做了新的切换效果希望能和我交流一下，或者跟帖贴出代码。
   大家共同进步！
  
  作者：Jerry Chin
  出处：http://jerrychin.cnblogs.com
  联系：odear@tom.com