WPF實(shí)現(xiàn)簡(jiǎn)單的跑馬燈效果

更新時(shí)間：2017年06月01日 10:10:27 作者：眾尋

這篇文章主要為大家詳細(xì)介紹了WPF實(shí)現(xiàn)簡(jiǎn)單的跑馬燈效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

最近項(xiàng)目上要用到跑馬燈的效果，和網(wǎng)上不太相同的是，網(wǎng)上大部分都是連續(xù)的，而我們要求的是不連續(xù)的。

也就是是，界面上就展示4項(xiàng)（展示項(xiàng)數(shù)可變），如果有7項(xiàng)要展示的話，則不斷的在4個(gè)空格里左跳，當(dāng)然，銜接上效果不是很好看。

然后，需要支持點(diǎn)擊以后進(jìn)行移除掉不再顯示的內(nèi)容。

效果如下：

思路大致如下：

1、最外層用一個(gè)ViewBox，為了可以填充調(diào)用此控件的地方，這樣可以方便自動(dòng)拉伸

復(fù)制代碼代碼如下:

<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、定義三個(gè)變量，一個(gè)是Count值，是為了設(shè)定要展示的UserControl的個(gè)數(shù)的，例如默認(rèn)是4個(gè)，如效果圖，當(dāng)然，設(shè)置成5的話，就是5個(gè)了；一個(gè)List<Grid>是為了放入展示控件的列表，一個(gè)List<UserControl>是用來(lái)放所有要用于跑馬燈里的控件的。

3、設(shè)置一個(gè)Canvas，放入到最外層的Viewbox中，用于跑馬燈時(shí)候用（這也是常用的跑馬燈控件Canvas）

//給Canvas設(shè)置一些屬性
 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、將要循環(huán)的Grid放入到Canvas里，這里的Grid的個(gè)數(shù)，要比展示的個(gè)數(shù)大一個(gè)，也就是Count+1個(gè)值，因?yàn)闈L動(dòng)的時(shí)候，其實(shí)是在最外面有一個(gè)的，這樣保證了循環(huán)的走動(dòng)。至于兩個(gè)控件之間的Margin這個(gè)就是要設(shè)置Grid的了，到時(shí)候控件是直接扔進(jìn)Grid里的

//循環(huán)將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、給每個(gè)Grid增加一個(gè)動(dòng)畫(huà)效果，就是向左移動(dòng)的效果

for (int i = 0; i < UcListForShow.Count; i++)
{
 //設(shè)置滾動(dòng)時(shí)候的效果
 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、滾動(dòng)的時(shí)候，要計(jì)算UserControl到底是添加到了哪個(gè)Grid里面，也就是哪個(gè)控件作為了第一位。

我們?cè)O(shè)置一個(gè)索引值scroll_index，默認(rèn)的時(shí)候，scroll_index=0，這是初始的狀態(tài)，當(dāng)滾動(dòng)起來(lái)以后，scroll_index = scroll_index + 1 - Uc_Count;

然后，判斷，循環(huán)的時(shí)候，是否是展示列表的末尾了，如果是的話，則要填充的控件是scroll_index %UcListSum.Count（滾動(dòng)索引，對(duì)總數(shù)直接取余數(shù)），如果不是的話則是scroll_index++ % UcListSum.Count（滾動(dòng)索引++，對(duì)總數(shù)直接取余數(shù)）

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從原來(lái)的里面移除掉，要不然會(huì)拋錯(cuò)，Usercontrol已屬于另一個(gè)控件
 }
 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;//注冊(cè)隱藏事件
 UcListForShow[i].Children.Add(btn);
}

代碼中，需要注意的是(uc.Parent as Grid).Children.Clear()，如果不移除的話，則會(huì)提示，已經(jīng)屬于另一個(gè)，所以，要從parent里面移除掉。

7、Button的隱藏事件，當(dāng)Button點(diǎn)擊以后，則要進(jìn)行隱藏，其實(shí)也就是將總數(shù)里面，減除掉不再顯示的那一項(xiàng)

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)//當(dāng)列表數(shù)和要展示的數(shù)目相同的時(shí)候，就停止掉動(dòng)畫(huà)效果
 {
  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>
  /// 用來(lái)展示幾個(gè)
  /// </summary>
  public int Uc_Count
  {
   get
   {
    return _uc_Count;
   }

   set
   {
    _uc_Count = value;
   }
  }

  private List<Grid> _ucListForShow = new List<Grid>();
  /// <summary>
  /// 用來(lái)展示的控件列表
  /// </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;//滾動(dòng)索引
  double scroll_width;//滾動(dòng)寬度

  void GridLayout()
  {
   if (Uc_Count == 0)//如果這個(gè)值沒(méi)有賦值的話，則默認(rèn)顯示四個(gè)
   {
    Uc_Count = 4;
   }
   //給Canvas設(shè)置一些屬性
   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;
   //循環(huán)將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++)
   {//設(shè)置滾動(dòng)時(shí)候的效果
    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從原來(lái)的里面移除掉，要不然會(huì)拋錯(cuò)，Usercontrol已屬于另一個(gè)控件
    }
    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;//注冊(cè)隱藏事件
    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)//當(dāng)列表數(shù)和要展示的數(shù)目相同的時(shí)候，就停止掉動(dòng)畫(huà)效果
   {
    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)//如果是停止的狀態(tài)，則直接返回，不再起作用
   {
    return;
   }
   if (storyboard_imgs.GetIsPaused() == true)//如果是暫停狀態(tài)的話，則開(kāi)始
   {
    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顯示，如果是單獨(dú)給Content設(shè)置圖片的話，則只有一個(gè)按鈕顯示圖片，其他的不顯示-->
   <Setter.Value>
    <ControlTemplate TargetType="{x:Type Button}">
     <Border>
      <Image Source="hiden.png"/>
     </Border>
    </ControlTemplate>
   </Setter.Value>
  </Setter>
 </Style>
</ResourceDictionary>

沒(méi)有解決的問(wèn)題

想給Button增加鼠標(biāo)懸停的時(shí)候，顯示，移除的時(shí)候隱藏，但是發(fā)現(xiàn)不好使，原因是當(dāng)MouseOver上去的時(shí)候，雖然Visibility的值變了，但是只有到下一次的時(shí)候，Button的值才被附上，而此時(shí)，已經(jīng)MouseLeave了，請(qǐng)哪位大神指導(dǎo)一下，看看這個(gè)顯示和隱藏怎么做。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: