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 = ; i < Uc_Count + ; i++)
{
Grid grid = new Grid();
grid.Width = canvas_board.Width / Uc_Count - ;
grid.Height = canvas_board.Height - ;
grid.Margin = new Thickness();
this.canvas_board.Children.Add(grid);
grid.SetValue(Canvas.TopProperty, 0.0);
grid.SetValue(Canvas.LeftProperty, i * (grid.Width + )); UcListForShow.Add(grid);
}
5、给每个Grid增加一个动画效果,就是向左移动的效果
for (int i = ; i < UcListForShow.Count; i++)
{
//设置滚动时候的效果
DoubleAnimationUsingKeyFrames daukf_uc = new DoubleAnimationUsingKeyFrames();
LinearDoubleKeyFrame k1_uc = new LinearDoubleKeyFrame(i * (UcListForShow[i].Width + ), KeyTime.FromTimeSpan(TimeSpan.FromSeconds()));
LinearDoubleKeyFrame k2_uc = new LinearDoubleKeyFrame((i - ) * (UcListForShow[i].Width + ), 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 + - Uc_Count; for (int i = ; i < UcListForShow.Count; i++)
{
UcListForShow[i].SetValue(Canvas.LeftProperty, i * (UcListForShow[i].Width + ));
UserControl uc;
if (i == UcListForShow.Count - )
{
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)[] as UserControl));
}
if (UcListSum.Count == Uc_Count)//当列表数和要展示的数目相同的时候,就停止掉动画效果
{
storyboard_imgs.Completed -= Storyboard_imgs_Completed;
storyboard_imgs.Stop();
for (int i = ; 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 = ;
/// <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 = ;//滚动索引
double scroll_width;//滚动宽度 void GridLayout()
{
if (Uc_Count == )//如果这个值没有赋值的话,则默认显示四个
{
Uc_Count = ;
}
//给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 = ; i < Uc_Count + ; i++)
{
Grid grid = new Grid();
grid.Width = canvas_board.Width / Uc_Count - ;
grid.Height = canvas_board.Height - ;
grid.Margin = new Thickness();
this.canvas_board.Children.Add(grid);
grid.SetValue(Canvas.TopProperty, 0.0);
grid.SetValue(Canvas.LeftProperty, i * (grid.Width + )); UcListForShow.Add(grid);
}
} void StoryLoad()
{
for (int i = ; i < UcListForShow.Count; i++)
{//设置滚动时候的效果
DoubleAnimationUsingKeyFrames daukf_uc = new DoubleAnimationUsingKeyFrames();
LinearDoubleKeyFrame k1_uc = new LinearDoubleKeyFrame(i * (UcListForShow[i].Width + ), KeyTime.FromTimeSpan(TimeSpan.FromSeconds()));
LinearDoubleKeyFrame k2_uc = new LinearDoubleKeyFrame((i - ) * (UcListForShow[i].Width + ), 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 + - Uc_Count; for (int i = ; i < UcListForShow.Count; i++)
{
UcListForShow[i].SetValue(Canvas.LeftProperty, i * (UcListForShow[i].Width + ));
UserControl uc;
if (i == UcListForShow.Count - )
{
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)[] as UserControl));
}
if (UcListSum.Count == Uc_Count)//当列表数和要展示的数目相同的时候,就停止掉动画效果
{
storyboard_imgs.Completed -= Storyboard_imgs_Completed;
storyboard_imgs.Stop();
for (int i = ; 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 = ; i < UcListForShow.Count; i++)
{
UserControl uc;
if (i == UcListForShow.Count - )
{
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();
}
}
}
}
MarqueeUC
<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>
MarqueeUserControlDictionary
没有解决的问题
想给Button增加鼠标悬停的时候,显示,移除的时候隐藏,但是发现不好使,原因是当MouseOver上去的时候,虽然Visibility的值变了,但是只有到下一次的时候,Button的值才被附上,而此时,已经MouseLeave了,请哪位大神指导一下,看看这个显示和隐藏怎么做。
WPF 简易的跑马灯效果的更多相关文章
- WPF 实现跑马灯效果的Label控件,数据绑定方式实现
原文:WPF 实现跑马灯效果的Label控件,数据绑定方式实现 项目中需要使用数据绑定的方式实现跑马灯效果的Label,故重构了Label控件:具体代码如下 using System; using S ...
- JavaScript小实例-文字跑马灯效果
我们常常能看到显示屏上字体的滚动以及手机弹幕等,下面所示代码就是一个简易的文字跑马灯的效果: <!DOCTYPE html> <html> <head lang=&quo ...
- TextView跑马灯效果
转载:http://www.2cto.com/kf/201409/330658.html 一.只想让TextView显示一行,但是文字超过TextView的长度怎么办?在开头显示省略号 android ...
- Android_TextView之跑马灯效果
对于android控件中的TextView,相信大家一定不陌生,在显示文本内容时十分方便.不过我在使用时遇到一个小问题,就是当文字交多时,如何为用户进行展示.今天就为大家介绍一种解决方案--跑马灯效果 ...
- android中实现跑马灯效果以及AutoCompleteTestView与MultiAutoCompleteTextView的学习
跑马灯效果 1.用过属性的方式实现跑马灯效果 属性: android:singleLine="true" 这个属性是设置TextView文本中文字 ...
- Android 实现多行文本跑马灯效果
Android TextView 实现跑马灯的效果很简单,只要加三个属性就可以了. android:ellipsize="marquee" android:focusable=&q ...
- android:ellipsize实现跑马灯效果总结(转)
最近无意间看到了涉及到跑马灯效果的代码,于是在网上查阅了很多资料,在这里对自己看的一些文章进行一下总结,顺便加上自己的一些体会. 让我们一步步逐渐向下. 首先我们要实现走马灯这样一个效果,通常来说 ...
- flex 简单跑马灯效果(竖着显示)
<mx:Move id="move_area" target="{VBox_AreaWarning}"/> //move效果,模拟跑马灯 <s ...
- Dom操作--跑马灯效果
这里给园友们演示的是Dom操作实现跑马灯效果,相信我们很多人都用Winform实现过跑马灯效果,其中的关键就是Tirm控件,那么在Dom操作中是用setInterval方法来实现隔一段时间执行一段代码 ...
随机推荐
- 微信小程序入门学习
前(che)言(dan): 近几天,微信小程序的内测引起了众多开发人员的热议,很多人都认为这将会成为一大热门,那么好吧,虽然我是一个小白,但这是个新玩意,花点时间稍稍钻研一下也是无妨的,谁让我没有女朋 ...
- 常见BOM实用对象
1.跨浏览器获取窗口左边上边位置 2.IE9+.Chrome.Safari.Opera.Firefox支持下列属性. innerheight 返回浏览器窗口本身的高度. innerwidth 返回浏 ...
- 第二章 Struts 2的应用
2.1 Struts 2的应用 2.1.1 使用步骤 1.创建web项目,添加jar包,创建helloWorld.jsp页面 2.创建HelloWorldAction ...
- Node.js系列:Buffer类的使用
客户端JavaScript中没有对二进制数据提供很好的支持.但是在处理TCP流或文件流时,必须要处理二进制数据.Node.js定义了一个Buffer类,用来创建一个专门存放二进制数据的缓存区. Buf ...
- 【转】JDBC学习笔记(8)——数据库连接池(dbcp&C3P0)
转自:http://www.cnblogs.com/ysw-go/ JDBC数据库连接池的必要性 一.在使用开发基于数据库的web程序时,传统的模式基本是按一下步骤: 1)在主程序(如servlet/ ...
- MyBatis-plus 代码自动生成器
MyBatis-plus 代码自动生成器 1.添加pom文件依赖 <!-- Mybatis-Plus 自动生成实体类--> <dependency> <groupId& ...
- HTML5 模拟现实物理效果
Ball Pool 是一个基于 HTML5 技术的实验,模拟现实物理效果,让你在 Web 中感受自然物体的运动.玩法介绍:可以随意拖动圆球.点击页面背景.晃动浏览器.双击页面背景或者按住鼠标左键,有不 ...
- java集合的核心知识
1. 集合 1.1. 什么是集合 存储对象的容器,面向对象语言对事物的体现都是以对象的形式,所以为了方便对多个对象的操作,存储对象,集合是存储对象最常用的一种方式. 集合的出现就是为了持有对象. ...
- FrameBuffer系列 之 显示图片
摘自:http://blog.csdn.net/luxiaoxun/article/details/7622988 #include <unistd.h> #include < ...
- linux 内核的futex pi-support,即pi-futex使用rt_mutex委托
futex的pi-support,也就是为futex添加pi算法解决优先级逆转的能力,使用pi-support的futex又称为pi-futex.在linux内核的同步机制中,有一个pi算法的成例,就 ...