利用WPF怎么实现一个跑马灯效果

利用WPF怎么实现一个跑马灯效果？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

思路大致如下：

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

复制代码 代码如下:

<Viewbox x:Name="viewbox_main" Height="{Binding Path=ActualHeight}" Width="{Binding Path=ActualWidth}" 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点击以后，则要进行隐藏，其实也就是将总数里面，减除掉不再显示的那一项

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 {  /// <summary>  /// MarqueeUC.xaml 的交互逻辑  /// </summary>  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;   /// <summary>   /// 用来展示几个   /// </summary>   public int Uc_Count   {    get    {     return _uc_Count;    }    set    {     _uc_Count = value;    }   }   private List<Grid> _ucListForShow = new List<Grid>();   /// <summary>   /// 用来展示的控件列表   /// </summary>   private List<Grid> UcListForShow   {    get    {     return _ucListForShow;    }    set    {     _ucListForShow = value;    }   }   private List<UserControl> _ucListSum = new List<UserControl>();   /// <summary>   /// 要添加的控件的列表   /// </summary>   public List<UserControl> UcListSum   {    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();    }   }  } }

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"      xmlns:local="clr-namespace:MarqueeUserControl">  <Style TargetType="Button" x:Key="hidenStyle">   <Setter Property="Background" Value="Transparent"/>   <Setter Property="HorizontalAlignment" Value="Center"/>   <Setter Property="VerticalAlignment" Value="Center"/>   <Setter Property="Width" Value="25"/>   <Setter Property="Height" Value="25"/>   <Setter Property="BorderBrush" Value="Transparent"/>   <Setter Property="BorderThickness" Value="0"/>   <Setter Property="Template"><!--把Image放到Template里作为Content显示，如果是单独给Content设置图片的话，则只有一个按钮显示图片，其他的不显示-->    <Setter.Value>     <ControlTemplate TargetType="{x:Type Button}">      <Border>       <Image Source="hiden.png"/>      </Border>     </ControlTemplate>    </Setter.Value>   </Setter>  </Style> </ResourceDictionary>

看完上述内容，你们掌握利用WPF怎么实现一个跑马灯效果的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！