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();
            }
        }
    }
}

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了，请哪位大神指导一下，看看这个显示和隐藏怎么做。

时间： 2024-08-28 22:11:05

WPF 简易的跑马灯效果的相关文章

横冲直撞vue(第四篇)：v-model、指令系统总结、指令系统示例轮播图实现、指令系统示例跑马灯效果实现、在vue中使用样式的方式

一. v-model v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素. 尽管有些神奇,但v-model本质上不过是语法糖.它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理. v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件: text 和 textarea 元素使用 value 属性和 input 事件: checkbox

练习：WinForm 跑马灯效果+Timer

using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; namespace Timer { public partial class Form1 : Form { public Form1

Android TextView跑马灯效果

TextView跑马灯简单效果 <!--简单示例--> <TextView android:text="@string/longWord" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/textView1" android:ellipsize="marquee&quo

android 怎么实现跑马灯效果

自定义控件 FocusedTextView, 使android系统误以为它拥有焦点 1 public class FocusedTextView extends TextView { 2 public FocusedTextView(Context context, AttributeSet attrs, int defStyle) { 3 super(context, attrs, defStyle); 4 // TODO Auto-generated constructor stub 5 }

框架，锚点，背景音乐，嵌入视频和跑马灯效果

框架,iframe有点过时,会在部分浏览器出现一些奇怪的问题:设置三个属性: 1.src,框架默认的显示路径 2.name,让超链接的target属性与name值相等,就可以将超链接网页在框架中打开 3.框架的宽度和高度 站点:实际上就是一个文件夹,单独起了一个名字.统一来管理所有页面,就是一个站点,称之为网站 锚点: 书写格式:<a href="#锚点位置对应的名称">内容</a> --#是在本页面中 <a name="锚点位置的名称"

jCarousel Lite 实现图片跑马灯效果

官方网站:http://www.gmarwaha.com/jquery/jcarousellite/ demo: <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="http://libs.baidu.com/jquery/1.9.0/jquer

Android界面(1) 使用TextView实现跑马灯效果

方法一:(只能实现单个TextView的跑马灯效果)在TextView添加以下控件 android:singleLine="true"只能单行,超出的文字显示为"..." android:ellipsize="marquee"省略号没有,但没有跑马灯效果 android:focusable="true" android:focusableInTouchMode="true" 方法二:(可以实现多行TextV

安卓TextView的跑马灯效果

跑马灯效果的实现非常简单,可分为两步 1.定义一个View继承TextView,重写isFocused方法 package com.jsako.marquee; import android.content.Context; import android.util.AttributeSet; import android.view.ViewDebug.ExportedProperty; import android.widget.TextView; public class MarqueeTex

2、按下按键S1控制LED1.LED2.LED3实现跑马灯效果（CC2540开发寄存器设置）

按下按键S1控制LED1.LED2.LED3实现跑马灯效果 1 /**************************************************************************** 2 * 文 件 名: main.c 3 * 作 者: Amo [ www.amoMcu.com 阿莫单片机] 4 * 修 订: 2014-04-08 5 * 版 本: 1.0 6 * 描 述: 按下按键S1控制LED1.LED2.LED3实现跑马灯效果 7 ***********