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>


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();
        }

    }


源代码下载(vs2008 + siverlight beta 2,“.jpg”后缀名改为“.rar”):http://www.cnblogs.com/images/cnblogs_com/guozili/SilverlightApplication1.jpg
posted on 2008-04-30 10:31  guozili  阅读(6396)  评论(16编辑  收藏  举报