WPF实现跑马灯特效的方法 - 行业资讯 - 肥雀云

　　介绍

小编给大家分享一下WPF实现跑马灯特效的方法,希望大家阅读完这篇文章后大所收获、下面让我们一起去探讨吧!

最近项目上要用到跑马灯的效果,和网上不太相同的是,网上大部分都是连续的,而我们要求的是不连续的。

也就是是,界面上就展示4项(展示项数可变),如果有7项要展示的话,则不断的在4个空格里左跳,当然,衔接上效果不是很好看。

然后,需要支持点击以后进行移除掉不再显示的内容。

效果如下:

思路大致如下:

1,最外层用一个ViewBox,为了可以填充调用此控件的地方,这样可以方便自动拉伸

代码如下:

& lt; ViewBox x: Name=皏iewbox_main"身高=?ActualHeight}{绑定路径“;宽度=?ActualWidth}{绑定路径“;MouseLeave=癵rid_main_MouseLeave"MouseMove=癵rid_main_MouseMove"HorizontalAlignment=癝tretch"VerticalAlignment=癝tretch"拉伸=癋ill"/祝辞

2,定义三个变量,一个是计算值,是为了设定要展示的用户控件的个数的,例如默认是4个,如效果图,当然,设置成5的话,就是5个了,一个List是为了放入展示控件的列的表,一个List是用来放所有要用于跑马灯里的控件的。

3,设置一个画布,放入到最外层的Viewbox中,用于跑马灯时候用(这也是常用的跑马灯控件帆布)

//给画布上设置一些属性　　canvas_board。VerticalAlignment=VerticalAlignment.Stretch; 　　canvas_board。HorizontalAlignment=HorizontalAlignment.Stretch; 　　canvas_board。宽度=this.viewbox_main.ActualWidth; 　　canvas_board。身高=this.viewbox_main.ActualHeight; 　　canvas_board。ClipToBounds=true;//用viewbox可以支持拉伸　　this.viewbox_main。孩子=canvas_board;

4,将要循环的网格放入到画布里,这里的网格的个数,要比展示的个数大一个,也就是计数+ 1个值,因为滚动的时候,其实是在最外面有一个的,这样保证了循环的走动。至于两个控件之间的边缘这个就是要设置网格的了,到时候控件是直接扔进电网里的

//循环将网格加入到要展示的列表里　　for (int i=0;我& lt;Uc_Count + 1;我+ +) 　　{ 　　网格网格=new网格(); 　　网格。宽度=canvas_board。宽/Uc_Count - 10; 　　网格。身高=canvas_board。高度- 10; 　　网格。利润=new厚度(5); 　　this.canvas_board.Children.Add(网格); 　　grid.SetValue(画布。TopProperty, 0.0); 　　grid.SetValue(画布。LeftProperty,我*(网格。宽度+ 10)); 　　　　UcListForShow.Add(网格); 　　}

5,给每个网格增加一个动画效果,就是向左移动的效果

 (int i=0;我& lt;UcListForShow.Count;我+ +)
　　{//设置滚动时候的效果
　　DoubleAnimationUsingKeyFrames daukf_uc=new DoubleAnimationUsingKeyFrames ();
　　LinearDoubleKeyFrame k1_uc=new LinearDoubleKeyFrame(我* (UcListForShow[我]。宽度+ 10),KeyTime.FromTimeSpan (TimeSpan.FromSeconds (2)));
　　LinearDoubleKeyFrame k2_uc=new LinearDoubleKeyFrame ((i - 1) * (UcListForShow[我]。宽度+ 10),KeyTime.FromTimeSpan (TimeSpan.FromSeconds (2.5)));
　　daukf_uc.KeyFrames.Add (k1_uc);
　　daukf_uc.KeyFrames.Add (k2_uc);
　　storyboard_imgs.Children.Add (daukf_uc);
　　故事板。SetTarget (daukf_uc UcListForShow[我]);
　　故事板。SetTargetProperty (daukf_uc新PropertyPath (“(Canvas.Left)“));
　　}

6,滚动的时候,要计算用户控件到底是添加到了哪个网格里面,也就是哪个控件作为了第一位。

我们设置一个索引值scroll_index,默认的时候,scroll_index=0,这是初始的状态,当滚动起来以后,scroll_index=scroll_index + 1 - Uc_Count;

然后,判断,循环的时候,是否是展示列表的末尾了,如果是的话,则要填充的控件是scroll_index % UcListSum。计数(滚动索引,对总数直接取余数),如果不是的话则是scroll_index + + % UcListSum。计数(滚动索引+ +,对总数直接取余数)

 scroll_index=scroll_index + 1 - Uc_Count;
　　
　　for (int i=0;我& lt;UcListForShow.Count;我+ +)
　　{
　　UcListForShow[我].SetValue(画布。LeftProperty,我* (UcListForShow[我]。宽度+ 10));
　　用户控件加州大学;
　　如果(i==UcListForShow。数- 1)
　　{
　　加州大学=UcListSum [scroll_index % UcListSum.Count];
　　}
　　其他的
　　{
　　加州大学=UcListSum [scroll_index + + % UcListSum.Count];
　　}
　　如果(加州大学。父!=null)
　　{
　　(加州大学。父网格).Children.Clear();//将用户从原来的里面移除掉,要不然会抛错,用户控件已属于另一个控件
　　}
　　UcListForShow[我].Children.Clear ();
　　UcListForShow[我].Children.Add(加州大学);//将隐藏按钮加入到网格里
　　按钮btn=new按钮();
　　btn。风格=(字典(“hidenStyle")风格);//从样式文件里读取到按钮的样式
　　btn。标签=UcListForShow[我]定格;//给标签赋值,这样方便查找
　　btn。单击+=Btn_Click;//注册隐藏事件
　　UcListForShow[我].Children.Add (btn);
　　}WPF实现跑马灯特效的方法