WPF中標籤上的類似滾動條的動畫

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

更全面的/不同的例子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(); 
    } 
} 

Answer 2

首先，你要「平滑滾動」的列表框：

ScrollViewer.CanContentScroll="False" 

然後，你可以創建一個自定義Attached Property指定垂直偏移要滾動。然後創建一個自定義行爲，該行爲掛鉤到ListBox的ItemsSource的「ItemsSourceChanged」事件，該事件將觸發您可以在行爲中定義的動畫。這至少應該是一個開始。我不確定具體的動畫是什麼......一些DoubleAnimation使用計算偏移量加上新項目的高度。