WPF 实现简单的跑马灯

本文用WPF的动画实现一个简单的跑马灯

xmal:

<Window x:Class="wpfstatusBar.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:wpfstatusBar"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="200">
    <Grid >
       
        <Canvas Name="canva1" ClipToBounds="True"  Background="Aquamarine" >
            <StackPanel Name="sp1" Background="Aqua"   Orientation="Horizontal">
                <Label Name="lab1" Content="1111111111111111111111111"/>
                <Label Name="lab2" Content="2222222222222222222222222"/>
                <Label Name="lab3" Content="3333333333333333333333333"/>
                <Label Name="lab4" Content="1111111111111111111111111"/>
            </StackPanel>
        </Canvas>
    </Grid>
</Window>

下面是一个最简单的例子，就让label动起来：

 

  public MainWindow()
        {
            InitializeComponent();
            storyboard_imgs = new Storyboard();
            daukf_img1 = new DoubleAnimationUsingKeyFrames();
            Storyboard.SetTarget(daukf_img1, sp1);
            Storyboard.SetTargetProperty(daukf_img1, new PropertyPath("(Canvas.Left)"));
            LinearDoubleKeyFrame k1_img1 = new LinearDoubleKeyFrame(0, KeyTime.FromTimeSpan(new TimeSpan(0, 0, 0)));
            LinearDoubleKeyFrame k2_img1 = new LinearDoubleKeyFrame(-600, KeyTime.FromTimeSpan(new TimeSpan(0, 0, 3)));
            daukf_img1.KeyFrames.Add(k1_img1);
            daukf_img1.KeyFrames.Add(k2_img1);
            storyboard_imgs.Children.Add(daukf_img1);
            storyboard_imgs.Begin();
        }

然后进入正题，利用定时器实现一个简单的循环滚动3个Label的跑马灯

关键点在于第三个lab滚动的时候怎么衔接第一个lab,其实很简单，就是多new了一个和第一个lab一样的lab放在最后，

在滚动第四个lab后，利用动画开始后会瞬间将lab定位到初始位置的特性即可完成，当然如果硬要只new三个lab也行，

通过add,remove这样的操作完成，但是会比较复杂，本文应该是实现该功能最简单的算法了！xmal和上面例子一样，cs代码如下：

 public partial class MainWindow : Window
    {
        DispatcherTimer _timer = new DispatcherTimer();  //UI定时器
        Storyboard storyboard_imgs = null;
        DoubleAnimationUsingKeyFrames daukf_img1 =null;
      
        public MainWindow()
        {
            InitializeComponent();
            _timer.Interval = new TimeSpan(0, 0, 0, 2);
            _timer.Tick += TimerElapsed;
            storyboard_imgs = new Storyboard();
            daukf_img1 = new DoubleAnimationUsingKeyFrames();
            Storyboard.SetTarget(daukf_img1, sp1);
            Storyboard.SetTargetProperty(daukf_img1, new PropertyPath("(Canvas.Left)"));
            _timer.Start();
        }
        int index = 0;
        void TimerElapsed(object o,EventArgs e)
        {
            double start_left = 0;
            double end_left = 0;
            index++;
            if(index%3==1)
            {
                end_left = -lab1.ActualWidth;
            }
            else if(index%3==2)
            {
                start_left= -lab1.ActualWidth;
                end_left = -lab1.ActualWidth-lab2.ActualWidth;
            }
            else if(index%3==0)
            {
                start_left = -lab1.ActualWidth - lab2.ActualWidth;
                end_left = -lab1.ActualWidth - lab2.ActualWidth-lab3.ActualWidth;
            }
            daukf_img1.KeyFrames.Clear();
            storyboard_imgs.Children.Clear();
            LinearDoubleKeyFrame k1_img1 = new LinearDoubleKeyFrame(start_left, KeyTime.FromTimeSpan(new TimeSpan(0, 0, 0)));
            LinearDoubleKeyFrame k2_img1 = new LinearDoubleKeyFrame(end_left, KeyTime.FromTimeSpan(new TimeSpan(0, 0, 1)));
            daukf_img1.KeyFrames.Add(k1_img1);
            daukf_img1.KeyFrames.Add(k2_img1);
            storyboard_imgs.Children.Add(daukf_img1);
            storyboard_imgs.Begin();
        }
    }