silverlight应用-图片新闻展示效果
使用的是SL bete2,cpu占用快于js,差于flash,参考了jQuery实例：图片展示效果 的思想实现了一些网站首页的图片新闻展示效果。大概解析下（具体请参考代码注释）：图片容器包括图片、底部文字、数字圆圈3部分和对应的3个动画，其定位和动画位移都是通过改变其Canvas.Top或Left属性，图片hover时通过改变DoubleAnimation.From和To属性实现位移动画，这些基础可以参考园子上面的很多文章，初步实现了基本功能，后续将实现更多的动画效果，并封装成控件。
预览体验：
Page.xaml：
<UserControl x:Class="SilverlightApplication1.Page"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Canvas x:Name="main" Background="Black" Cursor="Hand" MouseLeave="main_MouseLeave">
<Canvas.Resources>
<Storyboard x:Name="storyboard">
</Storyboard>
<Storyboard x:Name="storyboard2">
</Storyboard>
<Storyboard x:Name="storyboard3">
</Storyboard>
</Canvas.Resources>
<Canvas.Clip>
<RectangleGeometry x:Name="rectangleGeometry">
</RectangleGeometry>
</Canvas.Clip>
</Canvas>
</UserControl>
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Canvas x:Name="main" Background="Black" Cursor="Hand" MouseLeave="main_MouseLeave">
<Canvas.Resources>
<Storyboard x:Name="storyboard">
</Storyboard>
<Storyboard x:Name="storyboard2">
</Storyboard>
<Storyboard x:Name="storyboard3">
</Storyboard>
</Canvas.Resources>
<Canvas.Clip>
<RectangleGeometry x:Name="rectangleGeometry">
</RectangleGeometry>
</Canvas.Clip>
</Canvas>
</UserControl>
Page.xaml.cs：
public partial class Page : UserControl
{
//整个布局宽度
int divWidth = 480;
//整个布局高度
int divHeight = 332;
//图片数量
int imgNums = 4;
//图片宽度
int imgWidth = 349;
//整个布局长方形圆角弧度
int radius = 10;
//底部文字高度
int textHeight = 30;
//数字圆圈大小
int numberSize = 30;
//图片实体集合
List<Photo> photos;
public Page()
{
InitializeComponent();
//载入图片数据
InitImageData();
}
private void InitImageData()
{
//建立读取xml文件的WebClient
WebClient xmlClient = new WebClient();
xmlClient.DownloadStringCompleted += new DownloadStringCompletedEventHandler(xmlClient_DownloadStringCompleted);
xmlClient.DownloadStringAsync(new Uri(HtmlPage.Document.DocumentUri, "Photos.xml"));
}
private void xmlClient_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
{
if (e.Error == null && e.Result.Length > 0)
{
photos = new List<Photo>();
using (XmlReader reader = XmlReader.Create(new StringReader(e.Result)))
{
while (reader.Read())
{
if (reader.NodeType == XmlNodeType.Element)
{
Photo photo = new Photo();
if (reader.HasAttributes)
{
photo.imgurl = reader[0];
photo.url = reader[1];
photo.target = reader[2];
photo.text = reader[3];
photos.Add(photo);
}
}
}
}
imgNums = photos.Count;
//载入成功后初始化界面上的元素
InitImage();
}
}
private void InitImage()
{
//设置整个布局
main.Height = divHeight;
main.Width = divWidth;
//设置布局的圆角
rectangleGeometry.SetValue(RectangleGeometry.RadiusXProperty, radius);
rectangleGeometry.SetValue(RectangleGeometry.RadiusYProperty, radius);
rectangleGeometry.SetValue(RectangleGeometry.RectProperty, string.Format("0,0,{0},{1}", divWidth, divHeight));
//创建图片元素
for (int i = 0; i<imgNums; i++)
{
//图片容器
Canvas photo = new Canvas();
photo.Width = imgWidth;
photo.Height = divHeight;
photo.Opacity = 0.7;
photo.Tag = i.ToString();
photo.SetValue(Canvas.LeftProperty, i * (divWidth / imgNums));
photo.SetValue(NameProperty, "photo" + i.ToString());
photo.MouseEnter += new MouseEventHandler(photo_MouseEnter);
photo.MouseLeftButtonDown += new MouseButtonEventHandler(photo_MouseLeftButtonDown);
//第一个元素：背景图片
Image image = new Image();
image.Width = imgWidth;
image.Height = divHeight;
image.Source = new BitmapImage(new Uri(photos[i].imgurl, UriKind.Relative));
//第二个元素：数字圆圈
Canvas number = new Canvas();
number.Width = numberSize;
number.Height = numberSize;
number.Opacity = 0.6;
number.SetValue(NameProperty, "number" + i.ToString());
//数字圆圈-背景圆形
Ellipse ellipse = new Ellipse();
ellipse.Height = numberSize;
ellipse.Width = numberSize;
ellipse.Fill = new SolidColorBrush(Colors.Black);
ellipse.Stroke = new SolidColorBrush(Colors.White);
//数字圆圈-数字文字
TextBlock numberText = new TextBlock();
numberText.Text = (i + 1).ToString();
numberText.FontWeight = FontWeights.Bold;
numberText.Foreground = new SolidColorBrush(Colors.White);
numberText.SetValue(Canvas.LeftProperty, numberSize / 5);
numberText.SetValue(Canvas.TopProperty, numberSize / 5);
//第三个元素：底部文字
Canvas content = new Canvas();
content.Width = imgWidth;
content.Height = textHeight;
content.Opacity = 0.8;
content.SetValue(NameProperty, "content" + i.ToString());
content.SetValue(Canvas.LeftProperty, 0);
content.SetValue(Canvas.TopProperty, divHeight);
//底部文字-背景矩形
Rectangle rect = new Rectangle();
rect.Width = imgWidth;
rect.Height = textHeight;
rect.Fill = new SolidColorBrush(Colors.Black);
//底部文字-图片文字
TextBlock text = new TextBlock();
text.Width = imgWidth;
text.Text = photos[i].text;
text.Foreground = new SolidColorBrush(Colors.White);
//添加的元素关系为
//main + 最外层容器
// photo + 图片容器
// image - 背景图片
// content + 底部文字
// rect - 背景矩形
// text - 图片文字
// number + 数字圆圈
// ellipse - 背景圆形
// numberText - 数字文字
content.Children.Add(rect);
content.Children.Add(text);
number.Children.Add(ellipse);
number.Children.Add(numberText);
photo.Children.Add(image);
photo.Children.Add(content);
photo.Children.Add(number);
main.Children.Add(photo);
//动画1-图片移动动画初始化
DoubleAnimation animation = new DoubleAnimation();
animation.SetValue(NameProperty, "animation" + i.ToString());
animation.SetValue(Storyboard.TargetNameProperty, "photo" + i.ToString());
animation.SetValue(Storyboard.TargetPropertyProperty, "(Canvas.Left)");
animation.SetValue(DoubleAnimation.DurationProperty, "0:0:0.4");
animation.SetValue(DoubleAnimation.RepeatBehaviorProperty, "1x");
storyboard.Children.Add(animation);
//动画2-底部文字移动动画初始化
DoubleAnimation animation2 = new DoubleAnimation();
animation2.SetValue(NameProperty, "animation2" + i.ToString());
animation2.SetValue(Storyboard.TargetNameProperty, "content" + i.ToString());
animation2.SetValue(Storyboard.TargetPropertyProperty, "(Canvas.Top)");
animation2.SetValue(DoubleAnimation.DurationProperty, "0:0:0.5");
animation2.SetValue(DoubleAnimation.RepeatBehaviorProperty, "1x");
storyboard2.Children.Add(animation2);
//动画3-数字圆圈消失动画初始化
DoubleAnimation animation3 = new DoubleAnimation();
animation3.SetValue(NameProperty, "animation3" + i.ToString());
animation3.SetValue(Storyboard.TargetNameProperty, "number" + i.ToString());
animation3.SetValue(Storyboard.TargetPropertyProperty, "Opacity");
animation3.SetValue(DoubleAnimation.DurationProperty, "0:0:0.5");
animation3.SetValue(DoubleAnimation.RepeatBehaviorProperty, "1x");
storyboard3.Children.Add(animation3);
}
}
void photo_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
//点击时打开链接
Canvas currentPhoto = sender as Canvas;
int currentIndex = Convert.ToInt16(currentPhoto.Tag);
HtmlPage.Window.Navigate(new Uri(photos[currentIndex].url), photos[currentIndex].target);
}
void photo_MouseEnter(object sender, MouseEventArgs e)
{
//显示其中一张图片时其他图片的显示宽度
int minWidth = (divWidth - imgWidth) / (imgNums - 1);
//当前点击的图片
Canvas currentPhoto = sender as Canvas;
//当前点击图片为第几张
int currentIndex = Convert.ToInt16(currentPhoto.Tag);
//循环创建动画
for (int i = 0; i < imgNums; i++)
{
Canvas photo = main.Children[i] as Canvas;
Canvas content = photo.FindName("content" + i.ToString()) as Canvas;
Canvas number = photo.FindName("number" + i.ToString()) as Canvas;
DoubleAnimation animation = storyboard.Children[i] as DoubleAnimation;
DoubleAnimation animation2 = storyboard2.Children[i] as DoubleAnimation;
DoubleAnimation animation3 = storyboard3.Children[i] as DoubleAnimation;
animation.SetValue(DoubleAnimation.FromProperty, photo.GetValue(Canvas.LeftProperty));
animation2.SetValue(DoubleAnimation.FromProperty, content.GetValue(Canvas.TopProperty));
animation3.SetValue(DoubleAnimation.FromProperty, number.GetValue(Canvas.OpacityProperty));
//如果是当前滑过图片的前面的图片
if (i <= currentIndex)
{
//处理图片移动的位移
animation.SetValue(DoubleAnimation.ToProperty, i * minWidth);
}
else
{
animation.SetValue(DoubleAnimation.ToProperty, (i - 1) * minWidth + imgWidth);
}
//如果是当前滑过图片
if (i == currentIndex)
{
//处理底部文字移动的位移
animation2.SetValue(DoubleAnimation.ToProperty, divHeight - textHeight);
//处理圆圈文字隐现
animation3.SetValue(DoubleAnimation.ToProperty, 0.1);
}
else
{
animation2.SetValue(DoubleAnimation.ToProperty, divHeight);
animation3.SetValue(DoubleAnimation.ToProperty, 0.6);
}
//设置图片透明度
if (i == currentIndex)
{
photo.SetValue(Canvas.OpacityProperty, 1);
}
else
{
photo.SetValue(Canvas.OpacityProperty, 0.7);
}
}
storyboard.Begin();
storyboard2.Begin();
storyboard3.Begin();
}
//鼠标离开时回位
private void main_MouseLeave(object sender, MouseEventArgs e)
{
for (int i = 0; i < imgNums; i++)
{
Canvas photo = main.Children[i] as Canvas;
DoubleAnimation animation = storyboard.Children[i] as DoubleAnimation;
animation.SetValue(DoubleAnimation.FromProperty, photo.GetValue(Canvas.LeftProperty));
animation.SetValue(DoubleAnimation.ToProperty, i * (divWidth / imgNums));
}
storyboard.Begin();
}
}
{
//整个布局宽度
int divWidth = 480;
//整个布局高度
int divHeight = 332;
//图片数量
int imgNums = 4;
//图片宽度
int imgWidth = 349;
//整个布局长方形圆角弧度
int radius = 10;
//底部文字高度
int textHeight = 30;
//数字圆圈大小
int numberSize = 30;
//图片实体集合
List<Photo> photos;
public Page()
{
InitializeComponent();
//载入图片数据
InitImageData();
}
private void InitImageData()
{
//建立读取xml文件的WebClient
WebClient xmlClient = new WebClient();
xmlClient.DownloadStringCompleted += new DownloadStringCompletedEventHandler(xmlClient_DownloadStringCompleted);
xmlClient.DownloadStringAsync(new Uri(HtmlPage.Document.DocumentUri, "Photos.xml"));
}
private void xmlClient_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
{
if (e.Error == null && e.Result.Length > 0)
{
photos = new List<Photo>();
using (XmlReader reader = XmlReader.Create(new StringReader(e.Result)))
{
while (reader.Read())
{
if (reader.NodeType == XmlNodeType.Element)
{
Photo photo = new Photo();
if (reader.HasAttributes)
{
photo.imgurl = reader[0];
photo.url = reader[1];
photo.target = reader[2];
photo.text = reader[3];
photos.Add(photo);
}
}
}
}
imgNums = photos.Count;
//载入成功后初始化界面上的元素
InitImage();
}
}
private void InitImage()
{
//设置整个布局
main.Height = divHeight;
main.Width = divWidth;
//设置布局的圆角
rectangleGeometry.SetValue(RectangleGeometry.RadiusXProperty, radius);
rectangleGeometry.SetValue(RectangleGeometry.RadiusYProperty, radius);
rectangleGeometry.SetValue(RectangleGeometry.RectProperty, string.Format("0,0,{0},{1}", divWidth, divHeight));
//创建图片元素
for (int i = 0; i<imgNums; i++)
{
//图片容器
Canvas photo = new Canvas();
photo.Width = imgWidth;
photo.Height = divHeight;
photo.Opacity = 0.7;
photo.Tag = i.ToString();
photo.SetValue(Canvas.LeftProperty, i * (divWidth / imgNums));
photo.SetValue(NameProperty, "photo" + i.ToString());
photo.MouseEnter += new MouseEventHandler(photo_MouseEnter);
photo.MouseLeftButtonDown += new MouseButtonEventHandler(photo_MouseLeftButtonDown);
//第一个元素：背景图片
Image image = new Image();
image.Width = imgWidth;
image.Height = divHeight;
image.Source = new BitmapImage(new Uri(photos[i].imgurl, UriKind.Relative));
//第二个元素：数字圆圈
Canvas number = new Canvas();
number.Width = numberSize;
number.Height = numberSize;
number.Opacity = 0.6;
number.SetValue(NameProperty, "number" + i.ToString());
//数字圆圈-背景圆形
Ellipse ellipse = new Ellipse();
ellipse.Height = numberSize;
ellipse.Width = numberSize;
ellipse.Fill = new SolidColorBrush(Colors.Black);
ellipse.Stroke = new SolidColorBrush(Colors.White);
//数字圆圈-数字文字
TextBlock numberText = new TextBlock();
numberText.Text = (i + 1).ToString();
numberText.FontWeight = FontWeights.Bold;
numberText.Foreground = new SolidColorBrush(Colors.White);
numberText.SetValue(Canvas.LeftProperty, numberSize / 5);
numberText.SetValue(Canvas.TopProperty, numberSize / 5);
//第三个元素：底部文字
Canvas content = new Canvas();
content.Width = imgWidth;
content.Height = textHeight;
content.Opacity = 0.8;
content.SetValue(NameProperty, "content" + i.ToString());
content.SetValue(Canvas.LeftProperty, 0);
content.SetValue(Canvas.TopProperty, divHeight);
//底部文字-背景矩形
Rectangle rect = new Rectangle();
rect.Width = imgWidth;
rect.Height = textHeight;
rect.Fill = new SolidColorBrush(Colors.Black);
//底部文字-图片文字
TextBlock text = new TextBlock();
text.Width = imgWidth;
text.Text = photos[i].text;
text.Foreground = new SolidColorBrush(Colors.White);
//添加的元素关系为
//main + 最外层容器
// photo + 图片容器
// image - 背景图片
// content + 底部文字
// rect - 背景矩形
// text - 图片文字
// number + 数字圆圈
// ellipse - 背景圆形
// numberText - 数字文字
content.Children.Add(rect);
content.Children.Add(text);
number.Children.Add(ellipse);
number.Children.Add(numberText);
photo.Children.Add(image);
photo.Children.Add(content);
photo.Children.Add(number);
main.Children.Add(photo);
//动画1-图片移动动画初始化
DoubleAnimation animation = new DoubleAnimation();
animation.SetValue(NameProperty, "animation" + i.ToString());
animation.SetValue(Storyboard.TargetNameProperty, "photo" + i.ToString());
animation.SetValue(Storyboard.TargetPropertyProperty, "(Canvas.Left)");
animation.SetValue(DoubleAnimation.DurationProperty, "0:0:0.4");
animation.SetValue(DoubleAnimation.RepeatBehaviorProperty, "1x");
storyboard.Children.Add(animation);
//动画2-底部文字移动动画初始化
DoubleAnimation animation2 = new DoubleAnimation();
animation2.SetValue(NameProperty, "animation2" + i.ToString());
animation2.SetValue(Storyboard.TargetNameProperty, "content" + i.ToString());
animation2.SetValue(Storyboard.TargetPropertyProperty, "(Canvas.Top)");
animation2.SetValue(DoubleAnimation.DurationProperty, "0:0:0.5");
animation2.SetValue(DoubleAnimation.RepeatBehaviorProperty, "1x");
storyboard2.Children.Add(animation2);
//动画3-数字圆圈消失动画初始化
DoubleAnimation animation3 = new DoubleAnimation();
animation3.SetValue(NameProperty, "animation3" + i.ToString());
animation3.SetValue(Storyboard.TargetNameProperty, "number" + i.ToString());
animation3.SetValue(Storyboard.TargetPropertyProperty, "Opacity");
animation3.SetValue(DoubleAnimation.DurationProperty, "0:0:0.5");
animation3.SetValue(DoubleAnimation.RepeatBehaviorProperty, "1x");
storyboard3.Children.Add(animation3);
}
}
void photo_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
//点击时打开链接
Canvas currentPhoto = sender as Canvas;
int currentIndex = Convert.ToInt16(currentPhoto.Tag);
HtmlPage.Window.Navigate(new Uri(photos[currentIndex].url), photos[currentIndex].target);
}
void photo_MouseEnter(object sender, MouseEventArgs e)
{
//显示其中一张图片时其他图片的显示宽度
int minWidth = (divWidth - imgWidth) / (imgNums - 1);
//当前点击的图片
Canvas currentPhoto = sender as Canvas;
//当前点击图片为第几张
int currentIndex = Convert.ToInt16(currentPhoto.Tag);
//循环创建动画
for (int i = 0; i < imgNums; i++)
{
Canvas photo = main.Children[i] as Canvas;
Canvas content = photo.FindName("content" + i.ToString()) as Canvas;
Canvas number = photo.FindName("number" + i.ToString()) as Canvas;
DoubleAnimation animation = storyboard.Children[i] as DoubleAnimation;
DoubleAnimation animation2 = storyboard2.Children[i] as DoubleAnimation;
DoubleAnimation animation3 = storyboard3.Children[i] as DoubleAnimation;
animation.SetValue(DoubleAnimation.FromProperty, photo.GetValue(Canvas.LeftProperty));
animation2.SetValue(DoubleAnimation.FromProperty, content.GetValue(Canvas.TopProperty));
animation3.SetValue(DoubleAnimation.FromProperty, number.GetValue(Canvas.OpacityProperty));
//如果是当前滑过图片的前面的图片
if (i <= currentIndex)
{
//处理图片移动的位移
animation.SetValue(DoubleAnimation.ToProperty, i * minWidth);
}
else
{
animation.SetValue(DoubleAnimation.ToProperty, (i - 1) * minWidth + imgWidth);
}
//如果是当前滑过图片
if (i == currentIndex)
{
//处理底部文字移动的位移
animation2.SetValue(DoubleAnimation.ToProperty, divHeight - textHeight);
//处理圆圈文字隐现
animation3.SetValue(DoubleAnimation.ToProperty, 0.1);
}
else
{
animation2.SetValue(DoubleAnimation.ToProperty, divHeight);
animation3.SetValue(DoubleAnimation.ToProperty, 0.6);
}
//设置图片透明度
if (i == currentIndex)
{
photo.SetValue(Canvas.OpacityProperty, 1);
}
else
{
photo.SetValue(Canvas.OpacityProperty, 0.7);
}
}
storyboard.Begin();
storyboard2.Begin();
storyboard3.Begin();
}
//鼠标离开时回位
private void main_MouseLeave(object sender, MouseEventArgs e)
{
for (int i = 0; i < imgNums; i++)
{
Canvas photo = main.Children[i] as Canvas;
DoubleAnimation animation = storyboard.Children[i] as DoubleAnimation;
animation.SetValue(DoubleAnimation.FromProperty, photo.GetValue(Canvas.LeftProperty));
animation.SetValue(DoubleAnimation.ToProperty, i * (divWidth / imgNums));
}
storyboard.Begin();
}
}
源代码下载（vs2008 + siverlight beta 2，“.jpg”后缀名改为“.rar”）:http://www.cnblogs.com/images/cnblogs_com/guozili/SilverlightApplication1.jpg
