Silverlight图片公告栏正式版

核心提示：本文示例源代码或素材下载 上星期贴出了个Silverlight图片公告控件，当时只是初步的实现了效果，Silverlight图片公告栏正式版，今天抽空将它功能完善了并推出正式版，正式版加入了切换图片动画效果，实现的功能只是很简单可是文件却有300k，经过“瘦身”后Silverlight程

本文示例源代码或素材下载

上星期贴出了个Silverlight图片公告控件，当时只是初步的实现了效果。今天抽空将它功能完善了并推出正式版。

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

制作所需工具

Visual Studio 2008

Microsoft Expression Blend 2.5 March 2008 Preview

这次我就不制作视频了

改用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>