WPF使用Storyboard实现图片跑马灯效果
2013-02-17 15:45
302 查看
新建一个wpf项目,添加演示用图片,修改图片属性为"如果较新则复制"。(这里要注意,一定要修改属性!)
在MainWindow.xaml中,为系统自动创建的Grid容器命名,这样可以在后台操作的到它。
在后台代码中,添加窗体布局。
注意这里需要设置Canvas控件的ClipToBounds属性为true,这样Canvas将不再显示出超出自己范围以外的内容。同时使用到了SetValue方法来设置Image控件的Canvas.Top/Canvas.Left属性。
添加初始化函数,代码如下:
这里完成了一些图片素材的初始化,下面还需要完成故事板StoryLoad初始化事件:
注意到添加了关键帧,
关键帧1:实现跑马灯图片停顿的效果,可以按照需求设置关键帧的时长就是停顿的时长;
关键帧2:实现跑马灯的滚动效果,可以设置关键帧的时长就是滚动一次所需时间;
注意到这里必须设置故事板storyboard_imgs的FillBehavior属性为Stop,这样在一个故事结束后,所有与故事相关联的属性将可以回到初始状态。
下面完成故事板storyboard_imgs的完成Completed事件,代码如下:
Completed事件中,更改了image1和image2的图片,这样看起来,改变图片和位置的image1就好像变成了之前的image2,从而达到跑马灯的效果。
重新生成项目,F5运行,效果如下:
在MainWindow.xaml中,为系统自动创建的Grid容器命名,这样可以在后台操作的到它。
<Window x:Class="WpfRollPic.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525" Loaded="Window_Loaded"> <Grid Name="grid_main"></Grid> </Window>
在后台代码中,添加窗体布局。
public MainWindow() { InitializeComponent(); this.GridLayout(); } Canvas canvas_board = new Canvas(); Image image1 = new Image(); Image image2 = new Image(); void GridLayout() { this.WindowStartupLocation = WindowStartupLocation.CenterScreen; this.Width = 300; this.Height = 300; canvas_board.VerticalAlignment = VerticalAlignment.Top; canvas_board.HorizontalAlignment = HorizontalAlignment.Left; canvas_board.Margin = new Thickness(10, 10, 0, 0); canvas_board.Width = 200; canvas_board.Height = 200; //canvas_board.Background = new SolidColorBrush(Colors.LightBlue); canvas_board.ClipToBounds = true; this.grid_main.Children.Add(canvas_board); image1.Stretch = Stretch.Fill; image1.Width = 200; image1.Height = 200; this.canvas_board.Children.Add(image1); image1.SetValue(Canvas.TopProperty, 0.0); image1.SetValue(Canvas.LeftProperty, 0.0); image2.Stretch = Stretch.Fill; image2.Width = 200; image2.Height = 200; this.canvas_board.Children.Add(image2); image2.SetValue(Canvas.TopProperty, 200.0); image2.SetValue(Canvas.LeftProperty, 0.0); }
注意这里需要设置Canvas控件的ClipToBounds属性为true,这样Canvas将不再显示出超出自己范围以外的内容。同时使用到了SetValue方法来设置Image控件的Canvas.Top/Canvas.Left属性。
添加初始化函数,代码如下:
List<BitmapImage> ls_images = new List<BitmapImage>(); //存放图片组 int n_index = 0; //滚动索引 double n_height; //滚动高度 private void Window_Loaded(object sender, RoutedEventArgs e) { string[] img_files = Directory.GetFiles(string.Format("{0}../../Images", AppDomain.CurrentDomain.SetupInformation.ApplicationBase), "*.png"); foreach (string img_path in img_files) { ls_images.Add(new BitmapImage(new Uri(img_path, UriKind.Absolute))); } n_height = this.canvas_board.Height; this.image1.Source = ls_images[n_index++ % ls_images.Count]; this.image2.Source = ls_images[n_index % ls_images.Count]; this.StoryLoad(); }
这里完成了一些图片素材的初始化,下面还需要完成故事板StoryLoad初始化事件:
Storyboard storyboard_imgs = new Storyboard(); void StoryLoad() { DoubleAnimationUsingKeyFrames daukf_img1 = new DoubleAnimationUsingKeyFrames(); LinearDoubleKeyFrame k1_img1 = new LinearDoubleKeyFrame(0.0, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2))); LinearDoubleKeyFrame k2_img1 = new LinearDoubleKeyFrame(-n_height, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(4))); daukf_img1.KeyFrames.Add(k1_img1); daukf_img1.KeyFrames.Add(k2_img1); storyboard_imgs.Children.Add(daukf_img1); Storyboard.SetTarget(daukf_img1, image1); Storyboard.SetTargetProperty(daukf_img1, new PropertyPath("(Canvas.Top)")); DoubleAnimationUsingKeyFrames daukf_img2 = new DoubleAnimationUsingKeyFrames(); LinearDoubleKeyFrame k1_img2 = new LinearDoubleKeyFrame(n_height, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2))); LinearDoubleKeyFrame k2_img2 = new LinearDoubleKeyFrame(0.0, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(4))); daukf_img2.KeyFrames.Add(k1_img2); daukf_img2.KeyFrames.Add(k2_img2); storyboard_imgs.Children.Add(daukf_img2); Storyboard.SetTarget(daukf_img2, image2); Storyboard.SetTargetProperty(daukf_img2, new PropertyPath("(Canvas.Top)")); storyboard_imgs.FillBehavior = FillBehavior.Stop; storyboard_imgs.Completed += new EventHandler(storyboard_imgs_Completed); storyboard_imgs.Begin(); }
注意到添加了关键帧,
关键帧1:实现跑马灯图片停顿的效果,可以按照需求设置关键帧的时长就是停顿的时长;
关键帧2:实现跑马灯的滚动效果,可以设置关键帧的时长就是滚动一次所需时间;
注意到这里必须设置故事板storyboard_imgs的FillBehavior属性为Stop,这样在一个故事结束后,所有与故事相关联的属性将可以回到初始状态。
下面完成故事板storyboard_imgs的完成Completed事件,代码如下:
void storyboard_imgs_Completed(object sender, EventArgs e) { image1.SetValue(Canvas.TopProperty, 0.0); image2.SetValue(Canvas.TopProperty, n_height); image1.Source = ls_images[n_index++ % ls_images.Count]; image2.Source = ls_images[n_index % ls_images.Count]; storyboard_imgs.Begin(); }
Completed事件中,更改了image1和image2的图片,这样看起来,改变图片和位置的image1就好像变成了之前的image2,从而达到跑马灯的效果。
重新生成项目,F5运行,效果如下:
相关文章推荐
- 基于modern ui for wpf的在线公开课平台 之五 使用ListBox实现图片列表效果
- 使用 StoryBoard 实现左右按钮切换图片的浏览效果
- 51.使用HorizontalScrollView+LinearLayout实现文字+图片的自动跑马灯效果
- WPF 实现跑马灯效果的Label控件,数据绑定方式实现
- 18.使用slideToggle()方法实现图片“变脸”效果
- 安卓控件使用系列4:TextView实现跑马灯效果
- 使用TextView实现跑马灯效果
- JavaScript使用FileReader实现图片上传预览效果
- 使用silverlight中的Storyboard实现动画效果
- 使用FlaycoBanner实现图片轮播效果(加载网络图片)
- c#,使用WPF的Adorner实现iPhone上新邮件或消息提示效果----实现(二)
- 自定义ImageView实现类似微信朋友圈发图片点击出来阴影效果;同时使用Picasso加载网络图片
- [Android] PorterDuff使用实例----实现新浪微博图片下载效果
- 使用JavaScript实现点击循环切换图片效果
- android图片轮播效果,RollViewPager的简单使用(跑马灯)
- 使用UITableView实现图片视差效果
- JQuery.HoverDir库基本使用方法,实现图片滑动动画效果
- 【转载】Android 使用开源库StickyGridHeaders来实现带sections和headers的GridView显示本地图片效果
- “上传图片到服务器”之SWFUpload与imgAreaSelect的使用----实现切图效果
- 【转】Android 使用ViewPager实现类似gallery画廊的效果(画廊效果之ViewPager显示多个图片)