WPF 无缝图片滚动

 

上图是效果  可以双方向拖动

 

废话不多说上代码

界面:

1 <Window x:Class="FlashPrac2.MainWindow"  

2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  

3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  

4         Title="MainWindow" Height="200" Width="800" KeyDown="Window_KeyDown" Loaded="Window_Loaded" >

5     <Canvas Width="800" x:Name="cvsGround" Background="Red"  PreviewMouseLeftButtonDown="grdTest_PreviewMouseLeftButtonDown"  

6                     PreviewMouseLeftButtonUp="grdTest_PreviewMouseLeftButtonUp">   

7     </Canvas>

8 </Window>

后台代码:

  1 using System;

  2 using System.Collections.Generic;

  3 using System.Linq;

  4 using System.Text;

  5 using System.Windows;

  6 using System.Windows.Controls;

  7 using System.Windows.Data;

  8 using System.Windows.Documents;

  9 using System.Windows.Input;

 10 using System.Windows.Media;

 11 using System.Windows.Media.Imaging;

 12 using System.Windows.Navigation;

 13 using System.Windows.Shapes;

 14 using System.Windows.Media.Animation;

 15 namespace FlashPrac2

 16 {

 17     /// <summary>  

 18     /// MainWindow.xaml 的交互逻辑  

 19     /// </summary>  

 20     public partial class MainWindow : Window

 21     {

 22         public MainWindow()

 23         {

 24             InitializeComponent();

 25         }

 26 

 27         /// <summary>

 28         /// 创建双精度动画对象  

 29         /// </summary>

 30         DoubleAnimation doubleAnimation = new DoubleAnimation();

 31 

 32         /// <summary>

 33         /// 产生图片的循环变量

 34         /// </summary>

 35         public static int imgCycle = 0;

 36 

 37         /// <summary>

 38         /// 产生图片的数量

 39         /// </summary>

 40         int imgCount = 4;

 41         

 42         /// <summary>  

 43         /// 完成缓冲效果  

 44         /// </summary>  

 45         /// <param name="to">目标位置</param>  

 46         private void DoMove(double to)

 47         {

 48             int Direction = 0;

 49 

 50 

 51             //需要移除的图片列表

 52             List<UIElement> ElementList = new List<UIElement>();

 53 

 54             //添加图片的位置

 55             double endDouble = 0;

 56 

 57             //循环移动图片的位置  并且判断需要删除的图片

 58             foreach (UIElement element in cvsGround.Children)

 59             {

 60                 double transferLeft = Convert.ToDouble(element.GetValue(Canvas.LeftProperty));

 61                 doubleAnimation.To = to + transferLeft;

 62                 element.BeginAnimation(Canvas.LeftProperty, doubleAnimation);//设置动画应用的属性并启动动画 

 63                 transferLeft = Convert.ToDouble(element.GetValue(Canvas.LeftProperty));

 64                 if (to < 0)

 65                 {

 66                     if (transferLeft < -400)

 67                     {

 68                         ElementList.Add(element);

 69                     }

 70                     if (transferLeft > endDouble)

 71                     {

 72                         endDouble = transferLeft;

 73                     }

 74                     Direction = 1;

 75                 }

 76                 else 

 77                 {

 78                     if (transferLeft > cvsGround.Width + 400)

 79                     {

 80                         ElementList.Add(element);

 81                     }

 82                     if (transferLeft < endDouble)

 83                     {

 84                         endDouble = transferLeft;

 85                     }

 86                     Direction = 0;

 87                 }

 88                 

 89             }

 90             //循环删除图片

 91             foreach (UIElement element in ElementList) 

 92             {

 93                 cvsGround.Children.Remove(element);

 94             }

 95 

 96             List<Image> imgList = new List<Image>();

 97 

 98             //考虑每次移动的误差  endDouble 都要 加上图片的 宽度

 99             if (to < 0)

100             {

101                 imgList = ControlsLoad(ElementList.Count, Direction, endDouble + 100);

102             }

103             else 

104             {

105                 imgList = ControlsLoad(ElementList.Count, Direction, endDouble - 100);

106             }

107             

108             //循环移动 添加的图片

109             foreach (UIElement element in imgList)

110             {

111                 double transferLeft = Convert.ToDouble(element.GetValue(Canvas.LeftProperty));

112                 doubleAnimation.To = to + transferLeft;

113                 element.BeginAnimation(Canvas.LeftProperty, doubleAnimation);//设置动画应用的属性并启动动画 

114             }

115             //System.Windows.Forms.MessageBox.Show(cvsGround.Children.Count + "");

116         }

117 

118         private double pressedX;

119         /// <summary>  

120         /// 点击鼠标，记录鼠标单击的位置  

121         /// </summary>  

122         /// <param name="sender"></param>  

123         /// <param name="e"></param>  

124         private void grdTest_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)

125         {

126             ////获得鼠标点击的X坐标  

127             pressedX = e.GetPosition(cvsGround).X;

128         }

129 

130         /// <summary>

131         /// 鼠标释放时的操作

132         /// </summary>

133         /// <param name="sender"></param>

134         /// <param name="e"></param>

135         private void grdTest_PreviewMouseLeftButtonUp(object sender, MouseButtonEventArgs e)

136         {

137             

138            

139             

140             ////获得鼠标释放时的位置  

141             double releasedX = e.GetPosition(cvsGround).X;

142             ////获得距离间隔  

143             double to = releasedX - pressedX;

144             pressedX = 0;

145             ////计算出传送带要的目标位置  

146             

147            

148             DoMove(to);

149         }

150         /// <summary>

151         /// esc关闭窗口

152         /// </summary>

153         /// <param name="sender"></param>

154         /// <param name="e"></param>

155         private void Window_KeyDown(object sender, KeyEventArgs e)

156         {

157             if (e.Key == Key.Escape) 

158             {

159                 System.Environment.Exit(0);

160             }

161         }

162 

163         private void Window_Loaded(object sender, RoutedEventArgs e)

164         {

165             AniamtionLoad();

166             ControlsLoad();

167 

168         }

169 

170         /// <summary>

171         /// 图片的运动方法

172         /// </summary>

173         private void AniamtionLoad() 

174         {

175             doubleAnimation.Duration = TimeSpan.FromSeconds(0.5);//设置动画时间线长度  

176             doubleAnimation.AccelerationRatio = 0.1;//动画加速  

177             doubleAnimation.DecelerationRatio = 0.5;//动画减速  

178             doubleAnimation.FillBehavior = FillBehavior.HoldEnd;//设置动画完成后执行的操作  

179         }

180         /// <summary>

181         /// 产生初始图片

182         /// </summary>

183         private void ControlsLoad() 

184         {

185             

186             for (int i = -4 ; i < 30; i++)

187             {

188                 

189                 // Create the image element.

190                 Image simpleImage = new Image();

191                 simpleImage.Width = 100;

192                 Canvas.SetLeft(simpleImage, i * 100);

193 

194                

195                 // Set the image source.

196                 simpleImage.Source = createImg();

197 

198                 cvsGround.Children.Add(simpleImage);

199             }

200         }

201         /// <summary>

202         /// 循环产生图片

203         /// </summary>

204         /// <param name="num">产生图片的个数</param>

205         /// <param name="Direction">产生图片的方向</param>

206         /// <param name="Location">产生图片的位置</param>

207         /// <returns></returns>

208         private List<Image> ControlsLoad(int num, int Direction, double Location)

209         {

210             List<Image> imgList = new List<Image>();

211             for (int i = 0; i < num; i++)

212             {

213                 

214                 Image simpleImage = new Image();

215                 simpleImage.Width = 100;

216 

217                 if (Direction == 1) 

218                 {

219                     Canvas.SetLeft(simpleImage, i * 100 + Location);

220                 }

221                 else

222                 {

223                     Canvas.SetLeft(simpleImage, -i * 100 + Location);

224                 }

225 

226 

227 

228                 simpleImage.Source = createImg();

229                 cvsGround.Children.Add(simpleImage);

230                 imgList.Add(simpleImage);

231             }

232             return imgList;

233         }

234 

235 

236         /// <summary>

237         /// 循环产生照片

238         /// </summary>

239         /// <returns></returns>

240         public BitmapImage createImg()

241         {

242             imgCycle++;

243             if (imgCycle > imgCount)

244             {

245                 imgCycle = 1;

246             }

247             Console.WriteLine(imgCycle);

248             // Create source.

249             BitmapImage bi = new BitmapImage();

250             // BitmapImage.UriSource must be in a BeginInit/EndInit block.

251             bi.BeginInit();

252             bi.UriSource = new Uri(@"/res/" + imgCycle + ".jpg", UriKind.RelativeOrAbsolute);

253             bi.EndInit();

254             // Set the image source.

255 

256             return bi;

257         }

258       

259 

260     }

261 }

 

转帖请注明出处  林夕木大大