c# - WPF 中标签上的类似滚动条的动画

Question

我有一个简单的应用程序，点击按钮后，标签的值每秒更新一次。我将此作为我想要开发的进度条控件的 POC。

我想知道是否有一种方法可以将某种滚动动画应用于标签，这将:

1) 当标签的内容更新时，它会从顶部滚动新值，旧值会向下滚动并从 View 中消失(希望这是有意义的)。

我知道这可能可以通过某种动画来实现，但我在网上找不到任何有用的示例，如果有人知道如何做到这一点，请分享您的专业知识:

查看:

<Window x:Class="WpfApplication1.ScrollerView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Scroller" DataContext="{StaticResource scrollerVM}" Height="150" Width="300">
    <Grid>
        <ListBox ItemsSource="{Binding Messages}" Width="200" Height="50" BorderThickness="0" VerticalAlignment="Top" HorizontalAlignment="Left">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Label Content="{Binding Text}"  />
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ListBox>
        <Button Width="70" Height="24" Content="Add new" Command="{Binding AddNew}" HorizontalAlignment="Left" Margin="0,56,0,30" />
    </Grid>
</Window>

查看模型:

using System;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Windows.Threading;

namespace WpfApplication1.Scroller
{
    public class Message
    {
        public Message(string _text)
        {
            text = _text;
        }

        private string text;
        public string Text
        {
            get { return text; }
            set {text = value;}
        }
    }

    public class ScrollerViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        public DelegateCommand AddNew { get; protected set; }

        ObservableCollection<Message> _messages = new ObservableCollection<Message>();
        public ObservableCollection<Message> Messages
        {
            get { return _messages; }
            set
            {
                _messages = value;
                OnPropertyChanged("Messages");
            }
        }

        public ScrollerViewModel()
        {
            AddNew = new DelegateCommand(Add);
        }

        private void Add(object parameter)
        {
            DispatcherTimer timer = new DispatcherTimer();
            timer.Tick += new System.EventHandler(timer_Tick);
            timer.Interval = new System.TimeSpan(0, 0, 1);
            timer.Start();
        }

        private void timer_Tick(object sender, EventArgs e)
        {
            Messages.Clear();
            Messages.Add(new Message(DateTime.Now.ToString("ss")));
        }

        protected void OnPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }
}

Answer 1

更全面/不同的例子here.

以下将产生一个基本的垂直选取框(滚动文本 block )。

XAML:

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Loaded="Window_Loaded">
    <Canvas  Name="canvas1" >
        <TextBlock  Name="textBlock1">Hello</TextBlock>
    </Canvas>
</Window>

代码:

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private void BeginAnimation()
    {
        DoubleAnimation doubleAnimation = new DoubleAnimation();
        doubleAnimation.From = -textBlock1.ActualHeight;
        doubleAnimation.To = canvas1.ActualHeight;
        doubleAnimation.RepeatBehavior = RepeatBehavior.Forever;
        doubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(3));
        textBlock1.BeginAnimation(Canvas.TopProperty, doubleAnimation);
    }

    private void Window_Loaded(object sender, RoutedEventArgs e)
    {
        BeginAnimation();
    }
}