<Grid x:Name="Layout" Background="White">  <Canvas x:Name="canvas" Background="Black" Grid.Row="1" Height="280">    <!--隱藏矩形以外的其它部分-->    <Canvas.Clip >     <RectangleGeometry x:Name="rg" />    </Canvas.Clip>  <StackPanel x:Name="sp" Orientation="Horizontal" ></StackPanel>  </Canvas> <Image x:Name="img_Full" Width="640" Height="480" Visibility="Collapsed" MouseLeftButtonUp="img_Full_MouseLeftButtonUp" /></Grid>

 public partial class Demo : UserControl  {    //定義    private Storyboard storyboard;    private const double photowidth = 320;    private double totalwidth;    public Demo()    {      InitializeComponent();      CreatePhoto();    }    /// <summary>    /// 創建圖片列表    /// </summary>    private void CreatePhoto()    {      string[] picList = new string[] { "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg" };      //創建多組圖片，保證圖片不會出現空白,因為StackPanel是橫向排列的，這樣就可以把圖片類似模擬的排成一圈      for (int i = 0; i < 3; i++)      {        //根據數組創建圖片        for (int j = 0; j < picList.Length; j++)        {          UC_pic pic = new UC_pic();          pic.ImageUrl = "../images/photo/" + picList[j];          pic.Width = photowidth;          //綁定事件          pic.MouseEnter += new MouseEventHandler(pic_MouseEnter);          pic.MouseLeave += new MouseEventHandler(pic_MouseLeave);          pic.MouseLeftButtonUp += new MouseButtonEventHandler(pic_MouseLeftButtonUp);          //添加對象到StackPanel中          sp.Children.Add(pic);        }      }      //計算圖片的總寬度      totalwidth = -1.0 * photowidth * picList.Length;      Canvas.SetLeft(sp, totalwidth);      //調用初始化 方法      CreateStoryboard();      //播放動畫      storyboard.Begin();      //重新繪制區域      Resize();     }    /// <summary>    /// 創建故事面板    /// </summary>    private void CreateStoryboard()    {      //創建故事面板      storyboard = new Storyboard();      DoubleAnimation animation = new DoubleAnimation();      //設置動畫延時      animation.Duration = new Duration(TimeSpan.FromSeconds(2.0));      //設置對象的作用屬性      Storyboard.SetTarget(animation, sp);      Storyboard.SetTargetProperty(animation, new PropertyPath("(Canvas.Left)", new object[0]));      //添加到動畫故事板內      storyboard.Children.Add(animation);      //動畫自動完成事件      storyboard.Completed += new EventHandler(storyboard_Completed);    }     //動畫自動完成事件，當動畫播放完成（結束）的時候。再次循環動畫    void storyboard_Completed(object sender, EventArgs e)    {      DoubleAnimation animation = (DoubleAnimation)storyboard.Children[0];      //取得圖片當前位置      double left = Canvas.GetLeft(sp);      //如果圖片已接近最后，就重新設置位置      if (left > (totalwidth - photowidth))      {        animation.From = new double?(left);      }      //設置動畫的起始值（From）所依據的總量（總長度）      animation.By = new double?(totalwidth);      //循環動畫      storyboard.Begin();    }    private void Resize()    {      //重新繪制顯示區域      rg.Rect = new Rect(0, 0, this.ActualWidth, 260);    }     void pic_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)    {      //顯示放大圖片      UC_pic pic = sender as UC_pic;      img_Full.Source = pic.photo.Source;      img_Full.Visibility = Visibility.Visible;    }     void pic_MouseLeave(object sender, MouseEventArgs e)    {      //繼續動畫      storyboard.Resume();    }     void pic_MouseEnter(object sender, MouseEventArgs e)    {      //暫停動畫      storyboard.Pause();    }     private void img_Full_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)    {      //隱藏放大圖片      img_Full.Visibility = Visibility.Collapsed;    }     private void UserControl_SizeChanged(object sender, SizeChangedEventArgs e)    {      //動畫根據屏幕大小改變而改變      Resize();    }}

<Canvas x:Name="LayoutRoot" Background="White">  <Image x:Name="photo" Width="320" Height="240" Stretch="UniformToFill" Margin="10" /></Canvas>

public partial class UC_pic : UserControl  {    public UC_pic()    {      InitializeComponent();    }    private string _imgUrl;    public string ImageUrl    {      get { return this._imgUrl; }      set {         //設置圖片資源屬性        this._imgUrl = value;        Uri uri = new Uri(value, UriKind.Relative);        BitmapImage bitimg = new BitmapImage(uri);        this.photo.Source = bitimg;      }    }  }