2

我有一个简单的应用程序，在单击按钮后，标签的值每秒更新一次。我将其作为我想要开发的进度条控件的 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));
            }
        }
    }
}
4

2 回答 2

0

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

ScrollViewer.CanContentScroll="False"

然后，您可以创建自定义附加属性来指定要滚动的垂直偏移量。然后创建一个与 ListBox 的 ItemsSource 的“ItemsSourceChanged”事件挂钩的自定义行为，该事件将触发您可以在行为内部定义的动画。这至少应该是一个开始。我不确定具体的动画是什么......一些 DoubleAnimation 使用您的偏移量加上新项目的高度的计算。

于 2012-08-23T15:47:36.387 回答
0

更全面/不同的例子在这里。

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

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();
    }
}
于 2012-08-29T19:15:58.740 回答