WPF实现好看的跑马灯特效实例

分类：C#作者：佚名
这篇文章主要为大家详细介绍了WPF实现简单的跑马灯效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

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

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

效果如下：

思路大致如下：

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>

没有解决的问题

想给Button增加鼠标悬停的时候，显示，移除的时候隐藏，但是发现不好使，原因是当MouseOver上去的时候，虽然Visibility的值变了，但是只有到下一次的时候，Button的值才被附上，而此时，已经MouseLeave了，请哪位大神指导一下，看看这个显示和隐藏怎么做。

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

实例实例实现实现实现实现特效特效看的马灯

相关推荐

C# Dictionary通过value获取对应的key值
1：最直白的循环遍历方法，可以分为遍历key--value键值对以及所有的key两种表现形式2：用Linq的方式去查询（当然了这里要添加对应的命名空间 using System.Linq）如下为一个十分简单的代码示例：private void GetDicKeyByValue(){ Dicti...
清空XX中所有的textbox控件
private void ClearTextBox(){ foreach (var control in pnlDetail.Controls) { if (!(control is TextBox)) continue; var txtBox = (TextBox)control; txtBox.
IOC 控制反转
原文叫看《墨攻》理解IOC概念 2006年多部贺岁大片以让人应接不暇的频率纷至沓来，其中张之亮的《墨攻》算是比较出彩的一部，讲述了战国时期墨家人革离帮助梁 国反抗赵国侵略的个人英雄主义故事，恢宏壮阔，浑雄凝重的历史场面相当震撼。其中有一个场景：当刘德华所饰的墨者革离到达梁国都城 下，城上梁国守军问：
Failed to enable constraints. One or more rows contain values violating non-null, unique, or foreign-key constraints.
System.Data.ConstraintException: Failed to enable constraints. One or more rows contain values violating non-null, unique, or foreign-key constraints.
ASP.NET MVC(Razor)上运用UEditor和xhEditor编辑器检测到有潜在危险的 Request.Form的真正解决办法
Request.Form value was detected from the client在使用ASP.NET MVC3 开发系统的用了百度的UEditor编辑器提交表单时遇到检测到有潜在危险的 Request.Form，我百度一下，试了网上的方法，都没用。要在Web.config增加&lt;h
ASP.NET 设置目录权限
右击文件夹-&gt;安全选项卡-&gt;添加-&gt;高级-&gt;立即查找Windows Server 2003:请您在目录添加IIS来宾帐号（IUSR_Hostname）的只读权限，以及Network Service组的读写修改权限。Windows Server 2000:请您在目录添加IIS来
错误324 (net::ERR_EMPTY_RESPONSE):未知的错误
&lt;compilationdebug=&quot;true&quot;&gt;&lt;buildProviders&gt;&lt;addextension=&quot;.html&quot;type=&quot;System.Web.Compilation.PageBuildProvider&q
Spring.Net Resource handler for the 'web' protocol is not defined.
在ASP.NET MVC 中 Spring.NET 配置注入的时候，下面这方式是可行的。&lt;spring&gt; &lt;context&gt; &lt;resource uri=&quot;config://spring/objects&quot; /&gt; &lt;/context&gt;
怎么样测试程序运行所需时间
Stopwatch stopwatch = new Stopwatch();stopwatch.Start();。。。。。中间代码。。。&#x9;stopwatch.Stop();&#x9;long result = stopwatch.ElapsedMilliseconds;sqlBulkCopy.Close()
ASP.NET MVC ueditor图片上传失败问题
问题描述 在asp.net mvc 下配置ueditor图片上传时总是提示：缺少十六进制字符错误（IE下提示），起初还以为是我上传的图片名称中有中文字符所致，后来我又上传了英文字符名字的图片发现还是一样的错误提示：◆无赖之下只好到火狐下看错误的详情：◆第二个错误我无法解决，先看第一个，输入地址显示错
修改IIS下默认的ASP.NET版本。
已经安装net2.0 和3.5 ，但IIS里面却只有1.1开始→运行→CMDC:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\aspnet_regiis.exe -i按回车键后便会开始自动安装，安装完重启一下IIS在IIS中ASP.NET选项卡便可以看到。注
利用反射代替switch
根据传进来不同的值，调用不同的方法View Code protected void btn_SwitchClick(object sender, EventArgs e){ string result = &quot;&quot;; switch (ddlMethod.SelectedValue)
C#用正则表达式 获取标签的属性或值
整理两个 在C#中，用正则表达式 获取网页源代码标签的属性或值的方法 ：1、获取标签中的值： CSDN 结果：CSDN/// /// 获取字符中指定标签的值 /// /// 字符串 /// 标签 /// 值 public static string GetTitleContent(string st
List<T> to DataTable
/// &lt;summary&gt;/// 集合装换DataTable/// &lt;/summary&gt;/// &lt;param name=&quot;list&quot;&gt;集合&lt;/param&gt;/// &lt;returns&gt;&lt;/returns&gt;publ
将目录下面所有的 代码 文件合并到一个 文件中，写著作权复制代码时的必备良药
将目录下面所有的 .cs 文件合并到一个 code.cs 文件中，写著作权复制代码时的必备良药 @echo off echo 将该目录下所有.cs文件的内容合并到一个 code.cs 文件中! pause dir /ad/s/b &gt; folderPath.txt md codeTemp for
XML格式化工具
做接口开发的时候，往往接受参数或返回值是一个XML的字符串。如下图，不方便辨识 两种方法， 1.将它保存为xxx.xml，然后用浏览器打开。这种方法稍微有些麻烦。 2.使用 UltraEdit 工具
微软帮你做了枚举的位运算
一个字段控制多个状态选项private void GenerateAdvice_OnClick(object sender, RoutedEventArgs e){ TestStatus c1 = TestStatus.A | TestStatus.C | TestStatus.E; v...
C# JAVA 记录代码运行时间
C#
WPF Button LinkButton 绑定多个值 Template
效果如下： 代码如下：
.Net Core 多语言
StartUp.cs public void Configure(IApplicationBuilder app, IWebHostEnvironment env) { app.UseEndpoints(endpoints =&gt; { endpoints.MapControllerRoute(
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot