作者：深深i | 来源：互联网 | 2021-12-18 12:48
最近项目上要用到跑马灯的效果，和网上不太相同的是，网上大部分都是连续的，而我们要求的是不连续的。
也就是是，界面上就展示4项（展示项数可变），如果有7项要展示的话，则不断的在4个空格里左跳，当然，衔接上效果不是很好看。
然后，需要支持点击以后进行移除掉不再显示的内容。
效果如下：
思路大致如下：
1、最外层用一个ViewBox，为了可以填充调用此控件的地方，这样可以方便自动拉伸
代码如下:
2、定义三个变量，一个是Count值，是为了设定要展示的UserControl的个数的，例如默认是4个，如效果图，当然，设置成5的话，就是5个了；一个List是为了放入展示控件的列表，一个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
5、给每个Grid增加一个动画效果，就是向左移动的效果
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
代码中，需要注意的是(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
所有代码如下：
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 List UcListForShow
{
get
{
return _ucListForShow;
}
set
{
_ucListForShow = value;
}
}
private List _ucListSum = new List();
///
/// 要添加的控件的列表
///
public List 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
没有解决的问题
想给Button增加鼠标悬停的时候，显示，移除的时候隐藏，但是发现不好使，原因是当MouseOver上去的时候，虽然Visibility的值变了，但是只有到下一次的时候，Button的值才被附上，而此时，已经MouseLeave了，请哪位大神指导一下，看看这个显示和隐藏怎么做。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
京公网安备 11010802041100号