相信大家都看到过网易的新闻图片幻灯片切换效果，好像Flash和Ajax版本的都有了，我来加一个Sliverlight2版本的。
实现平台：VS2008 + Silverlight2
下面链接可以直接看运行程序
Live Demo
效果图：
实现要点：
1.从配置文件中动态添加Image对象，并且初始Image对象的一些属性：
// 添加图片控件
Image image = new Image();
image.Cursor = System.Windows.Input.Cursors.Hand;
image.Width = IMAGE_WIDTH;
image.Height = IMAGE_HEIGHT;
image.SetValue(Canvas.LeftProperty, 0);
image.SetValue(Canvas.TopProperty, 0);
image.SetValue(Canvas.ZIndexProperty, i);
image.Source = new BitmapImage(new Uri(this.picList.ImageUrl, UriKind.Relative));
image.MouseLeftButtonUp += new MouseButtonEventHandler(image_MouseLeftButtonUp);
Canvas.LeftProperty属性是指相对于容器的左边缘的位置，这里图片的消失显示主要就是利用了这个属性，
如果是负值，那么图片将显示在容器左边缘以外的位置，如果这个值大于容器的宽度，那么则显示在容器右边缘
以外的位置。图片点击时间自然是弹出图片链接的新闻了。
void image_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
HtmlPage.Window.Navigate(new Uri(this.picList[this.picIndex].Href), "_blank");
}
图片属性设定完成后开始添加飞行效果的动作了：
// 添加动作
Storyboard driftStoryboard = new Storyboard();
Duration driftDuration = new Duration(TimeSpan.FromSeconds(1));
DoubleAnimation driftAnimation = new DoubleAnimation();
driftAnimation.Duration = driftDuration;
Storyboard.SetTarget(driftAnimation, image);
// 对左面边框的位置
Storyboard.SetTargetProperty(driftAnimation, "(Canvas.Left)");
driftStoryboard.Children.Add(driftAnimation);
driftStoryboard.Duration = driftDuration;
driftStoryboard.Completed += new EventHandler(driftStoryboard_Completed);
Backgroud.Children.Add(image);
// 添加到资源中
Backgroud.Resources.Add(driftStoryboard);
this._animationMap.Add(i, driftStoryboard);
this._imageMap.Add(i, image);
new Duration(TimeSpan.FromSeconds(1)是指一秒钟内完成飞行动作，
Storyboard.SetTargetProperty(driftAnimation, "(Canvas.Left)");
则是说这个动画设置的是图片的Canvas.Left 的属性，这个属性已经在上面说明过了。
然后就是设置定时器以不断的促发这个动画了：
// 定时器
this.timer = new DispatcherTimer();
this.timer.Interval = TimeSpan.FromSeconds(2);
this.timer.Tick += new EventHandler(timer_Tick);
this.timer.Start();
在定时器方法里：
// 定时切换图片
void timer_Tick(object sender, EventArgs e)
{
int nextIndex = this.picIndex + 1;
if (this.picList.Count == nextIndex)
nextIndex = 0;
// 现在的图片的动作
DoubleAnimation currentAnimation = (DoubleAnimation)this._animationMap[this.picIndex].Children[0];
// 要显示的图片的动作
DoubleAnimation nextAnimation = (DoubleAnimation)this._animationMap[nextIndex].Children[0];
// 从右到左消失
currentAnimation.From = 0;
currentAnimation.To = 0 - IMAGE_WIDTH;
// 从右到左显示
nextAnimation.From = IMAGE_WIDTH;
nextAnimation.To = 0;
// 调整图片显示顺序
for (int i = 0; i < this.picList.Count; i++)
{
this._imageMap.SetValue(Canvas.ZIndexProperty, i);
if (i == nextIndex)
this._imageMap.SetValue(Canvas.ZIndexProperty, this.picList.Count);
else if(i == this.picIndex)
this._imageMap.SetValue(Canvas.ZIndexProperty, this.picList.Count - 1);
}
this._animationMap[this.picIndex].Begin();
this._animationMap[nextIndex].Begin();
// 设置新的Title和选中的按钮
Picture pic = this.picList[nextIndex];
this.titleText.Text = pic.Title;
ButtonNo buttonno = this._ButtonMap[this.picIndex];
buttonno.txtnum.Foreground = new SolidColorBrush(Colors.White);
buttonno.rect.Fill = new SolidColorBrush(Colors.Black);
buttonno = this._ButtonMap[nextIndex];
buttonno.txtnum.Foreground = new SolidColorBrush(Colors.Black);
buttonno.rect.Fill = new SolidColorBrush(Colors.Red);
// 保存当前的图片索引
this.picIndex = nextIndex;
}
这一段主要是指定动画的开始点和结束点，然后调整下面的数字按钮。
数字按钮的事件代码和定时器的类似，大家可以直接看源代码。
重点的部分都说完了，最后测试画面的时候要修改一下TestPage.html页面，
原来显示Sliverlight控件部分要修改成
<div id="silverlightControlHost">
<object data="data:application/x-silverlight," type="application/x-silverlight-2-b1" Width="282" Height="408">
<param name="source" value="PictureSlider.xap"/>
<param name="onerror" value="onSilverlightError" />
<param name="background" value="white" />
<a href="http://go.microsoft.com/fwlink/?LinkID=108182" style="text-decoration: none;">
<img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>
</a>
</object>
<iframe style='visibility:hidden;height:0;width:0;border:0px'></iframe>
</div>
原来是Width="100%" Height="100%" 改成容器的大小 Width="282" Height="408"
否则图片会显示在容器之外了。
这样一个初步的图片轮转效果就完成了，还有很多需要修改的地方，我会继续完善它的，开发它的后续版本。
如果有兴趣的朋友可以一起讨论探究哦。
代码下载：http://www.cnblogs.com/Files/ithurricane/PictureSlider.zip
实现平台：VS2008 + Silverlight2
下面链接可以直接看运行程序
Live Demo
效果图：
实现要点：
1.从配置文件中动态添加Image对象，并且初始Image对象的一些属性：
// 添加图片控件
Image image = new Image();
image.Cursor = System.Windows.Input.Cursors.Hand;
image.Width = IMAGE_WIDTH;
image.Height = IMAGE_HEIGHT;
image.SetValue(Canvas.LeftProperty, 0);
image.SetValue(Canvas.TopProperty, 0);
image.SetValue(Canvas.ZIndexProperty, i);
image.Source = new BitmapImage(new Uri(this.picList.ImageUrl, UriKind.Relative));
image.MouseLeftButtonUp += new MouseButtonEventHandler(image_MouseLeftButtonUp);
Canvas.LeftProperty属性是指相对于容器的左边缘的位置，这里图片的消失显示主要就是利用了这个属性，
如果是负值，那么图片将显示在容器左边缘以外的位置，如果这个值大于容器的宽度，那么则显示在容器右边缘
以外的位置。图片点击时间自然是弹出图片链接的新闻了。
void image_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
HtmlPage.Window.Navigate(new Uri(this.picList[this.picIndex].Href), "_blank");
}
图片属性设定完成后开始添加飞行效果的动作了：
// 添加动作
Storyboard driftStoryboard = new Storyboard();
Duration driftDuration = new Duration(TimeSpan.FromSeconds(1));
DoubleAnimation driftAnimation = new DoubleAnimation();
driftAnimation.Duration = driftDuration;
Storyboard.SetTarget(driftAnimation, image);
// 对左面边框的位置
Storyboard.SetTargetProperty(driftAnimation, "(Canvas.Left)");
driftStoryboard.Children.Add(driftAnimation);
driftStoryboard.Duration = driftDuration;
driftStoryboard.Completed += new EventHandler(driftStoryboard_Completed);
Backgroud.Children.Add(image);
// 添加到资源中
Backgroud.Resources.Add(driftStoryboard);
this._animationMap.Add(i, driftStoryboard);
this._imageMap.Add(i, image);
new Duration(TimeSpan.FromSeconds(1)是指一秒钟内完成飞行动作，
Storyboard.SetTargetProperty(driftAnimation, "(Canvas.Left)");
则是说这个动画设置的是图片的Canvas.Left 的属性，这个属性已经在上面说明过了。
然后就是设置定时器以不断的促发这个动画了：
// 定时器
this.timer = new DispatcherTimer();
this.timer.Interval = TimeSpan.FromSeconds(2);
this.timer.Tick += new EventHandler(timer_Tick);
this.timer.Start();
在定时器方法里：
// 定时切换图片
void timer_Tick(object sender, EventArgs e)
{
int nextIndex = this.picIndex + 1;
if (this.picList.Count == nextIndex)
nextIndex = 0;
// 现在的图片的动作
DoubleAnimation currentAnimation = (DoubleAnimation)this._animationMap[this.picIndex].Children[0];
// 要显示的图片的动作
DoubleAnimation nextAnimation = (DoubleAnimation)this._animationMap[nextIndex].Children[0];
// 从右到左消失
currentAnimation.From = 0;
currentAnimation.To = 0 - IMAGE_WIDTH;
// 从右到左显示
nextAnimation.From = IMAGE_WIDTH;
nextAnimation.To = 0;
// 调整图片显示顺序
for (int i = 0; i < this.picList.Count; i++)
{
this._imageMap.SetValue(Canvas.ZIndexProperty, i);
if (i == nextIndex)
this._imageMap.SetValue(Canvas.ZIndexProperty, this.picList.Count);
else if(i == this.picIndex)
this._imageMap.SetValue(Canvas.ZIndexProperty, this.picList.Count - 1);
}
this._animationMap[this.picIndex].Begin();
this._animationMap[nextIndex].Begin();
// 设置新的Title和选中的按钮
Picture pic = this.picList[nextIndex];
this.titleText.Text = pic.Title;
ButtonNo buttonno = this._ButtonMap[this.picIndex];
buttonno.txtnum.Foreground = new SolidColorBrush(Colors.White);
buttonno.rect.Fill = new SolidColorBrush(Colors.Black);
buttonno = this._ButtonMap[nextIndex];
buttonno.txtnum.Foreground = new SolidColorBrush(Colors.Black);
buttonno.rect.Fill = new SolidColorBrush(Colors.Red);
// 保存当前的图片索引
this.picIndex = nextIndex;
}
这一段主要是指定动画的开始点和结束点，然后调整下面的数字按钮。
数字按钮的事件代码和定时器的类似，大家可以直接看源代码。
重点的部分都说完了，最后测试画面的时候要修改一下TestPage.html页面，
原来显示Sliverlight控件部分要修改成
<div id="silverlightControlHost">
<object data="data:application/x-silverlight," type="application/x-silverlight-2-b1" Width="282" Height="408">
<param name="source" value="PictureSlider.xap"/>
<param name="onerror" value="onSilverlightError" />
<param name="background" value="white" />
<a href="http://go.microsoft.com/fwlink/?LinkID=108182" style="text-decoration: none;">
<img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>
</a>
</object>
<iframe style='visibility:hidden;height:0;width:0;border:0px'></iframe>
</div>
原来是Width="100%" Height="100%" 改成容器的大小 Width="282" Height="408"
否则图片会显示在容器之外了。
这样一个初步的图片轮转效果就完成了，还有很多需要修改的地方，我会继续完善它的，开发它的后续版本。
如果有兴趣的朋友可以一起讨论探究哦。
代码下载：http://www.cnblogs.com/Files/ithurricane/PictureSlider.zip
添加至收藏夹