Question

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

我想知道是否有办法将某种滚动动画应用于标签：

1）当标签的内容被更新时，它将从顶部滚动新值，旧的将向下滚动并从视图中消失（希望这样做）。

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

查看：

<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

首先，你需要在ListBox上“平滑滚动”：

ScrollViewer.CanContentScroll="False"

然后，您可以创建自定义Attached Property以指定要滚动的垂直偏移。然后创建一个自定义行为，它连接到ListBox的ItemsSource的“ItemsSourceChanged”事件，该事件将触发您可以在行为中定义的动画。这应该至少是一个开始。我不确定具体的动画是什么......一些DoubleAnimation使用你的偏移计算加上新项目的高度。

Answer 2

更全面/不同的示例here.

以下将产生一个基本的垂直选框（滚动文本块）。

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

WPF中标签上的滚动式动画

2 个答案: