新网创想网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
小编给大家分享一下WPF实现跑马灯特效的方法,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!
在重庆等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供成都网站设计、网站建设 网站设计制作按需网站策划,公司网站建设,企业网站建设,成都品牌网站建设,营销型网站建设,外贸营销网站建设,重庆网站建设费用合理。最近项目上要用到跑马灯的效果,和网上不太相同的是,网上大部分都是连续的,而我们要求的是不连续的。
也就是是,界面上就展示4项(展示项数可变),如果有7项要展示的话,则不断的在4个空格里左跳,当然,衔接上效果不是很好看。
然后,需要支持点击以后进行移除掉不再显示的内容。
效果如下:
思路大致如下:
1、最外层用一个ViewBox,为了可以填充调用此控件的地方,这样可以方便自动拉伸
复制代码 代码如下:
2、定义三个变量,一个是Count值,是为了设定要展示的UserControl的个数的,例如默认是4个,如效果图,当然,设置成5的话,就是5个了;一个List
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点击以后,则要进行隐藏,其实也就是将总数里面,减除掉不再显示的那一项
private void Btn_Click(object sender, RoutedEventArgs e) { if ((sender as Button).Tag != null) { UcListSum.Remove((((sender as Button).Tag as UIElementCollection)[0] as UserControl)); } if (UcListSum.Count == Uc_Count)//当列表数和要展示的数目相同的时候,就停止掉动画效果 { storyboard_imgs.Completed -= Storyboard_imgs_Completed; storyboard_imgs.Stop(); for (int i = 0; i < Uc_Count; i++) { UcListForShow[i].Children.Clear(); if (UcListSum[i].Parent != null) { (UcListSum[i].Parent as Grid).Children.Clear(); } UcListForShow[i].Children.Add(UcListSum[i]); } return; } }
所有代码如下:
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; namespace MarqueeUserControl { ////// MarqueeUC.xaml 的交互逻辑 /// public partial class MarqueeUC : UserControl { ResourceDictionary dictionary; public MarqueeUC() { InitializeComponent(); //读取样式文件 dictionary = new ResourceDictionary { Source = new Uri("/MarqueeUserControl;component/MarqueeUserControlDictionary.xaml", UriKind.Relative) }; } #region 属性 private int _uc_Count = 0; ////// 用来展示几个 /// public int Uc_Count { get { return _uc_Count; } set { _uc_Count = value; } } private List_ucListForShow = new List (); /// /// 用来展示的控件列表 /// private ListUcListForShow { get { return _ucListForShow; } set { _ucListForShow = value; } } private List _ucListSum = new List (); /// /// 要添加的控件的列表 /// public ListUcListSum { get { return _ucListSum; } set { _ucListSum = value; } } #endregion Canvas canvas_board = new Canvas(); Storyboard storyboard_imgs = new Storyboard(); int scroll_index = 0;//滚动索引 double scroll_width;//滚动宽度 void GridLayout() { if (Uc_Count == 0)//如果这个值没有赋值的话,则默认显示四个 { Uc_Count = 4; } //给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; //循环将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); } } void StoryLoad() { 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)")); } storyboard_imgs.FillBehavior = FillBehavior.Stop; storyboard_imgs.Completed += Storyboard_imgs_Completed; storyboard_imgs.Begin(); } private void Storyboard_imgs_Completed(object sender, EventArgs e) { 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); } storyboard_imgs.Begin(); } private void Btn_Click(object sender, RoutedEventArgs e) { if ((sender as Button).Tag != null) { UcListSum.Remove((((sender as Button).Tag as UIElementCollection)[0] as UserControl)); } if (UcListSum.Count == Uc_Count)//当列表数和要展示的数目相同的时候,就停止掉动画效果 { storyboard_imgs.Completed -= Storyboard_imgs_Completed; storyboard_imgs.Stop(); for (int i = 0; i < Uc_Count; i++) { UcListForShow[i].Children.Clear(); if (UcListSum[i].Parent != null) { (UcListSum[i].Parent as Grid).Children.Clear(); } UcListForShow[i].Children.Add(UcListSum[i]); } return; } } public void StartMar() { GridLayout(); scroll_width = this.canvas_board.Width; for (int i = 0; i < UcListForShow.Count; i++) { 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(); } UcListForShow[i].Children.Clear(); UcListForShow[i].Children.Add(uc); } StoryLoad(); } private void grid_main_MouseLeave(object sender, MouseEventArgs e) { if (storyboard_imgs.GetCurrentState() == ClockState.Stopped)//如果是停止的状态,则直接返回,不再起作用 { return; } if (storyboard_imgs.GetIsPaused() == true)//如果是暂停状态的话,则开始 { storyboard_imgs.Begin(); } } private void grid_main_MouseMove(object sender, MouseEventArgs e) { if (storyboard_imgs.GetIsPaused() == false) { storyboard_imgs.Pause(); } } } }
没有解决的问题
想给Button增加鼠标悬停的时候,显示,移除的时候隐藏,但是发现不好使,原因是当MouseOver上去的时候,虽然Visibility的值变了,但是只有到下一次的时候,Button的值才被附上,而此时,已经MouseLeave了,请哪位大神指导一下,看看这个显示和隐藏怎么做。
看完了这篇文章,相信你对WPF实现跑马灯特效的方法有了一定的了解,想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!