WPF实现简单的跑马灯效果

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

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

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

效果如下:

WPF实现简单的跑马灯效果

思路大致如下:

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

复制代码 代码如下:

<Viewbox x:Name="viewbox_main" MouseLeave="grid_main_MouseLeave" MouseMove="grid_main_MouseMove"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stretch="Fill"/>

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

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

//给Canvas设置一些属性 canvas_board.VerticalAlignment = VerticalAlignment.Stretch; canvas_board.HorizontalAlignment = HorizontalAlignment.Stretch; canvas_board.Width = this.viewbox_main.ActualWidth; canvas_board.Height = this.viewbox_main.ActualHeight; canvas_board.ClipToBounds = true; //用viewbox可以支持拉伸 this.viewbox_main.Child = canvas_board;

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

//循环将Grid加入到要展示的列表里 for (int i = 0; i < Uc_Count + 1; i++) { Grid grid = new Grid(); grid.Width = canvas_board.Width / Uc_Count - 10; grid.Height = canvas_board.Height - 10; grid.Margin = new Thickness(5); this.canvas_board.Children.Add(grid); grid.SetValue(Canvas.TopProperty, 0.0); grid.SetValue(Canvas.LeftProperty, i * (grid.Width + 10)); UcListForShow.Add(grid); }

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

for (int i = 0; i < UcListForShow.Count; i++) { //设置滚动时候的效果 DoubleAnimationUsingKeyFrames daukf_uc = new DoubleAnimationUsingKeyFrames(); LinearDoubleKeyFrame k1_uc = new LinearDoubleKeyFrame(i * (UcListForShow[i].Width + 10), KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2))); LinearDoubleKeyFrame k2_uc = new LinearDoubleKeyFrame((i - 1) * (UcListForShow[i].Width + 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); Storyboard.SetTarget(daukf_uc, UcListForShow[i]); Storyboard.SetTargetProperty(daukf_uc, new PropertyPath("(Canvas.Left)")); }

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

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

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

scroll_index = scroll_index + 1 - Uc_Count; for (int i = 0; i < UcListForShow.Count; i++) { UcListForShow[i].SetValue(Canvas.LeftProperty, i * (UcListForShow[i].Width + 10)); UserControl uc; if (i == UcListForShow.Count - 1) { uc = UcListSum[scroll_index % UcListSum.Count]; } else { uc = UcListSum[scroll_index++ % UcListSum.Count]; } if (uc.Parent != null) { (uc.Parent as Grid).Children.Clear();//将Usercontrol从原来的里面移除掉,要不然会抛错,Usercontrol已属于另一个控件 } UcListForShow[i].Children.Clear(); UcListForShow[i].Children.Add(uc); //将隐藏按钮加入到Grid里 Button btn = new Button(); btn.Style = (dictionary["hidenStyle"] as Style);//从样式文件里读取到Button的样式 btn.Tag = UcListForShow[i].Children;//给Tag赋值,这样方便查找 btn.Click += Btn_Click;//注册隐藏事件 UcListForShow[i].Children.Add(btn); }

代码中,需要注意的是(uc.Parent as Grid).Children.Clear(),如果不移除的话,则会提示,已经属于另一个,所以,要从parent里面移除掉。

7、Button的隐藏事件,当Button点击以后,则要进行隐藏,其实也就是将总数里面,减除掉不再显示的那一项

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdpjwx.html