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

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

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

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            ...{
                //图片容器
                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();
        }

    }